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

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to