The One CSS Feature I Really Want

09 February 2016

There are many cutting edge CSS features/properties I wish were more widely supported.

Variables
Flexbox
Transforms
Animations

The list can go on. However, there is one feature, introduced in CSS3, that I cannot wait to be supported in all, or at the least current versions of the major browsers. This is @supports.

The Magic That is @supports #

The @supports rule is a conditional group rule, similar to media queries, but for detecting if the current user agent supports a particular CSS property-value pair. Like media queries, if the statement given evaluates to true, the declarations within the group are applied.

The @supports rule allows us to detect feature support in four ways -

1. Detect if a property-value pair is supported #

The most basic way we can use the rule is to detect if a single CSS property-value pair is supported. For example, if we want to check if the current flexbox syntax is supported, we can write -

@supports ( display: flex ) {
  .foo { display: flex; }
}

For browsers such as Internet Explorer 9, everything within the block will be ignored.

2. Detect if all of several property-value pairs are supported #

Sometimes, we need to use properties in combination. With the and rule, we can detect if a list of property-value pairs are supported by the browser.

@supports ( ( font-kerning: normal ) and
            ( font-feature-settings: "kern" 1 ) ) {
  .foo {
    font-kerning: normal;
    font-feature-settings: "kern" 1;
  }
}

3. Detect if either of several property-value pairs are supported #

We can also detect if any of a list of properties are supported. This can be useful when trying to determine if a prefixed or unprefixed version of a property is supported.

@supports ( ( tranform: translate(-50%, -50%) ) or
            ( -webkit-tranform: translate(-50%, -50%) ) ) {
  .foo {
    -webkit-tranform: translate(-50%, -50%);
    tranform: translate(-50%, -50%);
  }
}

4. Detect if a property-value pair is not supported #

Being able to detect if certain property-value pairs are supported is useful, but also being able to detect if a pair is not supported is even more useful. With the not rule, we can do just that.

@supports not ( display: flex ) {
  .foo { display: table; }
}

Even more magically, we can detect if one property-value pair is supported and another is not supported. For example, we can target browsers that only support the old flexbox syntax.

@supports ( display: flexbox )
          and
          ( not ( display: flex ) ) {
  .foo { display: flexbox; }
}

😍😍😍

Why @supports? #

The reason why I want this feature above all the other fun/crazy/cool features in CSS is because, currently, I can’t use those fun/crazy/cool features.

If a browser, such as IE or Opera Mini, doesn’t support a feature, I simply cannot use it because a lot of the websites I build are for an audience that use those browsers.

The @supports rule allow will allow me to have the best of both worlds - being able to write the fun, cutting-edge stuff for the browsers that support it, while writing the old tried-and-tested stuff for the browsers that don’t.

Is @supports Supported? #

The global support for @supports is currently at about 70%.

Data on support for the css-featurequeries feature across the major browsers from caniuse.com

Even though @supports is currently supported by the majority of browsers, I can’t feel comfortable using it until at least all current browser versions support it. If it only works in some browsers, that sort of defeats the point of it.

So I guess this is my open letter, pleading to those browsers, to support @supports. On the day that I see that all current versions of major browsers support this, this will be me.

Celebration