Many of us use Modernizr to detect CSS supports. But they do not cover any case, and it uses Javascript to run. Fortunately, new techniques are appearing and today I will talk about @support to build a native version of Modernizr.
@support syntax
@supports are written like mediaqueries. We can considere it a form of CSS if statement.
@supports(width: 50vm) {
/* CSS CODE */
}The code above check if browser supports vm units.
Also you can add more than one condition. For example to check if your browser supports flexbox:
@supports( display: -webkit-flex ) or ( display: -ms-flex ) or ( display: flex ) {
/* CSS CODE */
}@supports ( color: currentColor ) {
/* CSS CODE */
}
Finally, you can add a not condition.
@supports not (display: inline-grid) {
/* CSS CODE */
}Browser support
@supports is supported in Firefox, Chrome, Android (4.4+) and Opera, but not yet Safari or Internet Explorer.
Using support in Safari and IE
Thanks to this article we can emulate @support in this browsers. The main point is it’s not possible to mix-and-match font-variant: small-caps with OpenType.
@font-face {
font-family: Questa Grande;
src: url(Questa_Grande_Regular.otf) ;
}
p { font-family: Questa Grande, sans-serif; font-size: 2rem; }
@supports ( -moz-font-feature-settings: "smcp=1" )
or ( -moz-font-feature-settings: "smcp" )
or ( -ms-font-feature-settings: "smcp" )
or ( -o-font-feature-settings: "smcp" )
or ( -webkit-font-feature-settings: "smcp" )
or ( font-feature-settings:"smcp") {
p:first-of-type:first-line {
-moz-font-feature-settings: "smcp=1";
-moz-font-feature-settings: "smcp";
-ms-font-feature-settings: "smcp";
-o-font-feature-settings: "smcp";
-webkit-font-feature-settings: "smcp";
font-feature-settings:"smcp";
}
body:before { content: 'small-caps'; display: none; }
}if the browser supports OpenType, write the CSS to support true small-caps for the first line of the first paragraph, and add the hidden content of “small-caps” to a pseudo-element in the
. This becomes our “message” to JavaScript, which is added to the bottom of the page:var smallcaps = window.getComputedStyle(document.body, ':before' ).content;
if (smallcaps!== "small-caps") {
var css = document.createElement('style');
var styles = 'p:first-of-type:first-line { font-variant: small-caps }';
if (css.styleSheet)
{ css.styleSheet.cssText = styles; }
else {
css.appendChild(document.createTextNode(styles))
}
document.getElementsByTagName("head")[0].appendChild(css);
}The script looks for this hidden text: if it doesn’t find it, the script writes a CSS fallback for the paragraph and adds it to the
of the document, so that the first-line is rendered in classic small-caps for browsers that don’t support OpenType features.