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 su...

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



blogging,255,computing,705,ebook,53,ebooks,354,freebies,358,graphics,225,IFTTT,3,internet,207,mobile,252,news,99,sharedtutor,78,slider,2,video tutorials,5,VideoHive,1156,YouTube,1005,
SharedTutor Tutorials For Everyone: Detect Browser CSS Support With @supports Rule
Detect Browser CSS Support With @supports Rule
SharedTutor Tutorials For Everyone
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy