HTML & CSS
Article
By Alex Walker

DOM Layout Effects

By Alex Walker

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

--ADVERTISEMENT--

Although it’s natural to think of JavaScript as a tool for designing site interaction and behavior, don’t underestimate it’s ability to bridge the presentation gaps that CSS can’t.

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

I think the visual effect has potential and can think of lots of variations on the theme, but the accessibility issues kills it in it’s current from. Unfortunately most screen-readers use IE’s engine to interpret each page, meaning they understand JavaScript as fluently as IE does. That’s a problem as it means they’ll recite the heading text three times. Bother.

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?

Recommended
Sponsors
The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account