Skip navigation.

exploreopera

| Help

Sign up | Help

Slightly ajar

Opening the web, one site at a time.

Posts tagged with "CSS2.1"

Next generation browsers entering the arena

, , , ...

With the release of Firefox 3 beta today, and the recent release of Safari 3 final joining the beta release of Opera 9.5 kestrel, all the major players bar one have entered the battle field. The Internet Explorer team are still keeping their eight generation browser close to their chest. While Safari 3 has shown its full hand by shipping as a stable release, both Kestrel and Firefox still have time to add features, standards support and polish.

Ignoring IE8, as that would just be guess work, what does this generation of browsers have in store for us at this moment in time? For web designers and developers, standards support is one of the most important details. I'm in the process of comparing these browsers to see how their CSS support stacks up against each other, using the 2007 CSS snapshot as a base. I'm using the current internal build of Opera Kestrel (more or less the same as the last weekly), and the aforementioned Firefox 3 beta and Safari 3 final.

As previously reported, the CSS snapshot includes CSS2.1, CSS3 Selectors, CSS3 Namespaces and CSS3 Colour. While I haven't completed any tests in detail yet, I've done some tests and have a feeling that Opera Kestrel will come out on top. Excluding bugs, Kestrel supports all CSS 2.1 properties and values except one - visibility: collapse. I've not checked the latest changes to this spec however. I'm also not sure if the bugs in the CSS2.1 test suite have been fixed yet. The test suite is huge, so will take a good while to go through, especially for 3 browsers. For CSS3 Colour, I've made a preliminary support chart on CSS3.info. Firefox leads in this regard, with Opera behind due to not supporting the alpha channel on RGB and HSL. Once alpha channel support is added both will get fixed however. The browser support chart for Selectors is in need of an update, but running the selectors test on the same site shows that Opera passes all tests, while Safari and Firefox still have some issues. This isn't strictly accurate as Opera doesn't have ::selection support, and does have some known bugs. There is a more in-depth test suite that I'll go through. It is fairly certain Opera wins out here though. For CSS3 Namespaces, it is pretty much even, with all browsers supporting @namespace, although of the five tests I did find, Safari has one issue, while Firefox and Opera both pass all of the test. Overall I think that each of these browsers has fairly good support for the CSS 2007 snapshot, but Opera should be in pole position for the moment. I could be wrong, and things could change before Firefox and Opera release stable versions, and Safari could even release a stable point release before each vendor releases their final product. Who knows, IE could come and surprise us all as the dark horse in the pack.

Kestrel implementation report: CSS Snapshot 2007

, , , ...

The W3C has just recently published a working draft of their first annual CSS snapshot. As this came about in a meeting in Beijing, I'll name it the Beijing report. Peter just beat me to the punch in covering what is included in the Beijing report on the CSS3.info website, so I'll let you read his post for an overview of what is in the draft. I personally think that this is a great step forward from the W3C, and is a sign that they are listening to criticism that CSS3 is taking too long. Having a snapshot like this allows user agent vendors, such as ourselves, to know what modules, or properties are considered stable enough to implement, without too much worry that the specs will change significantly.

We'd all love to see many of the things in the Backgrounds & Borders module, but this is not considered stable enough to be included in the snapshot, nor any property from the module. Looking at properties such as border-radius where more than one rendering engine supports supports it, they do differ in syntax and implementation. Opera does implement background-size as -o-background-size as it was needed for the UI of a certain customer delivery, and it was best to use an experimental implementation of a CSS3 property than invent our own vendor specific property.

Of the contents of the working draft, how far is Opera along in supporting these modules and specs? Using the latest public weekly of Kestrel as the subject, I've gone through the draft and noted what is and isn't supported.

CSS Level 2, Revision 1

This spec has been a long time coming and draws ever closer to completion. The spec is too large to cover everything that is supported in detail here, but if you take a loo at Opera Merlin's (9.0 - < 9.5) official spec sheet, you'll notice that Opera supports all of CSS2.1 with the exception of the visibility: collapse and white-space: pre-line property values. Since Merlin, Kestrel has added white-space: pre-line support. This can be tested at PPK's Quirksmode site. The spec has been updated recently, so I'm not sure if that information still holds true, so if anyone knows differently then please let me know. I couldn't find a changelog detailing what the recent changes were when it moved to Candidate Recommendation in July. Even if we only lack one value of one property, we still have bugs that have to be ironed out. The last I checked the test suite also had bugs. I would assume that Opera Kestrel currently has the most complete CSS2.1 support.

CSS Selectors Level 3

I've already wrote a lot about selectors on this blog, so regular readers will know that we pass all tests on the css3.info selectors test. The tests are not exhaustive, so there will be bugs, but it gives a good indication of what we support. It reports that we support all CSS selectors. This isn't quite true as it doesn't test the ::selection selector. That is the only selector that Kestrel doesn't currently fully support. Just like our CSS2.1 support, Opera has first class support for this spec, and is close to completion, apart from the seemingly never ending bug squashing that is a familiar part of any software development.

CSS Namespaces

CSS Namespaces allow is most useful in XML documents, and allows ocuments with mixed namespaces to be styled individually. For example, a p element in one namespace can be styled, without the p elements in another namespace being effected. If you declare the namespace @namespace xhtml "http://www.w3.org/1999/xhtml"; you could style only the p elements in this namespace using xhtml|p.

Opera already supported CSS3 Namespaces in Merlin, and it is now supported in other browsers such as Safari and Firefox. There are five testcases for namespaces in CSS found here, of which Kestrel currently fails one.

CSS Colour Level 3

Of all the specs and modules in this draft, the colour module is the least supported by Kestrel. We clearly support the colour properties for CSS2.1, but what about the extra properties and values in level 3? SVG colour keywords are supported, and in reality these have been supported by browsers for a long time, and just were not included in a spec. The opacity property was much requested and was included in Merlin. The currentColor value is also supported and I believe this was added in Kestrel. The HSL colour model isn't supported yet, but shouldn't be hugely difficult to support, given that it maps to RGB. An alpha channel has been added to both RGB and HSL an these are both not supported yet. This differs from opacity in that it is only applied to the property it is used on, such as the background-color and not the whole element. This will mean that the text will not be effected in this example. ICC Colour Profiles are also not supported as far as I'm aware, and neither is the flavor colour keyword. David Baron has written some testcases (thanks to fantasai for pointing that out) an not surprisingly Kestrel fails most of the HSL, HSLA and RGBA tests. Strangely it also fails the HTML colour keywords and SVG colour keywords tests and I'm not sure why. Safari and Firefox also both fail these tests. We also fail the flavour test, but I can't think of a single use case for the flavor colour keyword.

Overall Kestrel is in good shape in regards to supporting the standards in this snapshot, and has either the best support or close to it for each module listed, except perhaps the Colour module. Each of these have limited features missing, and except for the continuous cycle of bug fixing they are close to completion.