CSS Conditional Rules

CSS Conditional Rules , as the name implies, are conditional constructs that can be applied in CSS itself. They implement a check on the support of properties by the current browser with the ability to group conditional expressions using logical operators and, orand not. In this post I would like to tell, among other things, about the syntax of this CSS3 module and the current support of its browsers.

What's new?

So, what is the qualitative difference between CSS Conditional Rules and, for example, conditional comments? I would single out two main ones:

• it is a check of browser support for the specified properties, not a check of the name and version of the browser.
• this is the implementation of conditional constructs directly in CSS, so we can control the “flow of application” of CSS properties, and we don’t select in the HTML code which stylesheets prepared for different browsers should be connected; simply put, if we need to implement a property unsupported by all the necessary browsers, we have a flexible tool for degradation.

But in practice?

The syntax is simple. For example, we have a property font-sizein which we want to use a function calc()to calculate the font size, and as an argument to this function we want to pass an expression that calculates the font size from the font size of the root element body. But how many browsers does it support today? Not enough. What to do with the rest? Using CSS3 conditions, the question will get this answer:

body {
    font-size: 14px;
}
@supports (font-size: calc(1rem + 12px)) {
    h1 {
        font-size: calc(1rem + 12px);
    }
}
@supports not (font-size: calc(1rem + 12px)) {
    h1 {
        font-size: 26px;
    }
}

The example is redundant, but the logic is visible. A rule @supportsprecedes a conditional construct. A conditional expression is what is in parentheses, with parentheses always required. We can combine conditional expressions with andand orand negate expressions with not.

At the same time, in order to avoid situations when the condition you have drawn up can be interpreted in more than one way, it is necessary to group the conditions using parentheses, this is clearer with an example. Consider an example from the specification:

/* Это неправильный код! */
@supports (transition-property: color) or
          (animation-name: foo) and
          (transform: rotate(10deg)) {
}

It would seem that the syntax is correct, so what more? The problem is that this design can be interpreted in different ways. What did we mean: do we need support [( transitionor animation) and ( transform)] or [( transition) or ( animationand transform)]? Unknown That is why we should use parentheses the same way I just did it, describing the possible options. The following variations of the same code will be correct.

@supports ((transition-property: color) or
          (animation-name: foo)) and
          (transform: rotate(10deg)) {
}
@supports (transition-property: color) or
          ((animation-name: foo) and
          (transform: rotate(10deg))) {
}

Well, when?

And now about the status of support at the moment. The specification itself is in the status of a working draft. In stable versions today this is not supported by anyone. On August 3, support @supportsappeared in Firefox 17.0a1, that is, now it is in the Firefox Aurora branch and will be in Beta somewhere in October. I have not heard anything about support with other browsers (maybe someone from the hawkers will tell you). In Firefox 17 itself, this option may be disabled in the settings if the developers decide that the specification is not yet stable enough.

UPD: in Beta Opera 12.10 appeared @supports support.