everything flows » css

Facebook uses browser-specific body classes

Luke Rodgers — Thu, 20 Aug 2009 04:00:53 +0000

Having recently worked on a website for which page load and performance was really important, I’ve found myself viewing the source code for more and more sites. Taking a look at Facebook recently revealed that they use browser-specific classes on the body element, so that if you’re browsing with Safari 4, you’ll see something like:

If you’re already browser sniffing, this might be a better idea for applying targeted CSS rules than including an extra stylesheet with conditional comments (which means an extra HTTP request), or using the underscore hack (IE6), or star hack (IE7) which cause invalid CSS.

IE6 CSS hacks with Wordpress.com

Luke Rodgers — Fri, 13 Feb 2009 03:08:45 +0000

I’ve been working on a Wordpress.com blog for someone for which the “edit the CSS” upgrade has been purchased, and all has gone swell so far with tweaking the Kubrick theme. A couple !important declarations needed, but no big deal. That is, of course, until “make it work in IE6″ time came along.

Normally I’d just include a conditional comment, something seen by most developers to be a best practice, but in this case we can’t modify the php template files, so I had to break out the CSS hacks that I thought I had said goodbye to a few years ago.

There are several ways to go about this. First, I tried these tips from Ed Eliot, using the underscore trick to target just IE6. But interestingly (and perhaps unsurprisingly) Wordpress.com apparently won’t let you save any code that isn’t valid. I had it confirmed by support that my _margin-top: -200px; wouldn’t work.

After briefly considering @importing another stylesheet, I instead went with the CSS2 child selector approach outlined in a 24ways article from 2005. Basically, since IE6 doesn’t support the child selector ‘>’, you can make one declaration for IE6 then another for more advanced browsers using the child selector. E.g.

#content { /* for IE6 */
   margin-top: -200px;
}
#page > #content { /* for other browsers, incl. IE7+ */
   margin-top: 40px;
}

This might not get you all the mileage you need, but will probably help.

Incorporating web standards into your design brief or RFP

Luke Rodgers — Thu, 31 Jul 2008 20:08:14 +0000

Working on a design brief for a radical makeover of the website at work, and have been doing a bit of digging around into how people specify web standards in their project specs. Came across this post from quite a while ago, and ended up using it as sort of a template, with some modifications:

Usability, accessibility and standards

The website will conform to the following standards:
- Validation to either the W3C XHTML 1.0 transitional or strict document type
- Validation to the W3C’s CSS 2.1 or 1.0
- JavaScript will be implemented as progressive enhancement
- Will meet all WCAG Priority 1 Guidelines, except No. 1
The website will render correctly in IE6+ and Firefox 2+
All multimedia files will be available for download, and video will be provided via Flash
Alternative stylesheets will be developed for printers and mobile devices
Character encoding will be UTF-8

This is still not solidified, and I may decide to put HTML 4 in along with XHTML, though my preference is for the latter (for more on developing with XHTMl, see Jeffrey Zeldman’s “Better living Through XHTML” at A List Apart).

Some other notes:

No XHTML frameset doctype allowed!
Considered including the note about disallowing JavaScript browser detect methods in favour of object detect, as mentioned in the article above, but sometimes you need both and there’s no point painting yourself into such a nitpicky corner. Specifying “progressive enhancement” instead of “graceful degradation” is a good idea.
Why just level 1 priorities of the WCAG and why exclude Guideline #1? It’s a human resources thing. It would be great if we could provide transcripts of all the audio and video we post, but it’s unfortunately just not realistic.
Why just IE6+ and FF 2+? We get almost zero % of our users running Safari or IE 5.5, and only about 0.7% running Opera. Anything below 5% and you have to seriously consider the time and resources involved in browser testing, tweaking and hacking–especially for IE 5.5. My guess is that pretty much anything that works for Firefox 3 will be fine for Safari 3 and Opera 9+, and anything that doesn’t is probably trivial enough to forget about. If we were a big e-commerce site, and that 0.7% translated into 5,000 potential customers then I would probably think differently.
Flash–not quicktime (I always find it slow to load) and definitely not some Microsoft technology (that is also slow loading and may not work on a Mac). Flash is one of the most universally installed browser plugins.
Alternative stylesheets are a great idea to have control over how webpages print, and are also increasingly important given the proliferation of Internet-enabled mobile devices
Being a bilingual organization, we use a lot of French characters, and I find UTF-8 is the way to go.
We could specify mime type but I really don’t want to go there. There are lots of important articles discussing and usually warning against serving XHTML as text/html (see here for the classic, and here for the official), but given that I expect all our pages to validate, I’m not incredibly concerned about this.