@Supports

Test Whether Certain CSS Properties and Values are Supported

Fault Tolerant Filters

CSS is a fault-tolerant language, designed to ignore parsing errors rather than stop the parser when they are encountered. Knowledge of how parsing errors work is an important tool in the progressive enhancement toolbox as it allows us to author for the future without sacrificing older browsers.

Declaration Filters

CSS

b {
	background-color: black;
	color: white;
	background-color: rgba(255, 255, 255, 1);
	color: rgba(0, 0, 0, 1);
}

Result

Browsers that support RGBa will display this as black text on a white field. Browsers that don’t will display it as white text on a black field.

Browsers that encounter this rule set will see the selector first and recognize it as a simple type selector. They will then move inside and begin parsing the declarations. All browsers will understand the background-color value “black” and the foreground color “white”, but modern browsers that understand RGBa colors will apply a background-color of white (as RGBa: rgba(255, 255, 255, 1)) and a foreground color of black (as RGBa: rgba(0, 0, 0, 1);).

This is a pretty simple example of how to use parsing errors to deliver two different experiences to browsers with different capabilities. Let’s take it up one level higher.

Filtering Individual Rule Sets

CSS

b {
	background-color: black;
	color: white;
}

b:only-child {
	background-color: white;
	color: black;
}

Result

Browsers that support :only-child will display this as black text on a white field. Browsers that don’t will display it as white text on a black field.

In this example, we have two rule sets. The first uses the simple type selector again, and any browser that implements CSS will be able to apply the black background color and set the text to appear white.

The second rule set uses a more complicated pseudo-class selector. Older browsers (think IE 8 and earlier) were created before this selector was introduced, so they have no idea what to do with it. Per the CSS spec, these browsers ignore the entire rule set, meaning only more modern browsers will get the black text on a white field.

It’s worth noting that with compound selectors (the ones separated by commas) the selectors are not evaluated independently, so if any one of those selectors is not understood, the entire rule set is thrown out.

Filtering Multiple Rule Sets

CSS

b {
	background-color: black;
	color: white;
}

@media only screen {
	b {
		background-color: white;
		color: black;
	}
}

Result

Browsers that support media queries will display this as black text on a white field. Browsers that don’t will display it as white text on a black field.

CSS blocks provide a higher level of filterabilty by letting us isolate a collection of rule sets to specific browsers. In this example, all browsers display white text on a black field, but media query-aware browsers will override that setting and display black text on a white field.

Use @supports for Granular Control

The @supports block lets us feature detect before applying certain style rules. Let’s look at a simple example:

CSS

b {
	background-color: black;
	color: white;
}

@supports ( background: linear-gradient(0deg,white,white) ) {
	b {
		background: linear-gradient(0deg,white,white);
		color: black;
	}
}

Result

Browsers that support linear gradients (and @supports) will display this as black text on a white field. Browsers that don’t will display it as white text on a black field.

This example is pretty similar to the earlier @media block filter, but @supports allows you to specify what property and value (or value type) you need the browser to support before it decends into the block and attempts to parse the rule sets within.

The feature detection in this example is for a linear gradient (the shortest one I could think of, to save some bits). Browsers that don’t understand @supports will ignore the block and display white text on a black field. Browsers that understand @supports but don’t implement linear gradients using this syntax would also ignore the block and display white text on a black field. But browsers that do understand @supports and implement linear gradients will parse the rule set in the the block and display black text on a white field.

Polyfilling @supports

Numerous polyfills for @supports are available:

About this demo

Contributors

Last updated

Sep 17, 2015

Contribute

Fork on GitHub to contribute

Categories

Share