Further to my earlier entry about Slashdot’s CSS conversion showing that standards based design is making real world in-roads, Simon Willison is trying to address the question of maintainable CSS.
As a web developer on large web projects, I am concerned about the maintainability of the C# code we write. But the same standards need to be applied to CSS. With hundreds, if not thousands of styling rules applying to a large site, it’s extremely hard to dive into a new CSS layout and understand what’s going on.
Digital Web tries to address the fact that CSS isn’t something that can be hacked together anymore – it has to be architected. But while there are a couple of techniques kicking around to help navigate and arrange your stylesheets, I really think that Simon is correct in trying to bring this issue to the fore. For real enterprise-level acceptance, we need enterprise-level techniques to allow multiple developers to create high quality CSS files.
Slashdot’s transition to an HTML 4.01 / CSS layout went so smoothly that I didn’t even notice until I spotted the story about it. It’s amazing to see how a legacy layout such as this can be recreated with CSS, and it’s good to see that it’s mostly valid.
Standards based web-design is in, and not before time.
I’ve seen a couple of these scripts around (notably Simon WIllison’s version) but knowing the quality of work Dean Edwards has produced, I’ll give this a shot. It’s a javascript function which lets you select elements using CSS selectors. It’ll return a javascript array of matching elements.
I’ve been using this technique lately to get elements which don’t have a known ID until they’ve been processed by server side code.
Even after reading the comments on the blog post, I couldn’t believe that the article would be this bad.
Microsoft tell us how to do rounded corners using CSS in the current version of IE. But there are loads of better implementations using clean semantic mark up.
Seriously. MSDN has good, modern articles on a wide range of topics. Why can’t they get with the web zeitgeist?
There’s a good discussion going on in this comments thread about whether to use CSS or tables to markup an input form.
It all started because Gerv wasn’t sure how it could be achieved in CSS. Quite a few people referred to this Quirksmode article; others just posted the solution inline. Then Glazman comes in saying that tables are the way to go and it all kicks off… in a good way.
Inspired by Mr. Bowman and Mr. Oxton, I’ve started organising my CSS in a slightly more sensible manner. I now label sections as Doug does, and at the top of the file just have:
/*
HEADER:
=Tagline
=Navigation
=Header
etc, etc
*/
By selecting “=Header” and hitting CTRL F3 in Editplus I skip to the right set of rules. It’s like a contents page for my CSS!
Looks like Slashdot actually will be moving to a CSS design. It was mentioned a while back, and I even looked at the Slashcode templating engine to try and help out, but it’s a nightmare. I’m glad they’re finally doing it; I hope that they can roll some sort of HTML compliance in there as well.
Inject tables via javascript? Well it’s true to the letter, but certainly not the spirit. Sounds like the last gasp of someone refusing to accept that tables are a dying layout method. CSS design is not the same as table design. It’s not just a different way of making the same layouts, it’s a totally different way of thinking. Chances are that if you can’t do your layout using CSS, you either don’t know what you’re doing, or your trying to implement something that probably shouldn’t be implemented in the first place.
This is a fantastic article, and here’s the best line:
Pseudo-classes like :focus and :hover are basically event handlers… event handlers with really patchy browser support.
I’ve never though of :hover in that way before, but it is absolutely true. Javascript is an excellent, usable langauge – we can use it to facilitate the experience of the majority user.
This new IR technique is a bit long winded for my tastes, but apparently it works under all circumstances – images off/on, css off/on, etc. Have a look at half a page of CSS for one header image!