css

Twitter front-end guy Nicolas Gallagher likes both CSS and speech bubbles enough to want them unadulterated by images and non-semantic markup. The lesson from his many examples is that it all comes down to an :after pseudo element that puts the little triangle in there:

.speechbubble:after {
    content:"";
    position:absolute;
    bottom:-15px; /* value = - border-top-width - border-bottom-width */
    left:50px; /* controls horizontal position */
    border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
    border-style:solid;
    border-color:#f3961c transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

More examples on Nicolas’ site.

I’ve long been a fan of CSS3, but Estelle Weyl‘s WordCamp SF talk on it charged me up again. Her slides are not to be missed.

Who’d a thunk it: CSSHttpRequest is a way of doing cross-domain AJAX by using CSS’ @import method to fetch the data.

The cool browsers support radius corners, but Safari supports CSS transformations that allow developers to scale, skew, and rotate objects on the page like we’re used to doing in PostScript. And better than that, we can animate those transformations over time — all without any JavaScript.

Fire up Safari or Chrome and mouse over the examples here. The screencast at the top is from the menu on that page. There are, obviously, better uses for these transforms, but it’s easy to see it at work there. Also see this screencast. It shows a rendering error, but it’s a better use of the tech.

Now kick it up a notch with 3d transforms. They only work on the iPhone and iPod touch for now, but they’re quite nifty. See these examples: one, two. Paul Bakaus offers more detail, and Matthew Congrove offers this example of flick navigation.

I’m a fan of the Sandbox WordPress theme because it does so much to separate application logic from design, and a few small changes to the CSS can make huge changes to the look of the site. I think that’s the idea behind Yahoo! Developer Network’s Grids CSS library. That is, well structured HTML allows very sophisticated styling. All you have to do is plug in your content. To wit:

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.

That got Alister Cameron excited; he’s building a Sandbox-inspired, Yahoo! CSS-based WordPress theme he’s codenamed Vanilla.

(via)

It was part of a long thread among WordPress hackers over the summer and fall, but this post at VulgarisOverIP just reminded of it: minify promises to be an easy way to compress external CSS and JavaScript without adding extra steps to your develop/deploy process. No, really, look at the usage instructions. (To be clear, the Vulgaris and Google Code versions are different, one derived from the other and backported to PHP4 compatible. Still, the concept is the same.)

Vulgaris reports a nearly 300% decrease in time to download, definitely worth the effort.

It turns out the Internet Explorer doesn’t properly support CSS’s position: fixed. Google led me to the following:

• How To Create – Making Internet Explorer use position: fixed;
• doxdesk.com: software: fixed.js
• Fixed Positioning for Windows Internet Explorer

The DoxDesk solution looks promising and simple, but I think bugs elsewhere in my layout are preventing it from working. It’s time to start again from scratch.