Slashdot Validates?
Today, A List Apart posted a great article about changing the very popular Slashdot.org from non-compliant HTML 3.2 to fully standards compliant XHTML and CSS. It’s funny that they did that, as I have been tooling around with doing the exact same thing. The major difference being that they took a “deconstructivist” approach, whereas I took a modular one. Seeing as their version works, and mine is still in the tinkering stage, I will consider changing the way I go about re-designing existing sites for clients.
The deconstructivist approach is rather simple. Take the existing site, delete all the non-content code. Take the remaining code and divide it into structural (aka semantic) divisions. Once the structural markup is complete, add a CSS page for layout. After the layout looks good, add a second CSS to modify the text and graphical widgets.
Using two CSS files may seem like a bad idea at first, but when you think about it, it makes perfect sense. Keeping structural CSS separate from text/widget CSS prevents a site maintainer from accidentally overwriting structural CSS rules when changing a font, or deleting a background image. The way Daniel M. Frommelt presented the CSS had an interesting side-effect. Using the @import directive allows modern browsers to render the structural CSS that would cause older browsers to choke. As older browsers don’t understand @import, the directive is ignored and the browser renders without the structural CSS. The second CSS file, used for text and widgets is understood by all CSS compliant browsers. This allows modern, older and alternative browsers to see the text in the style that the authors had in mind. This approach is much better than sending content completely devoid of style.
The homepage is only the beginning. The tough bit is the article page with the user comments. While this is tricky, it isn’t earth shatteringly difficult. There are three ways to view the comments on the page: flat, where the comments are not hierarchical; nested, where child comments are indented under their parent; threaded, where only the parent comment is displayed, and child comments are displayed as links. There is also an option to view the article without comments.
The easy way to display the comments is to have each comment encapsulated in a <div class="comment">. Flat comments would be generated serially, while nested comments would be nested divs. In the CSS, you could use child selectors to create the indented behaviour required for the nested mode. In very long threads, a “mega child” selector could be used to prevent comments from being only an inch wide.
Now the truly difficult part is getting Slashdot to accept the template changes into their Slashcode.