CSS3

I’ve got a nice idea for a new extension to css3.info: a gallery of sites using CSS3 as an important aspect of their design. For that gallery I’d like you, our readers to submit your designs! Drop them in the comments, and I’ll create a cool gallery, which might feature your site!

In other news: this site will be getting a new layout in a few days, a first step towards making this site even bigger and better than it already is. Because we want to continually improve this site, Peter and myself would like to have some more people working with us on this site. If you think you can write nice posts for this site, or help us in any other way, please contact us through the contact form.

Andy Budd is a well-known figure in the world of web development. If you haven’t heard him speak at one of the many conferences he attends (or even the one he helps organise), you may have read his book CSS Mastery or one of the many articles he has written.

Recently we mentioned Andy’s call for a new intermediary version of CSS, which includes all the most commonly implemented features of CSS3. This led to a fair bit of discussion in the community, so we asked Andy for some clarification of his suggestion (there’s more on his own blog too), as well as a few more thoughts on the future of CSS.

Apologies to all for the delay between posts, the site authors are busy with jobs, family and holidays. We’ll have some new content very shortly. In the meantime, here’s a quick browser update.

Based on my own statistics – and these are not, of course, meant to be in any way representative – April saw a pretty decent leap for IE7; its share of the market rose to 21.1%, up from 18.6% the month before. Even more encouraging, IE6 fell to 46.5% after its shock rise to 50.6% last month.

Firefox’s share continues on a slow decline since I began my figures; from a high of 16.9% in November, it falls to 14.8% in the latest figures.

Microsoft were noticeably guarded with details of changes in future versions of IE at their recent MIX event, although hints were dropped that we’d see improvements to CSS, RSS, and AJAX, and that Microformats could be on their way.

In an effort to tie this post to the theme of this blog, let me ask a question: what three CSS3 features would you most like to see in IE8?

Update: Maybe I should reword the question: With the presumption that all outstanding CSS2 bugs are removed, and all remaining CSS2 declarations implemented, what CSS3 features would you most like to see in IE8?

Andy Budd gave a talk at this year’s Highland Fling web conference on the subject The Future of CSS (direct PDF download, 1.3MB).

Readers of this site will be familiar with most of the content (although it’s still worth reading), but two things stood out for me:

First, the use of simple calculations; I’ve thought for a long time that this would be useful, and I’m really glad that it’s being considered. Here’s an example:

#mainContent {
width: calc(100% - 200px)
}

Second, the call for a CSS2.2. As he says:

[There are] some really interesting things in CSS3. Many of them are fairly niche, with little demand. Many browsers already support the more interesting features of CSS3; Why not have an intermediary step covering the stuff people want?

I hadn’t considered it before, but it makes sense. Most browsers now support a small range of simple CSS3 features, so why not partition those off to an intermediate recommendation while the other, more complex features are worked on?

I like to keep track of browser market share, specifically the growth of IE7, so that I can tell when its new CSS features become mainstream enough to start using. This month, I had a bit of a shock.

I’ve based my figures on eight different websites I manage, from personal blogs to international businesses, to try and get a broad range of figures – although they are not, of course, meant to be definitive in any way. I’ve tracked figures back for six months – IE7 was launched in October 2006 – and only included sites with that much historical data.

The figures (click here to see the graph) didn’t surprise me at first. IE7 started at 1.6% in October, had a huge boost to 12.1% in December, and growth has slowed since. Most of its share came at the expense of IE6, which started off with 60.8% and was down to 47.2% by February. But then, in March, IE6’s share increased to 50.6%. I thought I could put this down to an anomaly on one site skewing the results, but in 6 of the 8 sites I monitored, the result was the same – an increase in usage over the last month.

I can’t explain it. It’s like it just refuses to lay down and die.

If we want to move the web forward, we need to encourage people to drop IE6 as soon as possible. As far as I’m concerned, there are very few reasons to still be using it; either you work for a company that deploys software centrally and hasn’t upgraded yet, you’re a developer testing your code, or you don’t really know what a browser is and you’re unaware that other choices are available.

I’m assuming that a reader of this article is a web developer interested in CSS3. If we want to start using all the new opportunities that it creates, we need to kill off legacy browsers that don’t support it. If you’re using IE6 and you have any option whatsoever, switch to a better browser; IE7 at the very least. If you know someone who still uses IE6 and has any option whatsoever, get them upgraded. Evangelise all the options; Firefox, Opera, Flock, whatever; get people switching. Let’s kill this dinosaur off and let the fast mammals evolve to take its place.

April 5th this site will be going naked, yours too? The CSS Naked day was instated to promote Web Standards, the proper use of HTML etc. And it’s a fun play on words too: we will be showing off our <body>! Join in on all the fun!

After the issue of the overhauled CSS3 Text module recently, I wonder if the Fonts module is due for similar treatment? The current working draft states:

The working group believes this draft is stable and it therefore issues a last call for comments, before requesting the status of Candidate Recommendation for the draft. The deadline for comments is 30 August 2002.

Four and a half years ago! That’s a long feedback process!

The module introduces a few new features into the coder’s lexicon, and although none of them are truly essential, they would be very useful; there is so much text on the web, but typography is the least-developed aspect of CSS.

font-size-adjust lets you preserve the height of type even if the user doesn’t have your first-choice font installed. Certain fonts have higher height aspect than others, so type that you’ve carefully styled to appear at a certain height could suddenly appear smaller if font substitution was used. font-size-adjust let’s you overcome that problem. The module provides some examples of font height aspects.

font-stretch is useful when displaying font families with condensed or extended faces, such as Arial. You can select absolute (condensed, extended, etc) or relative (narrower, wider) values.

font-effect allows you to apply ‘special effects’ to your font; choose from embossed, engraved, or outlined text.

font-smooth switches anti-aliasing on or off. Fonts look so ugly without anti-aliasing, I can’t imagine a situation where you’d ever turn it off!

Finally, three declarations with limited use outside of East Asia: font-emphasize-style and font-emphasize-position, along with the shorthand font-emphasize. These are used only to set emphasis on East Asian characters.

Will this module make it to recommendation in this form? Or will it make a comeback in altered form? I suspect the latter. But I think the most radical change to web typography will come not from the implementation of this module, but from the implementation of @font-face, which will facilitate the use of non-core fonts.

By the way, anyone interested in web typography should, if they haven’t already, read Richard Rutter and Mark Boulton’s Web Typography Sucks presentation. It’s a 4MB PDF download, but well worth ten minutes of your time.

Developers interested in both CSS 3 and JavaScript will be interested to know that the latest release of the Prototype framework supports almost all CSS 3 selectors.

Prototype is a JavaScript toolkit used as the base for libraries such as script.aculo.us and moo.fx, which add easy dynamism to websites.

Back in May 2003, the CSS3 Text Module made it to Candidate Recommendation status, meaning:

[The] W3C believes the specification is ready to be implemented.

Before it made the next step to Proposed Recommendation status, however, it was decided that a complete overhaul was needed. Four years later, and the renamed CSS Text Level 3 has been issued as a Working Draft.

This module:

… defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, text decoration and text transformation.

This is still a very rough document, with some intended declarations not defined yet – text-overflow, for example. You can see how it differs from the previous version with this list of changes.

My client wanted a page showing photographs of all their staff, and the design called for them to be semi-opaque against the page background, going fully opaque on mouseover, like so:

What would be the best way to do this?

One would be to make an image sprite of the images two states:

And use it as background-image on the element, swapping to the other state on :hover. One small problem with this is that IE6 only supports :hover on the a tag; another is that because the results are being pulled from a database, you’d have to write a dynamic stylesheet as well, to call the swap on all staff photos.

Another option would be to create two separate images of the original, one for each state, and write a Javascript function to swap them over on mouseover.

There are other solutions as well, but none of them are the best way; the best way is to place them in the page with img, then use the CSS3 opacity declaration for the switch, as so:

img { opacity: 0.6; }
img:hover { opacity: 1; }

Two short lines of code, much quicker, the same effect without any of the hassle.

As with the rest of CSS3, however, one big drawback: no native support in the IE family. It works on just about every other major browser, however.