SharedTutor | Tutorials For Everyone

Find your interesting tutorials in Get your tutorial about Computer, Blogging, Makemoneyonline, Games, Design, and more!

Detect Browser CSS Support With @supports Rule

Since browsers have their own own decision of the features to add, we web designers frequently have to identify in the event the browser supports particular features, only then do we fill within the gap using Polyfills (if neccessary). The popular strategy for handling these kinds of situation is with Modernizr but do you know that we also can do this using only CSS?

There can be a new rule being formulated in W3C Draft, called @supports. In this post, we are going to walk you through on what this rule functions let you detect browser features via CSS.

Getting Started with Modernizr

Using @support rule

Unlike Modernizr, the @supports rule requires property as well as the value specified. Let’s say we would like to apply CSS3 grid only to the browser that supports it. We can write it using this method.

 @support (display: grid;)  .selector  display: grid; grid-column: 3; grid-row: 1; grid-row-span: 2;   

The CSS rules beneath the @support will only be applied when the condition returns true. Given the above example, it will be applied if the browser supports display: grid. Or else, the browsers will apply other equivalent rules outside @support.

Mixing Conditions

Furthermore, were allowed to combine multiple conditions using and, or, and not operator. For example, let’s say we would like to apply rules only if your browser meets the next conditions:

  • It supports either CSS3 Grid or CSS3 Flexbox.

  • It supports CSS3 Columns.

In that case, we are able to write the conditional rules, as follows.

 @support ((display: grid;) or (display:flexbox;)) and (column-count:3;)  /* Your CSS rules here */  

Remember if you include multiple operators in a rule set, each operator must be grouped in parentheses even as have shown you above.

Writing it in the following way is invalid, and definately will confuse the browser.

 @support (display: grid;) or (display:flexbox;) and (column-count:3;)  /* Your CSS rules here */  

Final Thought

This feature is extremely good and could be very useful on several occasions.

In order for that tests, however, the browsers ought to support this rule; otherwise this process will fail. And at the time of this writing, Opera looks like it's the only browser which includes implemented this feature. So, prior to the spec is stable and possesses been included in all other browsers, delay using this process to test during the production stages. For experiments though, go full-scale.

Further Resource

  • CSS Conditional Rules Module Level 3 - W3C

Related posts:

  1. WordPress Tip: How to Detect Visitor Browser Type

  2. UI Design: An Intro to Flexible Box

  3. Adding Scalable Vector Graphics (SVG) in Unsupported Browser

  4. Getting Started with Modernizr

No comments

Post a Comment