Moving forward with CSS

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.

What’s on your Web Typography wishlist? The W3C is asking

Beautiful, practical, flexible typography on the Web is practically non-existent and still remains a web designer’s dream. We’ve drawn a few steps closer through Flash- and CSS-based inline replacement techniques but at the price of accessibility and elegant code. Fortunately a member of the W3C’s CSS Work Group, Jason Teague, volunteered to be the primary advocate for the CSS3 typography modules. And he’s asking for our input.

These are the typography modules for CSS3:

CSS Fonts Level 3

…contains the properties to select fonts, as well as properties for font “adjustments”, such as emboss and outline effects, kerning, and smoothing/anti-aliasing. Font selection is identical to the similar section in CSS2. The font adjustment properties are new to CSS3.

CSS Web Fonts Level 3

…provides syntax for describing fonts: their name, their style, which characters they cover and also where to download them from. Adding such descriptions to a style sheet allows a designer to be more precise in font selection and, if the browser supports font downloading, to use fonts that people are unlikely to have installed, including fonts that the designer created himself for the purpose. Web fonts are also used by SVG and, conversely, one can use SVG to create fonts for download. Web fonts existed already in CSS2.

If you ask me, and I’m speaking as a non-expert in typography, I just want the type size renderings to be normalized across all browsers first. With all the new properties about to hit as CSS3 becomes mainstream (it’s working on Safari already), web designers will face even more problems just trying to keep websites sane-looking across different browsers.

Problem is, the W3C is not the right venue for raising this problem since it’s the browser vendors that render styles differently. And I’m not just referring to Internet Explorer here. We all want pixel perfection, do we not? But is it even possible? Not having to choose between px, em, and pt font sizing would be a good starting point.

Regardless, it’s good that there’s an open communication line between the general Web community and the working group. It doesn’t matter if you’re a type fiend or a casual web surfer. All you have to do is leave a comment (you have to register first), and your voice will be heard. So, what have you been wishing for when it comes to web typography? Sound off at Jason’s blog now!