Slashdot Mirror
A New Era in CSS Centric Design?
byrnereese wonders: "The media never fails to point out how the age of Web Two-Point-Oh has helped to drive the adoption of Ajax into the Internet industry, but rarely does anyone point out that it has also help popularize CSS-centric design practices -- the Slashdot redesign being only one example. But now that we, as programmers, feel comfortable ditching the use of font tags, finally grok div's, understand absolute vs relative positioning, and can work around all of IE's CSS bugs, what is the next step for HTML and CSS? Several standards or conventions seem to be coming to forefront: one is building standards around the HTML structure itself so that wildly different designs can be achieved via style-sheets alone (e.g. CSS Zen Garden and The Style Contest), the other being the standardization of CSS classes (e.g. micro-formats) so that semantic meaning can be derived from the class name we use to label our content. Both show an interesting potential for how this technology is evolving. So here is the question for all the visionaries out there: where is this taking us? What's next for HTML? What's next for CSS?"
First, let's get a couple things straight:
What's next won't even be achieveable for two to three years. The other browsers will continue to implement standards as they are drafted while IE continues to struggle with catching up to 1998, much less 2006. This involves several elements:
CSS3: This is the next generation style and layout methodology. Even though some properties will behave vastly differently from their 2.0/2.1 versions, the vast amount of new properties will entice designers with the possibility to do more (gradients, shadows, masks, text rotation, and more). Because, as Daniel Glazman blogged months ago, CSS has no verioning mechainsm, designers will be able to pick and choose what they want to use.
XHTML2: This is the next generation for web page markup itself (the canvas to the paint of CSS). Further steps towards semantic bliss include semantically-relavant tag attributes, more versatile workhorse attributes (add href and src onto any tag), and a more streamlined namespace.
XHTML2 has some competition, however, in the form of HTML5. While I can understand frustration at the glacial speed of the W3C at producing new documents, WHATWG seeks to damage most of the progress made since HTML 4.01. Apparently "tag soup" becomes an option again, which means few people will bother to write valid, correct pages (a key element for machine readable content to work).
The canvas element and SVG bring new ways of displaying graphical stuff to be interacted with. XForms will finally allow data input to happen in a non-archaic way.
And when this all happens, the table layout trolls and Dreamweaver monkeys will be two tech generations behind. More work for those of us who have real skill.
Both parent and grandparent posts make good points. I used to do tables only, but finally got handed the Zen of CSS Design book by a designer and decided it was time to learn. I'm a programmer, not a design guy. I was really impressed with how much could be done with CSS, but like the parent says, CSS sucks at layout. I like the fact that it seperates the content from the style. However, after spending a couple days trying to get a couple pages laid out purely using div tags and CSS, I ended up using a couple tables to get things the way I wanted them. It kinda felt like I was cheating after looking at all the cool stuff people were able to do with Zen Garden, but is it really cheating to mix tables and CSS? No. Use the best tool(s) for the job and your life becomes much easier.
One more problem. I often encounter websites that use CSS where tables would produce about the same results, and with CSS the site runs like a snail. It downloads faster, less markup overhead etc, but if I open 5 pages at once (my habit, see a list of links, middle-click them all to load in tabs, continue reading), Firefox freezes for, like, 30 seconds to render them. MSIE does even worse.
CSS is awfully computationally heavy. Full CSS support would be a hell for handhelds and such. It defines how things should look like, but not what the browser is to do to make them look like that. Computers hate this kind of approach - you demand results but you don't tell how to achieve them. SQL thanks to limited reach, works. Prolog failed a big time. AI is to appear "in 5 years" for last 50 years. And now you tell the computer a set of sometimes contradictory rules and "place this stuff any way you want, not violating these rules".
Writing a full HTML-only, CSS-Free browser for a handheld, one that can render tables and all HTML elements properly but ignores CSS is easier than writing one that reasonably follows the specs of CSS beyond the simple "@mobile" style. CSS pretty much closed doors to fully-featured webbrowsers on handhelds. They will be stuck with crude "@mobile" stylesheets for a long, long time yet, because "@screen" became too complex.
Lock the handicapped in a ghetto, because this way you'll have it easier to provide them with all they need. Don't let them out, because there's a dangerous, handicapped-unfriendly world out there.
Anagram("United States of America") == "Dine out, taste a Mac, fries"
The other effect of proper Divs are AJAX related. That's what allows scripts like Greasemonkey and all the Google Maps mods to work... A page written by somebody else can cherry pick interesting data by Div tags rather than formating. Also, look at print preview for a different CSS applied to the same HTML to make a neatly printed page rather than the usual chopped up junk you get when trying to print Table/Frame based pages that waste paper for headers, or chop off the meaningful parts of the page because the decorations make a mess.
From actual experience of a web site I am currently designing, I must disagree. The old site used tables for layout and no font tags. The current site was redone with the same visible content, the same visual placements, and css for layout. The size drop for each html file was at least fifty percent. This is a huge reduction for the entire site. This is not an unusual situation either. ESPN.com made the shift from table layouts to css and the result was calculated to be near a savings of 730 terabytes per year. I think you will agree that a savings of approximately three quarters of a petabyte is a significant amount. As an early table layout designer I have found that the shift to css has drastically made things easier and many more things possible. Sure, it was hard at first until I had a good grasp of how to use css, but once I could look at a page and begin to know the css properties needed it became very efficient in both time and space.
I think people see absolute positioning as the evil, when it's really not.
It's mainly evil if you use it to place the main layout blocks, but once you enter into those blocks it's often very useful to place sub elements by using absolute inside the parent element positionning (i mean by using #layoutblock { position: relative } #layoutblock #logo {position: absolute; top: 0.5em (or maybe even px); left: 0} )
What i mean is that maybe it should not only be seen as the last resort, but also as something which can help your designs to scale the right way. Sometimes you can do without, and it scales, but it would scale more nicely if absolute positioning was used in some key parts of the design. Some designers refuse to see that, because they burned themselves with absolute positioning at first when learning CSS, and kinda fear it because of the consequences it can have when used at the page layout level.
I think it would make things so much simpler for everybody, especially if they used firefox or another free (freedom) browser as a base. Maybe it would force others to fill the gaps.
In fact in my perfect world they'd just code a friggin good xhtml/css engine, make binding for x languages, and provide it for free to every browser maker or whatever... Seriously, I know it won't happen, but it would be such a step forward for the web in general.
Choice is good, competition is good, but not in this particular area. You'd still be able to chose between a lot a browser, but their rendering would be consistent.