Click to see

Home Tutorials CSS Links JavaScript Links Sitepoint
Keep an Open Eye ThePhotoFinishes Takethe5th PixofCanada Pix of Toronto Bookraft

theOpenSourcery

The Sidebar:
CSS is Styling
CSS- Cascading Style Sheets has been designed to be the Web's styling language. And because of its clean, simple syntax it has generally served that purpose well. But back in the days of emerging Web standards CSS had to fight for its life against HTML which used a number of tags like <font>, <b>, <u>, <sub>, <sup>, <big>, and many others to do Web page styling. The problem of using HTML for styling was twofold - 1)HTML styling commands began to swell the size of .html page files and 2)making changes to styling soon become a nightmare as dozens of tags and dozens of files had to be changed just to change a font style site-wide or size or replace underlines with bolding.
But now there is a move underway to have CSS impinge on HTML's domain - web page structuring and layout. Inexplicably, CSS experts are appropriating more Web page layout and structuring tasks onto CSS, even when that leads to harder to debug and maintain Web code. This is what this posting is about - let CSS be about styling and not as this book recommends, infringing into HTML's layout and structuring task set..

Everything You Know About About CSS Is Wrong, by Rachel Andrews and Kevin Yank, Sitepoint 2008

Sitepoint is an Australian based printing house that has put out some excellent books covering a wide range of Web page development topics. Many champion state of the art methods and technology. But in this book, Everything You Know About About CSS Is Wrong, SitePoint's editors have gone a little too far wrong themselves into the Web outback. The book advances the use of CSS well outside its styling domain and onto the layout and structuring territory that is really the privy of HTML. Ironically, it is almost the reverse of the battle that was fought among Web standard's advocates about a decade ago when CSS was trying to gain traction in the Web world. At that time HTML was the villain, bristling with over a dozen tags that really duplicated CSS functionality - think of the <font>, <strike>, <abbr>, <big>, and other style-oriented HTML tags that, after deprecation and the rise of CSS, have slowly but surely faded out of most HTML code.

The Argument

With a title like "Everything You Know About..." I had expected a ground breaking debate about the use of CSS. What is the role of CSS in the new world of Web 2 where JavaScript Frameworks have taken over 4 tasks:
1)Structuring and layout of web pages - just look at tab, accordion, panel groups, tree outline and scroller widgets among many others;
2)Styling + look and feel tasks - again look at what say Mootools or jQuery or Dojo routines among the many excellent JavaScript frameworks do for styling Web pages;
3)Bridging the gaps in HTML, CSS and DOM implementations among the browsers. Really this is primarily a fixup for the most errant of browsers - Microsoft's IE. Internet Explorer trails all other browsers by a wide margin in adherence to HTML, CSS, DOM, and JavaScript standards [this includes proprietary extensions as well as omissions]. Fortunately dozens of AJAX frameworks patch over those differences so Web developers don't have to do many of the arduous and repetitive hack fixes.
4)Providing dynamic and animation behaviors to Web pages that provide GUI sophistication and interfaces equal to if not better than desktop GUI. In fact touchscreen and gesture operations were pioneereed in the Web interfaces of Opera and Mozilla.
At the very least, I had expected this book to comment about the debate on the emergence of HTML 5 and CSS3 where the both standards appear to cross each others' boundaries on audio and video and other media enablement. So the authors would take a look at the once solid but now wavering distinction of HTML=Web page layout/structuring and CSS=Web page styling and formating Well, as it turns out, that is not exactly what happened in the book.

Rather, all 116 pages of the book are devoted to the single topic of how the HTML's <table> and associated tags [truly a Web page structuring/layout task if there is one], can [and should] be replaced by CSS's display:table, display:table-row, display:table-cell and half dozen other options that precisely duplicate the functionality of the HTML <table> tag. Halleluyah for duplication and redundancy. And all of this CSS reduplication, we are told in breathless prose, has been made possible by the fact that Microsoft's IE8 added compliance for the CSS display:table options [while leaving total compliance with the CSS standard the worst among the major browsers by a wide margin].

Now let there be no doubt that there is little to choose between the two methods if layout of tables is your main goal. I find the colspan and rowspan options a lttle easier to use in the HTML <table>s. But the CSS syntax effectively duplicates the full table tag set: table-caption=<caption>, table-row-group =<tbody>, table-header-group =<thead>, table-footer-group =<tfoot>, table-column-group =<table> among others. So for basic table layout chores CSS is a little more verbose, but the two methods are nearly equivalent in layout. And the demo exercise below demonstrates this:

Example of HTML Table
This table is laid out using a <table> tag as seen to the immediate right


Example of CSS Table
This table is laid out using a CSS Table
as seen to the immediate right


Results and Preferences

The two examples above demonstrate that tables can be delivered by using HTML or CSS tables. I have deliberately avoided making the tables look identically the same but rather used the minimal HTML and CSS Table markup to illustrate the fact that there are distinct differences in the default layout and styling of the two methods. If converting from HTML table tags to use of CSS tables, but desiring some of the classic HTML table look and feel, developers will have to add more to their CSS Tables styles.

But the JavaScript also shows how much DHTML has taken over Web page development. Many pages get major structural/layout and styling makeovers by means of Web 2.0 JavaScript frameworks like Dojo, Extjs, or jQuery among the many available. The final page's structure plus look and feel is not done until the JavaScript lady has sung. Even more important, major dynamic changes to a Web page design and styling can be done dynamically on the fly much like Adobe Flash sites. So in a Web 2.0 JavaScrpt world, I want less duplication and redundancy among standards like CSS, HTML, XHTML, XML, JSON, SVG, JavaScript, DOM, etc. - and more of each standard sticking to their own knitting - HTML/XHTML for basic layout and structuring, CSS for styling, XML/JSON for data representation, etc.

Finally, I have two added pesky preferences. First, I like the fact that all of the markup for a HTML table can reside within the table. This makes debugging table problems more approachable than CSS tables where one has to find where the tables styling markup is - in the <style> section at the head of the Web page or off on one of many possible linked .css files. Second, I Like the HTML <table> and associated tags precisely because they stand out among all the <div>s in many Web 2.0 files. Using <table> as a marker I can find unbalanced closing </div> tags much more easily. Seems I am not alone, Ian Hickson and the W3C HTML5 working group have added meaningful names to new HTML tags like <header>, <footer>, and others which take over from heavily nested <div>s.

Summary

Everything You Know About About CSS Is Wrong is a disppointing book for 3 reasons. First, it appears to be announcing a major breakthrough in CSS processing - and then delivers a redundant method for doing tables which has marginal value over the traditional HTML table tags. Second, at $30US for 116 pages I can certainly recommend Mike McGrath's CSS in Easy Steps for $15US as a better, info packed 196 page bargain. Third, I am tired of all the CSS guru's stridency over what belongs to CSS versus HTML. I would much rather see the authors and their group of CSS Superstars spending more time and effort on a)getting Microsoft to deliver on full Web standards compliance [perhaps full CSS 2.x, SVG, E4x and deprecation of Redmonds proprietary JavaScript and DOM extensions would be a good starting point] and b)getting all the browser vendors to deliver ASAP on the new HTML 5 and CSS3 standards.