[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:


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>


   <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>

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