DOM Layout Effects
For most of the past two years the CSS spec has been dissected, twisted, stretched and hammered. Although CSS probably still has a trick or two up it’s sleeve, I think it’s relatively safe to assume that if something hasn’t been accomplished with pure CSS yet, it probably can’t.
Of course, Stu Nicholls will inevitably prove you wrong there, but lets pretend he doesn’t exist for now.
So what are your options for now?
1- Forget it and wait for CSS3 to be widely adopted.
2- Use the DOM to bridge the gaps in CSS2
Alessandro Fulciniti has a demonstrated a nifty example here. Like Simon’s rounded corners article from last year, this method takes clean HTML and ‘retro-fits’ the corners into the markup via the browser. The twist in Alessandro’s script is he doesn’t use images at all.
As you can see from this ‘zoomed-n-bordered’ view, he’s using stacked, tapering block elements (bold tags actually) to create the corner profile. If the script doesn’t run, the design renders quite effectively minus the soft corners. The script is also nicely modular, allowing you to add your corners to any new page element with a single line.
The thing I like about these kinds of bridging techniques is that in two years, when IE8.5, Firefox 3.4 and Safari 3.1 all do CSS3 in their sleep (ok, call me the supreme optimist), we can update the CSS and simply prune the function from the script. It’s like it never existed.
Methods like this may not be the right fit for every circumstance, but if your alternative is littering your content with implied structures and other junk DIVs to accomplish a layout goal, it’s well worth considering.
Following a similar theme, I published some thoughts on a recent DOM text effects experiment in the most recent Design View.
Read the full text for the nitty-gritty, but the executive summary:
- Use the DOM to grab all standard headers on the page (in this case h1s)
- Produce two more copies of each heading
- Nest these new headings inside the original headings
- Use decendant selectors and absolute positioning in CSS to get the shadow effect
AFAIK, there’s no way to tell the difference between a screen-reader using IE and IE on it’s lonesome. I’ve considered detecting IE and using the IE-only shadow filter there instead. I think thata would work, but I’d lose the consistent look across browsers.
Any other ideas on this one?