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

Comment removed

[account_deleted]

Comment removed based on user account deletion

Simple answer

[kennygraham]

What's next?

XHTML2 [w3.org] and CSS3 [w3.org]

But XHTML2 can't be a reality until IE can parse XHTML, or IE loses a lot more market share. (no, it can't, it can parse pretend XHTML that's served as text/html, and you can't serve XHTML 1.1 or XHTML2 as text)

Re:I'm sure the naysayers will be here shortly

[Anonymous Coward]

http://www.alistapart.com/articles/holygrail [alistapart.com]

Re:I'm sure the naysayers will be here shortly

[RzUpAnmsCwrds]

. CSS Zen Garden [csszengarden.com] should stand as solid proof that CSS works

No, it doesn't. Seeing as web programming is my job, I can tell yout that tables - horrible as they may be - make a better layout tool than CSS. I can't tell you how many times I have to tell graphic designers that one of the elements of their design (like equal length columns) is a major pain in the neck to implement in CSS. Of course, IE's horribly buggy CSS2 support doesn't help, but there are so many things in CSS that seem - well - stupid. CSS was designed around an idealistic view of the web - a web where pages were designed by web developers. In the real world, this is rarely the case - it is the graphic designers who lay out the page, and the web programmers get stuck trying to implement their design. CSS utterly fails in that regard.

Sure, you can make a design that works well using CSS - zen garden and countless other sites prove this. But there are so many things that were simple with tables that become unnecessarily complex with CSS.

Most developers simply give up and resort to absolute positioning or nesting

tags. Neither is substantially better than the tables that they replaced - and in many cases, they are substantially worse.

There are other elements of CSS that are utterly stupid. Why should padding be excluded from "width"? Or, for that matter, the border? Why is it so hard to make equal-height columns?

Is CSS better than what it replaced? In terms of element style - borders, fonts, colors, etc. - it's substantially better. But CSS sucks at layout.

Re:rounded corners

[codered82]

Check out Nifty Corners [www.html.it]. Best I've seen.

Re:2 to 3 more years of the same, then a shift

[bertilow]

XHTML finally got rid of HTML's quirky syntax and bad semantics.

What semantic changes happend between HTML 4.01 and XHTML 1.0?

I don't think there was one single such change.

Re:IE digs, Firefox, and Safari

[Anonymous Coward]

You're using Safari as your benchmark? Passing the ACID2 test is irrelevant unless you happen to be trying to use the features the ACID2 test actually tests for, which you shouldn't. You shouldn't because only three or four of the less popular browsers pass it, while the biggest two (IE and Firefox) don't even come close. The ACID2 test was designed as a test suite for a load of CSS features that would be useful, but no browser on the planet had implemented correctly. It is not a test suite for the whole of CSS, and misses all kinds of stuff that you'd actually use on a real website.

I think you'll find that Firefox tends to be far closer to the standards than either Internet Explorer or Safari. The two browsers I use as a benchmark are Firefox and Opera. If it doesn't work in either of those, it usually means that it's either an edge case that won't work on most browsers anyway, or my understanding of the standard is wrong.

And those bugs you linked to are six years old. Mozilla is not IE, you know - there has been massive progress over the past 6 years.

Re:Why CSS xor Tables?

[CastrTroy]

The problem with using tables is that when you make dynamic web pages, using PHP/JSP/ASP/?, that your code has to figure out how to display the content. If you use CSS, you can write the code once, and just have it output the content in a bunch of div tags. Then when you want to change how your site looks, you don't have to go through all your code changing things around. Just change the CSS that says how the content is to be displayed. Tables save time if you are never going to change your design. However, CSS saves time even if you have to change your design once.

Re:2 to 3 more years of the same, then a shift

[suv4x4]

HTML has been deprecated for six years. XHTML finally got rid of HTML's quirky syntax and bad semantics.

That's funny. Because XHTML is a carbon copy of HTML 4.01 as a dialect of XML. All that got "cleaner" is that XHTML uses a subset of SGML (XML), where HTML is a SGML dialect.

The semantics of both are totally the same. You've been brainwashed.

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.

W3C says "do as I say". They can't even implement what they recommend properly. They tried, with Amaya, and the project is now dead (not to mention it was always one buggy and slow piece of software).

WHATWG catters to the needs of the web developers and web users TODAY. They are formed by browser makers and web developers who have feet firmly planted on the ground as to what constitutes a semantic and functional web we can actually use.

W3C unwillingness to cooperate brought us the table hacks, and now the CSS hacks. We, web devs, always have to use "hacks" of some sort, not just because of bad browser implementation, but because if plain defunctional standards..

Then come zealots who claim W3C can't be wrong, refuse to join a discussion and declare WHATWG is a bunch of terrorists who want to blow up the internet.

Good thing is, while zealots are pretty vocal, the rest of the practical folks are quietly working on making a better Internet with WHAWG.

The canvas element and SVG bring new ways of displaying graphical stuff to be interacted with

The canvas element was invented by Safari and incorporated in WHATWG's HTML5. I though they work hard on wrecking the Internet?

the table layout trolls and Dreamweaver monkeys will be two tech generations behind

The current generation of Dreamweaver produces strict XHTML with CSS based layouts. I bet ranting at fukll power didn't leave you time to see how the world around you adapts to changes.

Re:I'm sure the naysayers will be here shortly

[Mouse42]

Doing your first site in 100% css is HARD. There is just no other way around it. You are going to spend days trying to figure even the most simple things out, and there are going to be temptations to revert back to the easy (not better) table layout. Some will succumb, and some will soldier on and succeed.

Ohhh yeah. It took me two months to figure out my first 100% CSS website [charleshagenah.com] (it's kinda wonky in anything other than IE... bare with me, it's one of my first). I had so many restrictions: must fit vertically and horizontally on the page, must look the same in the AOL browser on 640x480 and in IE on 1600x900, and most importantly no scrolling.

But after I did that, I knew CSS pretty well, and today I know it backwards and forwards. In fact, I can design the vast majority of my sites without any browser hacks (although... I do get lazy sometimes and throw in a hack), so I don't know what those nay sayers are talking about with needing hacks all the time.

Anyone who is serious about anything will invest the time that is nessisary to learn the new techniques that inevitably come along. If you don't have time to do it on the job, then take some time to do it on your own time. Take an hour a day to challenge yourself to reproduce a CSS layout - after struggling through that, you'll learn more and be able to apply it to your job.

Re:CSS help

[Tteddo]

IE treats width as min-width, so your width entries are treated as a "suggestion" by IE.
Here's a great article that explains all the width quirks and ways to fix it:
http://www.communitymx.com/content/article.cfm?pag e=1&cid=CC96C [communitymx.com]

Re:I'm trapped in /.'s CSS theme & I can't get

[Da Stylin' Rastan]

Do it yourself then. I'm not huge about the new redesign, but I was about one of the contestants, so I simply use the Stylish plugin to apply that stylesheet to the page. That's what User CSS is for. Stop bitching and fix it yourself :)