CSS3

Update by David: Opera has now released a public WinGogi build of Opera passing the DOM test and with pixel perfect rendering. We don’t believe we have passed the test yet, as there are performance issues with a couple of tests. This puts Opera and Safari neck and neck. It is fantastic to see both the Apple and Opera teams taking this test seriously and pushing each other to improve our standards support. Who ever wins the race doesn’t really matter, the main point is that there are now two engines with the required standards support to pass Acid 3. This could be a shot in the arm for both CSS3 and SVG.

Update by David: Although the Acid 3 test was updated to allow WebKit to pass by the letter of the test, they still seem to fail by the spirit of the competition. One of the sections of the Acid 3 test checks SVG Animation. WebKit have added the interface to allow the test to pass, but not fully implemented the feature it was testing. See Jeff Schiller’s blog for more information.

Update by Joost: While Opera might have been the first to pass the test in laboratory conditions, for which I applaud them and I hope they release it ASAP, you can download a WebKit nightly right now and enjoy the full 100/100!

Update In the last few minutes (while I was eating lunch) the final 2% was reaching, making Opera the first browser to reach 100%. There are still some rendering issues, but things are well on track to passing the test. A preview build will be released on Opera Labs shortly. Thanks to our developers in Scandinavia that have been working into the evening to reach 100%.

Safari has been making great gains in its Acid3 score in recent weeks, currently residing on 96%. Opera however has come out of the chasing pack and moved from 77% in the latest weekly release of Kestrel, to 98%100% in the latest internal builds. As part of this it also includes the long requested CSS3 HSLA and RGBA support, and Web Fonts.

These improvements wont be included in a weekly Kestrel build any time soon. Opera, like Mozilla, are at a stage on our development process where we are closing in on a release, and thus regression testing and stability are critically important. This work will most likely (although not confirmed) go into a post Kestrel release, in case it causes regressions and the like. There will probably be an experimental alpha release showing this improved support in the not too distant future.

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.

It was announced yesterday on the Webkit Blog that their latest nightlies now score 91/100 on Acid3. EDIT:- As of last night, the latest nightlies now score 92/100.

Kudos to the Webkit guys for obtaining such a high score after Acid3′s launch only earlier this month; I recommend you subscribe to the blog to keep up with their work, as it’s pretty active at the moment and I’m sure that activity is only going to increase the closer they come to passing Acid3.

A meta bug has been created in their Bugzilla which you can use to keep track of their progress and outstanding bugs relating to an Acid3 pass.

Other browser scores below:-

• IE8 – 17/100
• Opera nightly (build 4681) – 65/100
• FF3b pre 5 – 70/100

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!

So, MS have finally pulled their finger out and released it

Link to installers

WARNING – the word on the street is that it IE8 automatically overwrites any IE7 installation so bear that in mind!

Daniel Glazman has created a new test to show CSS3 Selectors support in your browser. He has also posted results for current browsers.

With this and the Acid 3 test, there’s a lot for browser makers to aim for.

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

The closing date for letting the W3C know your priorities for CSS3 is Monday, March 10th. If you want to help shape the future of CSS, get over to webstandards.org and leave a comment now.

As this is my first post, I’d like to introduce myself. My names James and I’m currently working as a senior User Interface Developer for Teachers TV. Like many of you guys, I’m fanatical about web standards and about creating the leanest, most semantic markup possible. I too am excited about the new possibilities with the arrival of CSS3, and am keen to contribute as much as I can to this great site. My first post is regarding a new method of creating Tooltips that I devised while coming up with a solution for a recent project.

Up until now, there were a few options in existence; ugly Javascript-based methods, or solutions that use blank anchor tags (for IE6 compatibility). Another possibility is to ignore IE6 altogether and make use of the hover pseudo class in conjunction with the parent element that contains the tooltip text. I had to think out the box a bit on this one, but have come up with a completely new CSS3-based solution.

My solution degrades gracefully in browsers that don’t support the CSS3 elements I’ve used and is a lot more elegant than former methods since it utilises an element’s title attribute, rather than creating additional markup within a parent element.

Let’s start with the HTML (Note: the following example is based on use of icon background images for the divs, hence the fixed dimensions):-

<div title="Tooltip text for first div"></div>

<div title="Tooltip text for second div"></div>

In short, my method is achieved by making use of the :before (or :after) pseudo element and content property, combined with the :hover pseudo class.

First off I grab the value of the divs title attribute by using the content property’s attribute function. Notice how I set the generated content to display:none -I’ll make it visible on :hover.

div:before{
	content:attr(title);
	display:none;
}

I now combine both the :hover class and :before pseudo element together, to specify values for the generated content when the div is hovered over.

div:hover::before{
	width:200px;
	display:block;
	background:yellow;
	border:1px solid black;
	padding:8px;
	margin:25px 0 0 10px;
}

One of the problems I came across at this stage, was that when having two elements floated left to each other and you hover over one of the elements, although the tooltip displays, it renders underneath the adjacent element. It is a simple case of layering the generated content over the div; my immediate thought was to specify a layering value in the above statement. However, after referring to the relevant W3C spec, it was apparent that in line with their recommendations, user agents ignore the position property in an instance such as the above statement, therefore rendering a z-index value useless.

The solution was to specify the z-index and position properties in a separate statement dealing exclusively with the :hover pseudo class.

div:hover{
	z-index:10;
	position:relative;
}

This meant that it now works! It of course works in every browser above IE7 including Safari 3, Firefox 2.0.0.12 & Opera 9.5b

Obviously there’s nothing you can do to stop the default behaviour of standards compliant browsers regarding rendering of title attributes, so when leaving your cursor on my method for too long, the default browser behaviour will overlay the generated content CSS effect

Live example of the final product