XML Meet CSS

February 10, 2009

XML+CSS, the Future of Web Design?

In a previous post, I point out that microformats bring an additional layer of useful information to a document, which I dubbed semantic structure. In short, HTML tags provide useful type information about the data they contain. A good example of this has been the insistent push to use divs rather than tables for page layout. The reason is that tables describe a semantic structure, a table of data, and not layout. I for one have found this a frustrating haggle in the design of my pages. Time and time again I have been stymied by unwieldy divs. Tables are much easier to use, despite additional verbosity. But I have stuck to divs because it is “the right thing to do”. Thankfully my saving grace will soon be here. The 3rd revision the CSS standard supports a new display style. With it, one can specify that a div is to behave like a table, table row or table cell. Woohoo! Three cheers for tabley divs!!

This display style led me to think about semantic structure again. If we can designate that a div is a table structure via CSS, then why not any structure? And if divs, why not any tag? If we were able to do that, then semantic structure could be specified solely through CSS. And our HTML pages could go from rather simple, repetitive occurrences of div to … can you guess?… pure XML.

Let’s got through it step by step. Here some HTML [gist id=61726]:

    <table class="ages">
      <tr class="person"><td class="name">John</td><td class="age">24</td></tr>
      <tr class="person"><td class="name">Dean</td><td class="age">30</td></tr>
    </table>

Now with CSS 3 [gist id=61729]:

    <div class="ages">
      <div class="person"><div class="name">John</div><div class="age">24</div></div>
      <div class="person"><div class="name">Dean</div><div class="age">30</div></div>
    </div>

      .ages { display: table; }
    .person { display: table-row; }
      .name { display: table-cell; }
       .age { display: table-cell; }

Of course no one would recommend doing this to something that really is a table of data. But bare with me, because now we are coming full circle [gist id=61730]:

    <ages>
      <person><name>John</name><age>24</age></person>
      <person><name>Dean</name><age>30</age></person>
    </ages>

      ages { display: table; }
    person { display: table-row; }
      name { display: table-cell; }
       age { display: table-cell; }

I think this is a rather remarkable outcome. And you might be surprised to learn that Firefox handles it just fine. What we have achieved is an ultra-clean separation between the data and it’s semantic meaning, via XML, and it’s semantic structure, via CSS. If this approach were embraced by the XHTML and CSS standards bodies, I would not be surprised to see it revolutionize web design.

title : XML. meet CSS author : trans categories : [ruby] date : 2009-02-10 layout : post

← All posts