When properly progressively enhancing a page, you’ll often have the need to modify your layout—sometimes more significantly than others—to accommodate the new features. Here’s a little technique I’ve been using to handle this.
<body>. sIFR adds a
.sIFR-active to your
<html>. This way, you can write specific styles with a specificity domain that only applies when sIFR has been activated.
Let’s do a quick example, setting up a progressively-enhanced tabbed interface. I’ll quickly create my HTML and CSS to read well without JS (example 1).
Now let’s turn the headings into our tabs and the subsquent content into tabbed content. Here’s the crucial part. Just under my main stylesheet, I’ll add these lines of code:
document.write('<link href="enhanced.css" rel="stylesheet" media="screen, projection" type="text/css" />');
- I’m following a more purist view of separating presentation and behavior.
- Because my styles are in a stylesheet added in the head, I don’t see the flash of unstyled content between the time the page initially renders and the time it would take JS to modify my markup.
The technique can easily can be extended too. In the same line of thinking, I can add an “
enhanced-flash.css” to the page if Flash is installed using the
hasFlashPlayerVersion() method of SWFObject. Or you could add some new styles for when you enable Typekit. The possibilities are endless.
I certainly wouldn’t call this a perfect solution, but it’s served me well over the past few years of using it. Hope it helps you too!