CSS

Sunday project!

Export a Vox blog to MTIF (Movable Type Import Format), along with some CSS to style it.

Requires Python, httplib2, Feed Parser and Beautiful Soup.

A few months ago, I was helping a friend troubleshoot an odd iPhone-related visual error on Hunch. The right side of the buttons weren’t lining up vertically with the top or bottom of the rest of the button. Oddly, the problem only manifested itself when viewing the site at certain zoom levels (non-quantized, to be specific). Pinching in/out or zooming into specific parts of the page made the buttons render correctly.

We’d used a similar technique on Domainr, so were curious to see if there was a way to address it cleanly.

It appeared that WebKit for iPhone uses mipmaps to render minimized background images. This makes sense—it has fast texturemapping hardware, and OS X / Quartz has been using OpenGL to render 2D graphics for some time.

The combination of hardware texture filtering of mipmapped background images with (then) imprecise texture coordinates were causing the artifacts we’d been seeing (recent related changes in WebKit).

Domainr’s buttons are styled using a sliding-door technique with a single CSS sprite background image. By this time we were starting to test against Safari 4.0 and Firefox 3.5, which also demonstrated similar visual errors when using their full-page zoom features.

The solution ended up being simple:

Vertically align the left and right background images for the button in the sprite.

It’s a palliative fix, but works. We were able to keep the single sprite image, and not introduce iPhone-specific CSS or hack WebKit. In the end, there were other benefits to the fix. Despite redundant image data, aligning the background slices eased the process of updating the sprite image for new button variations.

Comfortably ensconced in A + A’s Manhattan abode, between three brick walls, Raptor and Chelsea, nursing the remainder of my cold, listening to In Rainbows, I revised this site. To be specific, I combined two sites: my TypePad blog and my [previously static] personal site, ydnar.com.

The design is a derivation of some recent work, an attempt to push the primary forward, and supporting content into the background without rendering it completely illegible. It’s set in a very desaturated olive, with subheads in 11px capitals, all around a uniform 15px baseline. The type is set in Helvetica Neue, with slightly condensed letter spacing. Links are Pantone 213 on hover. The only images on the page are in posts, and there is nothing except text, links and whitespace otherwise.

Back to this french press and finishing Amelie!

Nick asked me today if there was a way to just reload the stylesheets without having to reload the whole page, which can be frustrating for AJAX development. I hacked at it for a bit and stuck it on our development environment, then cleaned it up into a bookmarklet. Drag the following link to your toolbar for CSS reloading happiness & superior quality.

Reload CSS

Update: Fixed it to work in Internet Explorer.^* Turns out the original code was doing too much work, adding/removing link elements. The new code simply replaces the href attribute with a randomized value.

javascript:(function() {
    var e = document.getElementsByTagName( "link" );
    for( var i = 0; i < e.length; i++ )
        if( e[ i ].rel.match( /stylesheet/ ) )
            e[ i ].setAttribute( "href", e[ i ].getAttribute( "href" ).replace( /\?_r\=[^&]+|$/, "?_r=" + Math.random() ) );
})();

^* Once. It crashes on the 2nd time, at least in IE6 SP2.