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

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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.lowter.com charmedlover

    DOM seems to allow for some new advancments. I’m going to experiment around with this rounded corners technique, it’s very clever. Never would have thought about it myself.

    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

    And you forgot Opera 10.54 :)

  • http://www.sitepoint.com AlexW

    And you forgot Opera 10.54 :)

    hehehe,.. I knew you’d pick that up!

  • http://www.lowter.com charmedlover

    Lol :D I never forget the best browser.

    I’m seeing many more used for JavaScript. I learned it long ago when I didn’t know a thing about CSS or standards. When I began to learn more about CSS and such I just dumped JavaScript. I think it’s time to start using it more often with DOM for these neat effects.

  • chilijoe

    Very Nice.

    PS. What’s his beef with Lorem Ipsum? :)

  • Anonymous

    I’m seeing many more used for JavaScript. I learned it long ago when I didn’t know a thing about CSS or standards. When I began to learn more about CSS and such I just dumped JavaScript. I think it’s time to start using it more often with DOM for these neat effects.
    layout
    layouts – homepagevorlagen, templates