Questions From The New Cascade

The text colour is yellow and the background colour is red.

The first thing to understand is the @import. Normally, this would link to an external style sheet, but here for the benefit of having everything in one place for demonstration purposes, I've used a data url.

The "layer" keyword at the end tells the browser to place all the contents of the imported resource into a layer. The layer is not named, so it is an "anonymous" layer. Anonymous layers work like named ones, except they can't be referenced so once defined they can't be added to, and they can't be manipulated in the layer order.

So in this case, the @import is exactly equivalent to

@layer {
    body.myBody {
       background-color:blue;
       font-size:4em;
    }
    * {
       color:yellow !important;
    }
}

Taking the background colour first where all the declarations are non-important, if the layer was not involved and specificity was the determining factor, the body.myBody { background-color:blue; } rule would beat the body { background-color: red; } rule and the background would be blue.

But for non-important declarations, rules in a layer are always lower precedence than rules not in a layer, so the body { background-color: red; } rule wins.

For !important declarations like the text colour, the opposite applies. Layered rules take precedence over unlayered rules regardless of specificity, so the * { color:yellow !important; } rule wins.

The background is still red, but now the text color is white.

In the answer to question one, I explain that !important layered styles have precedence over !important unlayered styles regardless of specificity. Yet here the inline style wins.

In CSS 2, inline styles were unambiguously part of specificity. There any innumerous guides to specificity that will tell you that.

Yet in CSS 3 until now, the relationship between inline styles and specificity has had a distinctly ambiguous air. The specifications have neither wholly placed inline styles as part of specificity, nor provided any alternative.

With Cascade layers that ambiguity has finally been removed. Inline styles are no longer part of specificity! Instead they have their own precedence level in the cascade called "Element-Attached Styles". Element-Attached Styles have a precedence which is above both cascade layers and specificity. So an Element-Attached style wins over layered styles even when !important is used on both.

The image sizes are 200px x 200px, 100px x 100px & 150px x 150px respectively.

Image alpha is 200px x 200px. Until the introduction of cascade layers, the values of the HTML height and width attributes were treated as presentational hints at the start of the author origin style sheets with a specificity of 0, so any matching CSS rules would take precedence over them, and the HTML dimensions are only a resort to be used if CSS doesn't provide any. So the CSS provided dimensions win.

Image beta is 100px x 100px. Introducing cascade layers produces a slight problem though. Because non-important layered styles have lower precedence that unlayered styles, if the HTML attribute presentational hints were treated as unlayered styles, then they'd have precedence over any CSS in a layer. That not ideal. So a new origin has been created for them called the "author presentational hint origin". This has precedence lower than all layered and unlayered styles.

However, the "revert" keyword has well established behaviour. When effective in an author origin style sheet, it will revert the author origin matching styles including the presentational hints. So to maintain that behaviour, "revert" has been slightly redefined to include the reverting of the "author presentational hint origin".

As a result, the "revert" has the effect of taking the size of the image back to its intrinsic dimensions.

Image gamma is 150px x 150px. You might think that as there don't appear to be any cascade layers in use in the CSS, that "revert-layer" would either do nothing at all, or do the same as "revert". In fact, since it's in an unlayered style, it reverts the unlayered styles of the image dimensions.

But it is free from any backward-compatibility restrictions, so it doesn't revert the styles of the "author presentational hint origin", and so the image is displayed using the dimensions taken from the HTML attributes.