Conditional rules

Back to the index.

CSS Conditional Rules specification.

The conditional rules module is mostly about the syntax for at-rules such as media queries, @font-face, and the like. However, it contains the @support rule which will likelye become more important over time.

This is the mobile table. See also the desktop table.

Last major update on 6 July 2016.

@supports

The first test is only about basic support and syntax: is @supports supported at all?

[an error occurred while processing this directive] [an error occurred while processing this directive]
@supports
Basic support 		No Yes No Yes No Yes Yes No Yes No Yes No Yes 
@supports (display: block) {
	// styles
}

The styles are applied if the CSS parser recognises display: block as a valid value.

Specific cases

Let’s review two specific cases. Both show the limits of what @supports can do. To me, these test cases prove that it’s best to use @supports only for detecting support for large modules such as flexbox, and not for individual values. That makes it quite a bit less useful.

[an error occurred while processing this directive] [an error occurred while processing this directive]
transition-property: nonsense
 - corr - corr - corr inc corr inc - corr - corr - inc

@supports (transition-property: nonsense). I’d say that the browser should return false, since there is no CSS property nonsense.

However, it seems they must accept any value for this particular property, since it might be a future property that this particular browser does not support in case you try @supports (transition-property: display, nonsense). I’m not entirely convinced by this argument (if a browser doesn’t support a property it can’t transition it), but it seems to be the official answer.

I assume that rejecting nonsense was the WebKit way of doing things that Blink inherited until it changed behaviour in Chromium 35.

Inc
Incorrect: browser says it supports nonsense.
Corr
Correct: browser says it does not support nonsense.
background-attachment
 - inc - inc - inc corr inc inc - inc - inc - corr

Then a more subtle case: @supports (background-attachment: fixed | local). The point here is that in practice most mobile browsers do not support it; see also the compatibility table. Still, when asked via @support they will say there is no problem. Is this an error? Or merely an expectation that we web developers have?

Inc
Incorrect: browser says it supports background-attachment while in practice it doesn’t.
Corr
Correct: browser says it supports background-attachment and does. (Bugs are ignored.)

Tested browsers

[an error occurred while processing this directive]