You can never run out of things to talk about when it comes to cascading style sheets or CSS, but lately there have been developments that are more than worth your while. CSS3 is slowly but surely becoming mainstream thanks to several browser updates, while the gurus continue to think up smart ways to code those stylesheets.
Update: Ajaxian blogs that WebKit will support CSS variables. Amazing news that has come out just in time with this blog post. I’ve listed it below as well.
Tools and Frameworks
I’m not going to mention every imaginable CSS framework and piece of software out there, but these are worth looking at.
Stylizer: Skybound Software comes out with perhaps one of the most interesting (read: intuitive) CSS editors to date. It helps that it has a free version with a 14-day trial for its Ultimate counterpart.
YAML: Smashing Magazine shows how it is possible to create a flexible layout using Dirk Jesse’s HTML/CSS framework called YAML. The YAML Builder is an excellent plus.
CSS Cacheer: Shaun Inman releases a mini-application for CSS caching.
Best Practices
Here are some great nuggets of advice that will help guide you when writing your own CSS.
Font Stacks: The Unit Interactive blog lists various scenarios in which you should order your CSS font stacks. A PDF file is available for download, too.
Fun With Floating in the Grid: Devlounge recommends several practical CSS classes and layout techniques to achieve hassle-free floats and grids.
Performance Testing: jpsykes reports how the different browsers fare using different CSS selectors and attributes.
Faux Absolute Positioning: A List Apart comes up with a new layout technique that does away with hacks.
Nesting Specifics: DZone goes into the nuances of CSS selector specificity.
CSS3 and Beyond
If you’re still hesitant to use CSS3, you might change your mind now that some of the most popular browsers are slowly incorporating support for it.
Firefox 3: Killian Valkhof and David Baron write about support for several CSS3 features in the latest version of Mozilla Firefox. These include ligatures, kerning, font-size-adjust, inline-block/inline-table, and even text-shadow—coming in Firefox 3.1. The complete list is on Mozilla’s official page.
Opera 9.5: The Opera Developer Community discusses the CSS3 features its own browser supports, namely, @media, text-shadow, opacity, HSL values, overflow-x/overflow-y, :firstof-type, :nthchild, -o-background-size. Not to mention HTML 5 elements and SVG. Don’t forget to check out Opera’s debugging tool, Dragonfly.
Safari 3 has been out for a while now, but it’s Internet Explorer that we’re really waiting for. Unfortunately, IE8 will continue to lag behind.
Qualified Selectors: Shaun Inman proposes a different breed of CSS selectors.
CSS Variables: David Hyatt announces that WebKit now supports CSS variables as documented here.
I wrote in last week’s Friday Focus post at Devlounge that “restraint is more powerful than the lack of it, especially in design”. The restraint I referred to was the strength and beauty of minimalism compared to the everything-but-the-kitchen-sink technique, but there’s more to it.
Freedom vs. constraint
In this interview with Andy Budd, he explains why complete freedom in design is not necessarily a good thing:
I think that design is all about constraints. Some people love the blank canvas situation, but I don’t at all. I think that’s really for artists, not designers. I think design is all about constraints — business constraints, technology constraints. And it’s those constraints that actually create the innovation.
He says that although Flash is a very flexible tool, limitations tend to be more desirable than flexibility when it comes to design because they breed cool new things. In the case of web design, he cites CSS effects and JavaScript libraries as examples.
Total control
I think this validates whatever reluctance I have to choose Flash over plain old HTML and CSS. And I can relate to that awful feeling when starting a design that a client gave you total control over. One-hundred percent control is never a good thing. You end up doing things you weren’t paid to do and designing things that aren’t completely your best work.
I also think it’s very rude of a client to leave it up to you at the beginning only to scold you for not doing “what they wanted” in the end.
More questions
More than constraint, design goes hand-in-hand with purpose. Levels of purpose vary with every design, but there is still purpose. Is it purpose that distinguishes it from art? Can design actually be distinguished, or should it always be invisible? Is design art?
Going there would be a slippery slope downhill. But designers should try to figure out what design is about even if it begs more questions than answers.
This comes as a surprise. Aux of Cogent Metal is vehemently against webpages that have narrow layout widths. And I thought web designers are now more worried about the opposite: the wide layouts that whip out the horizontal scrollbars in resolutions narrower than 1024×768.
This is another proof that you can’t guess every possible reaction to a design pattern. In this case Aux would rather have wide layouts because it would mean a larger area to present content. But what can you do about someone just like Aux, but who believes the complete opposite?
more
According to the latest episode from the Boagworld podcast, “you might be wasting your time designing with CSS” because now that Flash is open source, it’s “going to be everywhere and is the platform we should now be developing on”.
Flash versus CSS? What?
Let’s backtrack a bit. Adobe recently announced the Open Screen Project, which will implement a “consistent runtime environment” for Flash (and AIR) across all platforms. All, as in every medium imaginable: computers, mobile devices, TVs, and everything in between. Adobe working hand in hand with some of the biggest names in media and electronics to make this possible. For a company that’s always created proprietary technologies, moving to an open mindset is a bold move. But this will cement the popularity and innovativeness of Flash.
So how does Flash compete with CSS? We shouldn’t take the Flash vs. CSS part literally. It should be more like Flash vs. HTML and CSS. Or HTML and CSS and JavaScript. Wait, what about AJAX? And Silverlight?
See how silly this bout has become? All these web technologies are not direct competitors. (Except for Silverlight, perhaps, but I’m not even sure if it still stands a chance.)
But there’s a very real question being posed here. Should HTML/CSS coders move on to what seems to be the greener pasture that is Flash?
I firmly believe that not every website in the world has to be done in Flash for it to be jaw-droppingly awesome. There will be Flash developers who believe exactly the opposite. There will be hybrid web designers who can straddle between both and don’t really feel the pressure. Any of the three will prevail in the future, but from the looks of it right now, there’s still a place for plain old HTML and CSS no matter how big Flash has become.
Besides, both camps are still considerably immature. The web in general is, actually. It’s just that with all the effort spent into creating websites and the money that can be made from them, web technologies seem complete already. But they are just as dynamic and unpredictable as the web itself.
