Explain the usage of @supports in CSS

Browser-based feature detection you should already be familiar with, especially after the launch of Modernizr.js. In fact, the Internet has also been the norm, can be based on CSS to do some feature detection, that is, @supports, this feature has been more than two years, the previous browser support is not enough, now WebKit nightly also began to support, that is, Safari 9 will support, so, Blink+webkit+gecko are supported, only IE browser is not supported, well, this is more convenient for IE differentiated processing.

However, @supports can not completely replace the characteristics of JS detection method, it only supports the detection of CSS properties, other HTML5 API and WEBP technology such as testing or need JS to complete.

Usage:

@supports is as simple as media query:

CSS code copy content to clipboard

@supports (Prop:value) {/* More styles */}

@supports also allows you to use a variety of complex combinations for feature detection.

Basic usage:

CSS code copy content to clipboard

@supports (Display:flex) {div {Display:flex}}}

You can use this method to detect a variety of basic CSS properties.

Not keyword

Just like this:

CSS code copy content to clipboard

@supports not (Display:flex) {div {float:left}/* Alternative styles/}

Personal feeling some chicken, support @supports browser will not support a variety of CSS properties? But everything is not absolute, this situation will still be possible. Well, you can try the private prefix.

Multi-condition detection

CSS code copy content to clipboard

@supports (display:-webkit-flex) or (display:-moz-flex) or (Display:flex) {/* Use styles here/}

/* and/@supports (Display:flex) and (-webkit-appearance:caret) {/* Something crazy here/}

You can also mix the OR and and statements together.

CSS code copy content to clipboard

@supports (display:-webkit-flex) or (display:-moz-flex) or (Display:flex)) and (-webkit-appearance:caret) {/* Use St yles here */}

or more complicated:

CSS code copy content to clipboard

@supports (text-align-last:justify) or (-moz-text-align-last:justify) {.../* specific CSS applied to simulate text -align-last:justify */}

JS method

You can also use JavaScript to do similar testing, and the method is simple:

CSS code copy content to clipboard

Boolvalue = Css.supports (propertyname, value); Boolvalue = Css.supports (supportcondition);

Both methods are available, and a bool value is returned. Like what:

CSS code copy content to clipboard

result = Css.supports ("Text-decoration-style", "blink");

result = Css.supports ("Display", "flex");

result = Css.supports ("(transform-origin:5% 5%)");

result = Css.supports (Transform-style:preserve) or (-moz-transform-style:preserve) or (-o-transform-style:preser ve) or (-webkit-transform-style:preserve) ");

Use

The biggest use is to do the CSS feature judgment, no longer in the JS (or the traditional JS method), Modernizr.js students may be very impressed, Modernizr will be added to the HTML tags in a variety of classes to distinguish, other JS method is similar to the implementation of ideas. Now you can use @supports to differentiate or do browser differentiation.

Browser support

Chrome 28+

Opera 12.1+

firefox22+

Safari 9+