[Javascript] CSS vs. JS: The content property

[Ryan Cannon]

For as much as I respect him, after reading some of PPK's Tough Quizzes 
at the QuirksBlog[1] I've really begun to disagree with the his stance 
on the content property[2], for a number of reasons, and I'm wondering 
what others think.

    [1] http://www.quirksmode.org/blog/
    [2] http://www.quirksmode.org/index.html?/css/clearing.html

I see a few reasons why:

1) Media-specific style sheets. Aural stylesheets would be impossible 
without :before, :after and the content property. This is mostly a 
theoretical argument, as only Opera 8 supports aural stylesheets, and I 
haven't been able to test how well. But the code:

@media aural {
    a[href]:before { content: "link: " }
    acronym[title]:before,
    abbr[title]:before { content: attr(title) " or "; speak:normal }
    acronym, abbr { speak: spell-out }
}

Is essential for a meaningful use of the aural medium.

2) Graphical replacement of text.

CSS-on, Images-off, Javascript-off is a nightmare for 
accessibility-minded designers. The emerging CSS 3 method looks like a 
promising solution:

@media screen { h1 { content: url("h1.png") } }

or, better, with XHTML 2:

@media screen { h[src] { content: attr(src) } }

Both of these options assume that a designer is using text images to 
replace content. It does have the potential to be misused, but so does a 
lot of design technologies.

And finally,

3) Non-structural, non-behavioral graphical enhancements

A common argument against the content property stems from its altering 
the document structure. PPK says Javascript should do this instead, but 
I wonder about this. If we are truly separating presentation, structure 
and behavior into three-legged stool, is CSS really a hammer for screws 
when it comes to visual cues?

Think of it this way: on my website, I want viewers to know that a link 
in the text of my blog is to an external site--a small icon, nothing 
that needs to show up in the document structure, because it is 
inappropriate in some media (print, for example).

I could write a DOM javascript to insert an image after every link with 
http in its href attribute, or I could use CSS. I contend that this is 
presentation, not behavior, and therefore use:

a[href^="http://"] { content:url("external.png") }

Of course some browsers miss out on this, but it's a minor detail and 
I'm not too concerned.

Of course I'm not against using Javascript for behavioral elements, such 
as dynamic tables etc, I'm just trying to sort out which issues are 
nails and which are screws. What do you think?

--

Ryan Cannon
Instructional Technology
Web Design
http://RyanCannon.com