[development] Drupal 5.0 Theme - v2
Morbus Iff
morbus at disobey.com
Thu Sep 28 23:09:39 UTC 2006
> what's going on. (I'd never heard that multiple
> nested divs interfere with accessibility.)
You simplify it greatly. The intent of CSS is to separate the
presentation of a document with its structure. No longer, for example,
do we have:
<p><font size="+2"><b><u>Yes!</u></b></font></p>
Of the above, only one thing is truly important in regards to the
document structure: that it is a paragraph. In a CSS world, the
structure of the document is merely:
<p>Yes!</p>
Likewise, in a pre-CSS world, spacing was often handled via spacer gifs
or <br>, or even the evil <p></p><p></p><p></p>. From the document
structure (technically called the Document Object Model), what we've
done while we don't with our whitespace is add three paragraphs with no
value. A paragraph without words is not a paragraph.
In a CSS world:
<p></p><p></p><p></p><p>Right, s o anyways...</p>
Becomes:
<p class="section">Right, so anyways...</p>
.section { margin-top: 40px; }
Now, in a CSS world, there is absolutely nothing wrong with:
<div class="part">
<div class="preamble"></div>
<div class="contents"></div>
<div class="introduction"></div>
<div class="chapter" id="chapter_1">
<div class="section"></div>
</div>
</div>
This is (relatively, for a quick example) strong document structure:
each div has a meaning, and has been given a CSS class that represents
its presentation. From the DOM standpoint, it is easy for us to, say,
style just chapter, just the first chapter, just the section of chapter
one, or what have you. With XSLT or an XML capable browser, we can query
the model to "give us all chapters" or "give us all contents". From a
jQuery standpoint, we can do the same thing. This is a strong DOM.
Rounded corners, when implemented as CSS, traditionally pollute this
DOM, in much the same way that all the empty paragraphs above did. For
instance, I used the CSS rounded corners on Gamegrene.com, a site
redesigned years ago. My divs for these corners are:
<div id="banner_top"><div><div> ... </div></div></div>
These extra, unnamed divs, serve only to satisfy background images (the
rounded corners) applied to them. They have no "purpose" in the document
structure, because they are not structure - they are merely widgets so
that CSS can apply some presentation to them. They are presentation
logic, mucking up my document structure. Much like the empty paragraphs
above serve only to add whitespace, these nested divs serve only to add
rounded corners. They are a modern day spacer.gif.
And *that* is why I -1 to rounded edges, unless they are applied via
jQuery, which does NOT mess with the DOM in a way that negatively
affects my document (the modifications are applied by the client
software, at user request, NOT hardcoded into the document itself).
--
Morbus Iff ( they should rename controlled chaos to morbus droppings )
Technical: http://www.oreillynet.com/pub/au/779
Culture: http://www.disobey.com/ and http://www.gamegrene.com/
icq: 2927491 / aim: akaMorbus / yahoo: morbus_iff / jabber.org: morbus
More information about the development
mailing list