With browser differences being what they are, I still don't think it's realistic to design a large and heavily trafficked website with validating XHTML and 100% true separation of content from display/layout using CSS. If you disagree prove me wrong by showing me just one site with an Alexa traffic rank of 5000 or better ( that has both validating XHTML on all pages and uses CSS for true separation of content from display. If you can find me one example I'll publicly admit that I was wrong!
As we've been porting our site from Perl to Java we've been looking at making our pages validating XHTML and CSS. The main goal for us was to separate content and design ala CSS Zen Garden which is mostly doable, however, getting this to 100% turned out to be a lot more difficult than I'd initially hoped. There are 3 main challenges we faced when we attempted this:
1. To get the pages to a point where we could guarantee that the pages were well-formed XML. We're using Spring MVC and JSP and fortunately JSPX and TAGX files have to be well formed XML, otherwise they don't build. However, that only gets you 95% there because JSPX likes to collapse XML and many browsers don't like <script … /> and insist upon <script …></script>. So you need to introduce a little CDATA here and there and there goes your guarantee of well formed XML.
2. To get the outputting XHTML to validate with a W3C validator. This is much easier said than done and I think to truly achieve this goal, as part of the build-test process, you need to be able to generate the XHTML for each page and have tests fail if it doesn't validate. If it's not part of the continuous integration testing process it's just too easy to slip in some non-valid XHTML.
3. To to use CSS class's and id's for everything so that your XHTML is just the content of the page and then the CSS fills in all of the look and feel. Ugghh… with very different results for CSS between Safara, IE, and Firefox this can eat up a whole lot of time better spent building more pages that serve your customers than being a slave to cross-browser incompatibilities.
We've found given the state of the major browsers in use that we always shoot for 1, 2, and 3 at the beginning of each new page we create but to keep new development moving forward and from getting derailed in XHTML/CSS/browser compatability land we often need to compromise to get a page working well in a reasonable amount of time on all of the browsers we support.
What's your experience been in trying to move to XHTML and CSS?
Update: A coworker sent me the two links about ESPN and ABCNews and their redesign into heavy CSS use. It's good to see sites moving in this direction, I just wish we could use page validation as a tool to tell us whether our pages are valid or not!