Skip navigation.

exploreopera

| Help

Sign up | Help

Slightly ajar

Opening the web, one site at a time.

Posts tagged with "color"

Kestrel implementation report: CSS Snapshot 2007

Monday, 22. October 2007, 06:41:02

, , , ...

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.

5 Comments

A look at the CSS3 Colour module

Saturday, 14. July 2007, 19:35:38

, ,

The CSS3 Colour Module is currently in Candidate Recommendation at the W3C. It has a number of new properties to allow authors more control of how they specify colour in their designs. In this post I'll take a quick look back at was has officially been available up until CSS2.1 and what has been added to the mix in the latest version of the CSS3 module.

Setting the colour of an element

CSS allows the foreground or the background of an element to be set using a number of different colour units. These are set using color for the foreground colour (mostly the text colour) and background-color. In CSS3 color is included in the Colour module, but background-color is included in the backgrounds and borders module. color acts just like CSS2.1 but adds a new legal value, attr(<identifier>,color). This allows one to specify an attribute from the element that the selector is pointing to, and the value of that attribute is used as the colour value. If it is not a valid colour then the browser/user-agent will fall back to using the inherit keyword.

Colour units

The value of a colour in CSS2.1 could either be one of 16 HTML4 colour keywords, or using the RGB colour model, specified as either a hexadecimal value (such as #FF0000) or a RGB triplet (such as rgb(255,0,0)). CSS3 has extended this by adding further colour keywords and an additional colour model. currentColor colour value has also been added, to set the colour to the same value as that specified in the color property. This is set to inherit if set on the color property itself. This is useful to set the colour of the background or border to the same colour as the foreground.

Colour keywords

In addition to the existing HTML4 keywords, the SVG colour keywords have been added. These are based on the X11 colour keywords. These have been implemented in browsers since Netscape 1.1, so should work in all major browsers, but they are now valid to use without getting validation errors. The named colours can be found in the CSS3 Colour spec.

Colour models

CSS2.1 uses the RGB colour model to specify colours, either as a hexadecimal number or RGB triplets. While this works well, it can be argued that it isn't intuitive. If one wants to tweak the colour to a different shade of the same colour, it isn't always obvious how to change the value. I still usually look up the value from a colour chart for instance (although I'm not a trained graphic artist). The new colour model, HSL, is thought by many to be more intuitive than RGB. This stands for Hue, Saturation and Lightness. Hue is represented by a 360 degree disc, where one can select the base colour that is desired. The basic colours (apart from white, grey and black -- more on that later) are around 60 degrees apart on the disc. For example, red is 0 and 360 degrees, yellow 60 degrees, green 120, cyan 180, blue 240 and purple/magenta at 300. Values between these get a mixture of the colours adjacent, such as cyan-blue at 210 degrees. The ligtness and saturation have to be set to get these colours however. Both are set on a percentage scale from 0 to 100. The lightness value sets how light or dark the colour is. No matter what hue or saturation is set as, using 100 for lightness would make the colour white, and 0 would make it black. Using values in-between would give a darker shade of the hue or a lighter tint. Providing the saturation is set as 100, and the hue is 240 (blue), setting the lightness to 75 would give a light blue, and 25 would give a dark blue. 50 would give regular blue. Ajusting this value would make the colour darker or lighter. As mentioned, setting full saturation will give the colour it's full hue. Making the saturation lower will move the colour to a more pastel shade until it reaches grey with no saturation. When using no saturation the colour is fully grey and the hue value doesn't make a difference. The grey will get lighter or darker depending on the lightness value. The statement color: hsl(240, 25%, 13%); would make a dark greyish blue, while a pure dark blue could use color: hsl(240, 100%, 13%);. As can be seen, once the basic colour positions are learnt on the colour wheel and which value is for saturation and lightness, it is fairly trivial to know how to get a different shade/tint or tweak the colour. HSL is currently supported in the latest versions of the WebKit, KHTML and Gecko rendering engines.

Opacity and transparency

traditionally there has been little control for transparency in CSS, except for making an element fully transparent with the transparent keyword or using transparency in PNG images. Much more control has been added in CSS3. The most widely supported is the opacity property. This is used quite often in the wild as IE can be given a CSS filter to mimic its behaviour. Opacity can be used to set an element to be fully transparent (opacity:0.0;), fully opaque (opacity: 1.0;) or any value in-between for varying degrees of transparency. While this is very useful, there are cases when it is desired that only the background (or foreground) have transparency applied to it. The RGB and HSL colour models have been extended to allow this by adding a alpha channel as a fourth value, with the same value range as the opacity property's value, creating HSLA and RGBA. background-color: hsla(240, 100%, 50%, 0.5); would make a semi-transparent blue background for instance. RGBA and HSLA are not as widely supported as opacity yet however.

Colour Profiles

There are a number of new properties relating to colour profiles. color-profile allows more control over the colours used by specifying a ICC colour profile. The default value is auto, which uses the sRGB colour space, unless an image includes its own ICC colour profile, in which case this is respected by the browser/user agent for that image. sRGB uses the sRGB colour space and ignores any colour profile included within a image. A named value can be set, which uses the corresponding colour profile in the browser's colour profile description database (if that profile exists), overriding any colour profile that images may have. A colour profile can also be set by specifying a URL where a colour profile is located.

A rendering intent for the colour profile can be set using rendering-intent. I don't know much about rendering intents, but a description for a valid values (apart from inherit and auto) can be found in the International Color Consortium standard. Finally a @color-profile rule can be set to group the colour profile and rendering intent. This was first defined in SVG 1.0.

6 Comments