Using @support in CSS3

CSS3

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.