Eric Meyer has started poring over the WaSP community’s suggestions for CSS3 with a series of posts on his weblog—3 so far in less than a week. The original feedback compiled by Fantasai is a monstrous read in itself, but all these are worth perusing if you care remotely about the future of web design.

It’s comforting to have one of the gurus like him to really go over this. Although he didn’t promise to address every single point on the list, what I’m seeing so far is extremely comprehensive. More importantly, we have a strong figurehead that’s rolling up his sleeves and setting up these blog posts as the stage for discussion with people who are not necessarily involved with the W3C and other stakeholders like the browser vendors.

Between debating over specific CSS features (e.g., containing floats, center positioning, selector blocks) and looking at the bigger picture…

Maybe CSS isn’t the place for this. Maybe there needs to be a new layout language that can be defined and implemented without regard to the constraints of the existing CSS syntax rules, without worrying about backwards compatibility. Maybe that way we can not only get strong layout but also arbitrary shapes, thus leaving behind the rectangular prison that’s defined the web for almost two decades.

I don’t have a concrete idea to propose here, because it’s not up to us any more. A solution was worked out over the course of several years and then found wanting by the implementors. Really, it’s up to the implementors to figure it out now. I personally would like to just lock the browser teams from Microsoft, Mozilla, Opera, and Apple in a room and not let them out until they’ve defined something that works and they’ve all agreed to implement soonest. I might even supply food and water.

…we have to keep talking and stay restless but hopeful. We may not be able to give the final word on the next version of HTML and CSS and the web browsers, but we can talk about what could go into them while the W3C listens.

IE6 is declining. HTML5 is gaining traction. JavaScript libraries and CSS frameworks abstract the process of squashing browser bugs and incompatibilities. And progressive enhancement reassures us that we don’t have to serve up exactly the same features in ancient browsers.

And maybe we can stop acting like the current technologies are our handicap and take the plunge. Okay, maybe splashing water all over might not be a good idea at once. Try dipping your toes. Try your left leg. Try wading. The key is to at least try.

Originally posted on February 18, 2009 @ 1:21 am

All the hoopla over Everything You Know About CSS Is Wrong!, a book by Rachel Andrew and Kevin Yank (see also the Digital Web article) is making me feel uneasy.

We’re not wrong; the title is wrong

I detest the title of the book. No, I don’t think “everything” I know about CSS is wrong. I “know” about the display:table technique for months now (thanks to Sitepoint, again).

Neither do I think it’s a good idea to go around belittling people by telling them they are wrong, whether in printed book or online article format. It’s harsh and misleading.

We’ve got issues

As for the CSS Tables technique presented in the book, these are some of the issues plaguing it:

1. tag soup
2. lack of source order control
3. the question of semantics and presentation vs. content: is making <div>s behave like tables/table cells any different from using tables as layouts?
4. IE6 and IE7 incompatibility (no surprise there!)

And not too long after the uproar, the authors have addressed the above problems:

Andrew Tetlaw responds to #1 and #3:

No one is negatively affected by the overuse of structural div tags. The same can’t be said for the use of HTML tables for layout.

And here’s an interesting quip which points out the very valid woe of web developers, who have had to adjust to all these changes in coding conventions because of our “flakiness”:

Congratulations on years of punishing web devs for using common sense. Finally the circle turns, but somehow you think that you were ‘right all along.

Matthew Pennell of Digital Web has this to say about those who question semantics and standards:

I must say that I’m surprised that an audience of (presumably) conscientious, standards-aware developers are almost all declaring that they will not use new features of CSS when they are available and supported. Are you all so short-sighted that you cannot see any application for the techniques discussed here beyond wholesale replacement of site layouts?

And Rachel has written this regarding #4:

Some commentators have suggested that we shouldn’t have put a book out about a technique that can’t be used immediately, that will require workarounds to still provide support for older versions of Internet Explorer. I disagree. Something I point back to in the book is how the web community began to use CSS for layout even though support in Netscape 4 was limited and buggy. If those of us who were building CSS layouts right in those early days had said, “nah, it doesn’t work in Netscape, can’t do it”, then our recent history would look very different.

Are we hesitant about change and innovation?

In a sense, browser usage does “cripple” our ability to look towards a future of web design innovation (and bliss) when IE6 is finally disappears. But are things right now are exactly the same as when Netscape Navigator 4 was the stumbling block?

More importantly, will the CSS Tables technique actually push our level of innovation by a significant degree? The past few months of new websites tell me innovation is not too hard to come by still.

And what about next-generation HTML5, which will have new structural tags like <header>, <section>, <article>, <footer>? Can one not feel guilty using all those <div>s in the midst of these elegant new tags? Perhaps that’s another debate for another day—in 2022.

Originally posted on October 29, 2008 @ 10:05 pm

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!

Originally posted on May 2, 2008 @ 9:52 am

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.

Originally posted on June 30, 2008 @ 6:34 am