CSS3

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.

I don’t mean to keep taking content from Opera’s Chief Web Opener, David Storey, every week, it’s just that he’s written about CSS3 a lot, recently. In his latest update on the forthcoming browser revision (codenamed Kestrel), he says that two buggy selectors have been fixed, and they are confident that when the remaining seven are ‘switched on’, they will also be fully implemented – making it the second browser to reach full compliance with the selectors test.

The latest security update of Firefox, 2.0.0.2, provides a fix for a possible spoofing attack using the CSS3 cursor property.

As far as I’m aware, this is the first known security hole which uses CSS3 properties; perhaps someone can correct me if I’m wrong.

A quick run through the visitor logs of 10 websites I run or manage shows that Internet Explorer 7 usage is still growing, although it’s slowed down considerably since the boom of December 2006 when Microsoft released it into the automatic update programme.

Average share for the month of February (to date) is 18.4%; the number varies from 9% to 26%. These figures are from a range of different sites, from personal blogs to full corporate websites, and are intended to be indicative, not definitive.

TheCounter.com puts the figure at 24%; Browser News provides a range between 14% and 25%.

I think 20% is probably a reasonable estimate; that’s one fifth of the market. It’s pretty big, but even with Firefox’s share of around 15% and Safari’s 5% or so (as well as the smaller market share of Opera and others) that means that less than 50% of the surfing public use a browser with even the most basic CSS3 functionality.

First, here’s another table showing CSS support in web browsers, including CSS3 declarations. Unfortunately the author only seems to have access to browsers that run in Windows, so it’s not as complete as it could be. Interesting, nonetheless.

Update: I stand corrected. There are options to choose which browsers display in the table, which makes it very useful.

And here’s a demonstration purportedly showing an implementation of the text-overflow: ellipsis property using CSS and Javascript (read about the property here). Perhaps I’m missing something, but it only seems to work patchily for me in Firefox and Opera; I wonder how much testing it’s had.

The W3C has updated the working draft of the CSS3 module — Generated Content for Paged Media.

We’ve been focussing a lot on what we will gain from CSS3, but of course we will lose some things too; namely, some of the CSS tricks we’ve come to rely on over the past few years.

I’m thinking about some of the great techniques that have been developed to stylise the web, like the ‘sliding doors’ technique, for example. It’s a simple and elegant way to style your navigation lists, but it will be made redundant either by border-radius or multiple backgrounds (or a combination of the two).