CSS3

A first Alpha of Mozilla’s new browser is due for release shortly (probably tomorrow). Firefox 3 saw a lot of work go into speed, stability and the interface, but was slightly disappointing for front-end developers and saw CSS implementation overtaken by Safari and Opera.

3.1 will make up for that with a whole raft of features on their way. Implemented in the current nightlies (and therefore, most likely, in the Alpha) are:

• All remaining Selectors
• Text Shadow
• Box Shadow
• Border Image
• Column Rule

Planned for implementation but not yet landed features include:

• Media Queries
• Transforms

For the stat-hungry amongst us, 3.1 currently scores 84 on the Acid 3 test, and the implementation of Media Queries should take that up to 85.

There’s no indication of it, but I personally would like to see their border-radius syntax brought into line with the standard, and Transitions implemented to complement Transforms. I’ve been playing with Transitions recently, and they’re very cool.

What new CSS features would you like to see in Firefox 3.1?

Firefox 3 isn’t quite out yet, but already there are some exciting plans for CSS implementation in future versions.

FF3.1 should see all the selectors (test them here), @media queries, text-shadow, font-stretch, and downloadable web fonts with @font-face; FF4 should add calc() and attr() values, along with the Animation and Transitions modules proposed by the Webkit team.

You can see a list of other planned implementations on the Mozilla Wiki.

Opera have released version 9.5 of their browser today, and the good news for our readers (and web users in general) is that there are lots of CSS 3 features implemented. This article on dev.opera.com goes into more detail, but major improvements include:

• @media queries
• text-shadow
• -o-background-size
• opacity
• hsl colours
• overflow-x & overflow-y
• all css selectors
• form pseudo-classes

Download a copy today and take a look at some of the examples on our Preview pages. I’ve just noticed that the background-size example doesn’t work, but that seems to be our implementation at fault, not theirs.

I’ve just put a pre-Alpha build of Firefox 3.1 through its paces, and can confirm (following David Baron’s announcement) that it gets a score of 578/578 in our CSS3 Selectors Test, which means not only support for the new selectors, but some bugs fixed in existing ones. To put that score in perspective, Firefox 3 scores only 357/578.

There is an almost perfect score on Daniel Glazman’s Selectors Test too, with only one discrepancy showing up.

So Safari, Opera and now Firefox all pass the test; of the major browsers, that only leaves one Inevitable Exception…

Those brave enough to try pre-Alpha can download builds from Mozilla’s FTP server. The usual warnings and disclaimers apply!

The Internet Explorer team announced on their blog today that they are unhappy with the slow progress and differing implementations of the various CSS3 modules, and will not be including any CSS3 functionality in IE8; instead they will be producing their own, alternative standard, which they are codenaming CSS.2012 (after the planned year of launch of the subsequent browser).

Few details have yet been released as to what the new standard will contain, although one new feature which was hinted at was the :silverlight selector, which will be used to replace text in selected elements with high-definition streaming video.

It is unlikely that CSS.2012 will be compatible with existing CSS standards, and MS intend to use their dominant market share to automatically push the new version onto desktops; with training being provided only by Microsoft-certificated teachers, this could end up being very expensive for web developers forced to re-train.

IE Platform Architect, Chris Wilson, said:

Other browsers and standards break the web, so CSS.2012 is our best effort at fixing it. It will be tightly integrated into .NET and Silverlight, and initially will only work in IE9. Other browsers will be able to license the technology after a few years, when we judge it is stable. Then they can’t break the web.

More information on the announcement here.

Update: It’s just after noon here in the UK, so time for me to confess: yes, this is an April Fool’s Day hoax; of course, Microsoft would never pull a stunt like this. Hope you all enjoyed the prank, and I’m happy I caught a few of you out!

Yesterday Dave announced that the team have introduced a new proprietary value for the CSS3 ‘background-clip’ property.The new value “…causes the background image to clip to foreground text (including decorations and shadows). The shape of the foreground content (including alpha transparency in the content) is applied as a mask to clip background drawing for the box.”

I have come up with a few examples that show the new value being used in several different scenarios:-

• Background clips to text (Screenshot)
• Background clips to text (with text-shadow applied) (Screenshot)
• Background clips to text-stroke (Screenshot)
• Background clips to text-stroke (with text-decoration applied) (Screenshot)

Needless to say that you need to download the latest nightly to view the live examples. I have also included screenshots of each example (background image is a subtle vertical gradient).

Apple surprised a lot of people by releasing Safari 3.1 today (myself included!), and amongst its list of new & improved features (audio and video tags! SVG in img and background-image!) are two which will be of interest to readers of this blog: full CSS3 selectors support, and web fonts.

The first means that Safari now supports the missing nth-child / nth-of-type selectors, which are useful for styling tables and lists (amongst others), and also now passes our Selectors Test (which, while by no means exhaustive, is very useful). Opera 9.5 will also support these selectors; Firefox 3 probably won’t, IE8 is unknown.

The second is the more exciting to me, and I’ve already written a quick introduction (with example) on my own blog. In a nutshell, you can now embed fonts in your pages to display even to users who don’t have that font installed. There’s a longer article with more examples on A List Apart.

We’d known most of this was being implemented by Webkit/Safari, but had no idea it would be coming so soon. Congratulations to the whole team, and here’s hoping it serves as an example to the other browser makers.

I’m I began writing this post in IE8*, something I didn’t think I’d be doing just a short while ago; the IE team have certainly been busy in the last 18 months! As it’s beta software there are obviously quite a few rough edges and we can’t consider it feature complete, but I thought I’d take a look at what features of CSS 3 have made it in already.

The short answer: not many! In fact, the only ones I can find are the substring matching attribute selectors:

E[att^='val']
E[att$='val']
E[att*='val']

These allow you to choose elements based on substrings of their attributes; that begin with, end with, or contain (respectively) the provided value. Update: As has been pointed out in the comments, these were already available in IE7; I should have known that, as I wrote the (now outdtated) compatibility table! In my defence, it was very late when I wrote this post…

Other than that, nothing I can see. Although it’s not new to CSS3, generated content is supported, which is good news. Using the :before and :after pseudo-elements, you can add text content (and images according to the spec, although they don’t seem to work in IE8);

E:before { content: 'foo'; }
E:after { content: 'foo'; }

No opacity or RGBA yet, which is a shame as they’re supported in almost all of the other browsers. Still, it must be remembered that there’s still time for new features to be added before release.

* I had to switch to Firefox; IE8 is not ready just yet!

Yesterday, Dean Hachamovitch announced that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what they announced initially which prompted a huge amount of feedback (good and bad) within the web community.

Dean goes on to mention that the change of heart was due to MS recently publishing a set of Interoperability Principles and suggesting that “…IE8’s default is a demonstration of the interoperability principles in action”.

Full blog post

As of last week Webkit passes the CSS Selector Test joining Konqueror and Opera as the third browser to provide a stable and complete CSS selector implementation. You can download a nightly build for yourself to try it out. Congratulations to the Webkit team at Apple!

More information about the current state of CSS Selector support can be found on in the article CSS Selectors: Opera and Safari pass the test! over at Rakaz.nl.