CSS3

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

Opera has a dragonfly that is getting ready to hatch. If any of you are attending SxSW, Opera will be revealing more information there. Catch us at the booth or at the Rock Opera party at Stubbs on the 10^th of March. Keep your eyes open for updates to the Dragonfly site, for more information before then.

Opera Dragonfly will initially launch as a private beta to a select audience for its test flight, before going public when we are satisfied with the trials.

Mozilla’s John Resig has removed support for certain CSS3 selectors from the jQuery Javascript library, and says the fact that no-one has asked for them to be reintroduced is evidence that they aren’t very useful:

Now, I’m sure I’ll probably get lots of feedback saying “but ‘E + F’ can be useful, look at this example” or “of course ~= is useful, you can use it on rel attributes” – that’s not the point. The fact is that they are woefully un-used. To the point that they are a burden upon the implementors of the specification. What’s the point of implementing the above features – or more importantly: optimizing the above features for speed – if no one is using them.

Daniel Glazman, who authored the original spec, says that John is looking at them from a purely HTML-centric viewpoint, that lack of support means that people haven’t really thought of using them yet, and that just because the majority don’t have a use for them, doesn’t mean that they are useless;

So we have here selectors that are not implemented yet or not interoperably and Web designers don’t use them. How surprising!!! In CSS, we have some features here to serve some typographic local constraints, because we saw a menu in a restaurant nicely designed and we needed a new feature to be able to make it in CSS. Serves a very little community of users. That community will NEVER show up in any stat. Is that a reason to drop the feature? You don’t see a wide community of users for a given selector? Is that a reason to drop it? CERTAINLY NOT.

I’m with Daniel on this one; the key point for me is that the support for them at the moment is so limited that we haven’t yet seen what the talented development community can do with them. I’m sure I, as a front-end HTML developer, won’t use them as frequently as the existing selectors, but I already use some of them infrequently and look forward to using them more.

One of the selectors new to CSS3 is the :target pseudo-class, which can be used to apply rules to an element with a fragment identifier; that is, an anchor name or an id. For example, let’s assume you have a section heading with an id of ‘chapter_2′:

<h3 id="chapter_2">The Title of the Chapter</h3>

You could create a direct link to that element by using the fragment identifier at the end of the URL:

http://www.example.com/index.html#chapter_2

And, with the :target selector, apply a background to that element to indicate clearly where you have arrived:

h3:target { background-color: #ff0; }

Pretty useful, right? Not a killer feature, but useful nonetheless. It can be made even more useful, however, with a little bit of ingenuity; how about, for example, a pure CSS image gallery?

Take a look at this example (in a browser which supports :target; Mozilla, Webkit or Opera browsers will do the trick). Clicking the links allows you to browse through the different images, and it’s done with minimal markup and no scripting.

The first step is to create a list, with the image, name, and link in each list item; for example:

<li id="one">
	<p><a href="#one">One</a></p>
	<img src="http://www.css3.info/wp-content/uploads/2009/09/one.jpg">
</li>

Each list item needs an id, which will provide the anchor, and the link href is to its own id; this allows :target to work its magic! All the images are absolutely positioned on top of each other, and using the selector simply changes the z-index value so the targeted image is on top:

img { position: absolute; }

li:target img { z-index: 100; }

Easy! Of course, this is only a very simple example; with even more ingenuity, this could be expanded to become a very useful tool.

Update: I’ve just seen that Daniel Glazman came up with a very similar proposition before I did: CSS-only tabs.

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.

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.

If you’ve been reading this blog, you’ll know that Opera has been making great progress on the CSS3 selectors front in the latest version of its engine – Presto Core-2. While Opera 9.5 does pass every test in the CSS3.info selectors test, it wasn’t without issues. The test doesn’t test the ::selection pseudo element. It also doesn’t test what happens when manipulating the markup through the DOM. Both of these were not supported in Core-2, but that is now not the case.

If you go to this test page (Warning Geocities) with the latest Opera weekly, you’ll notice it is now working correctly. This is the last selector that Opera didn’t support. The dynamic behaviour of the selectors have also been fixed. If you head off to Quirksmode and try out either the :first-child and :last-child, :only-child, :first-line and :first-letter or the :empty tests, you’ll find that they all work. Although it is most likely not without bugs (what software is?), it seems Opera 9.5 will be the first browser that fully supports all selectors in CSS correctly. It could be that Konqueror has fixed the issues high-lighted on PPK’s blog, but I don’t have a copy to test. Leave a comment if that is the case. Konqueror does fantastically well even if it doesn’t support everything.

Ian Hickson, the Google employee tasked with creating the next generation of acid test, has completed his work, which is now available for public consumption at its new home, acidtests.org. Unlike the first acid test, which focused on the box model, and the second acid test, which covered a broad variety of basic HTML and CSS features, Acid3 covers 100 of the nooks and crannies of HTTP, HTML, CSS, ECMAScript, SVG and XML, all through the medium of DOM scripting, a critical requirement for any modern web application. Ian Hickson is also the primary author of the HTML5 specification, which started life as a spec. called ‘Web Apps 1.0’, and as such has lots of application‐related features such as client‐side storage and enhanced forms. Ian wrote 64 of the tests, with the remaining 36 being submitted by both browser vendors and interested web developers.

Work started on the new acid test almost as soon as the IE developer team posted notification that IE8 passes Acid2. As was widely criticised around the ’net recently, it was revealed Internet Explorer 8 would now only pass the test if the server was modified to output a special HTTP header. It is not known to css3.info at this time whether the header would be required for IE8 to achieve compliance in the new test.

You can’t have failed to have noticed the announcement by Microsoft’s IE team this week, that the next version of the browser will require an ‘opt-in’ switch to display documents with older DOCTYPEs in full standards mode. That’s been debated at length elsewhere, but I thought it would be useful to do a quick, non-scientific poll of current browser share to get an idea of how long it might be before this becomes a pressing issue for us.

Note: The following results are taken from the last month’s statistics from 12 sites I manage, from personal blogs to international companies, with monthly visits from 300 to 320,000. The error of margin can not be calculated, so these figures should be taken as a guideline only. That said…

The last time I conducted a poll like this, back in May 2007, the total market share of all versions of IE stood at approximately 68%. According to my new figures, the share is approximately… 68%. Oh.

What has changed, however, is the share of different versions of IE; in May 2007 IE6 had 46.5% of the total, and IE7 had 21.1%; in my new figures, IE6 has 33.5%, while IE7 narrowly beats it with 34.3%.

While perhaps not as big a difference as we might have expected in eight months, at least we can see a noticeable decline in IE6 usage. Microsoft are currently including IE7 in their latest round of security updates, so with luck we’ll see another big shift in the months to come.

I’m not sure how aggressively we’ll see IE8 pushed when it is finally released, but on current form it looks like we may have to wait another couple of years before it gains decent market share and we can really take advantage of its advanced (fingers crossed!) features.