CSS3

Over at Design Shack they’re four posts into the five-post Introduction to CSS3, which covers Borders, Text Effects, the User Interface and (coming soon) Multiple Columns. A nice intro to the subject if our own examples are too complicated for you :p

The new owners of the Fonts and Web Fonts modules, Jason Cranford Teague and John Daggett, say that only about 20% of the Web Fonts module is required for CSS (it is currently part of the SVG charter), and propose simplifying it before merging with the Fonts module. They hope to have a working draft of the new spec in August.

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.

Jason Cranford Teague has volunteered to edit the CSS Basic UI, CSS Hyperlink Presentation, CSS Fonts and CSS Web Fonts modules and is looking for feedback from users on the latter two. He asks:

Tell me what you think are some of the font styles and features missing from the current specification. What do you expect to be able to do with typography on your Web pages that you can not do now? What are you doing now with kludges that you would like to see simpler ways of doing?

Leave a comment on his blog if you have any ideas; and why not leave a comment here, too, to let us know what your opinions are? No deadline has been given, but I suppose it’s the sooner, the better.

Opera has one of the better levels of support for CSS3 (and other standards), making it an ideal platform for experimenting with future technologies and new techniques that these standards will offer. However, this has always been let down by the fact that Opera is very lacking in the web developer tools segment. To be frank, Firebug and the Web Developer Toolbar blow away anything Opera has offered in this realm.

This short coming is about to change soon. Opera has just announced today, with the release of Opera 95 beta 2, that Opera Dragonfly will be Opera’s web developer tools. These will be released as an alpha on the 6^th of May. In line with their alpha status, the tools will not be feature complete, but they will show a good foundation of Opera’s developer tool vision.

Once released, Opera is looking for feedback on the tools, to make sure they fit the needs of real world web developers and designers. I’m looking forward to web developers getting their hands on the Opera Dragonfly and finding out what the impressions are. If you are interested then go the the Opera Dragonfly website on the 6^th or just open the Web Developer menu item from the tools menu. In the mean time, Opera 9.5 beta 2 (Kestrel) has been released today, so it is a good time to check out what CSS3 properties it supports.

I don’t have time at the moment to write a good summary, but the link to the announcement is below which includes some examples

CSS Gradients in Webkit

This week has seen the release of a raft of new proposals for features to be integrated into the CSS specification:

• CSS Animation
• CSS Transforms
• CSS Transitions
• CSS Variables

I personally have reservations about the Visual Effects proposals, feeling this is better suited to Javascript, but I seem to be in the minority on this so I will cede to the majority. I’m pretty excited about Variables, however.

The CSS WG had a face-to-face meeting in San Diego last month, and have released their latest resolutions in a series of posts on their blog:

Part I, Part II, Part III, Part IV, Part V, Part VI

Some of the highlights I saw on my first read through:

• Apple’s proposed animation & transition properties are to be considered.
• Web fonts are to be worked on with the SVG team
• The Advanced Layout module is still being discussed but will be renamed the Template Layout module
• A new type of list, tree-lines, was proposed
• A proposal for the use of constants will be published

Obviously there’s a lot more in there, but it’s nice to see that the Working Group is working!

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!

Some of you might have noticed that in the last few months, we’ve been having quite a few outages. Most of these were directly related to this blog being on Digg, Slashdot, Reddit, you name it. Some of the outages were caused by an even nastier thing, my other blog, an SEO blog, was on the same server, and had some articles, about WordPress SEO for instance, that were being hammered on a lot as well. Due to the fact that it was one environment, if that blog went down, this one went too, and the other way around.

So we started looking around for a better hosting provider, and thanks to David, we got in touch with the great guys at Media Temple, who graciously offered to take care of our hosting for us. This had the added benefit of this server being in the States, close to where 80% of our public is. So after a bit of work, we’re now on a new hosting environment, everything should be working again, and a bit faster than before.

We’ve also gotten a new RSS button, as you can see, thanks to my pal Roy Huiskes, and we’ve upgraded to WordPress 2.5, which I absolutely love. If there’s anything you see that’s not working correctly, let us know in the comments, and we’ll fix it!

BTW: we’ve got 3 advertising spots available at the moment on the right, if you’re interested, check out the advertising page.

Update: we now have gravatar support as well, get yourself one!

One of the interesting things about Acid 3 is that it tests parts of the CSS3 Colour and CSS3 Selectors modules, that are a part of the 2007 CSS snapshot. Now that both Opera and WebKit pass the standards part of the Acid 3 test, the support for the snapshot has now also improved. The CSS 2007 snapshot is the state of play in CSS at the end of 2007.

WebKit used to lack support for many CSS3 selectors, but now passes the CSS3 Selectors test on this site, and supports all of these selectors. Opera already supported these, but didn’t support HSLA, RGBA and the CSS3 values for transparent. These were added to pass Acid 3 in a post Kestrel build (which may or may not be back ported). Due to these improvements, support in these two browsers for the CSS 2007 snapshot looks healthy.

Ignoring CSS2.1 for now (which Opera has very good support for), both browsers fully support the Selectors Level 3 spec and the CSS Namespaces spec. For CSS3 Colour, the support isn’t quite as clear cut. Everything is supported in Opera, except the flavor keyword and the various related colour profile properties. These properties are at risk of being dropped by the spec however. WebKit has the same support except it doesn’t support currentColor yet, and has some bugs with allowing mixed values in RGB and RGBA. Firefox has had similar CSS3 Colour support to Opera for a while now

Away from the 2007 snapshot, ACID3 also tests Media Queries. These were already supported in Opera and WebKit, but are not yet supported in Gecko or the IE engine. Web Fonts (@font-face) are in the test and were already supported by WebKit, while Opera was developing support, but speeded up development to pass the test. Finally cursor from CSS3 Basic User Interface was added by Opera to pass Acid 3. I’m unsure if this was already supported by WebKit or not.

Although CSS3 UI is not part of the CSS 2007 snapshot, the spec is close to being complete–apart from lacking an editor or a test suite–and support in one or more browsers exists for many of the properties. The features supported by one or more browsers now includes box-sizing (Opera, Safari, Firefox and IE8), resize (Safari), outline-offset (Opera, Safari and Firefox), nav-up, nav-down, nav-right and nav-left (Opera) and cursor (Opera, Safari and Firefox).