CSS3

Mozilla employee John Daggett has provided some try‐out builds of Firefox with support for the @font-face from CSS3’s web-fonts module. Currently available for Windows and Mac only—no Linux build yet—there remain several caveats as described in his comment on bug 70132, the most important of which being that the same‐site origin restriction is turned on by default, which means that most examples on the web will not work until you turn it off.

While browsing TechCrunch this morning, I stumbled across the site for iPhone developers tap tap tap, who had published their sales figures for iPhone apps in the first month. While these were very interesting, what’s even more interesting is the absolutely fabulous way in which these guys are using @font-face.

If you check their stylesheet, you’ll see this:

/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
@font-face {
	  font-family: "Fertigo";
	  src: url(http://www.taptaptap.com/Fertigo.otf)
	  	  format("opentype");
}

Which renders into great looking text like this (at least in my Safari):

Kudos to the tap tap tap people, and if you see more of these in the wild, be sure to let us know!

Shaun Inman did a very interesting post yesterday on what he describes as “CSS Qualified Selectors”. The idea is nice, he wants to be able to do:

a {
    text-decoration: none;
    color: #A10;
    border-bottom: 1px dashed #A10;
}

And then for images:

a < img { border: none; }

So if <img> has a parent <a>, the border isn’t there.

What’s most interesting about the post though is the comments. It seems, as Eric Meyer states there, that this kind of selector has been discussed quite a few times on the CSS mailing list, and isn’t doable. Dave Hyatt, one of the core WebKit developers, comments with a good explanation of why it can’t be done. It’s a nice read, and a good insight into the difficulties of developing a new standard.

While thinking about suggestions for new features wanted in CSS3, my mind strayed onto image replacement methods. At the moment we have a cornucopia of methods, none of which resolves the style on/images off problem without extra markup (I’m referring to CSS-only techniques).

CSS3 should be able to solve this problem for us, shouldn’t it? Isn’t that what it’s for? My initial idea was to suggest a pseudo-class that detected whether or not images were disabled and changed the content accordingly; something like:

h1 {
background-image:  url('image.png');
text-indent: -9999px;
}

h1::no-images { text-indent: 0; }

After doing a quick search, I found out that a solution has already been proposed, and it is much more elegant than mine! It uses the content declaration to replace the content, with a fallback option given after a comma:

h1 { content: url('image.png'), contents }

On the unofficial CSSWG wiki, the idea has been taken even further and the require-font function added; using this will allow you to instruct the browser to use a required font if available, download it if not, display an image if that’s not possible, or display in the fallback font style if none of the previous apply:

h1 {
content: require-font('FF Meta Serif'), url('image.png'), contents;
}

A very neat solution! The drawback? Although accepted, this is not in the Generated and Replaced Content draft yet; and the module has been assigned a low priority.

Rijk van Geijtenbeek wrote in to tell us that he’s created a CSS3 Quick reference in the form of a browser sidebar (direcly usable in Firefox and Opera) for quick access to all CSS 3 properties from all published modules. This, he says, is an ofshoot of Eric Meyer’s CSS 2 QR sidebar which he’s been maintaining for a few years.

His official announcement can be found here, and you can download this or his other panels from here.

It looks great, so thx a lot Rijk for putting your work into this!