{"id":17981,"date":"2013-08-26T18:01:22","date_gmt":"2013-08-26T10:01:22","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17981"},"modified":"2024-04-29T23:43:30","modified_gmt":"2024-04-29T15:43:30","slug":"css-supports-rule","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-supports-rule\/","title":{"rendered":"How to Use @supports Rule to Check CSS Compatibility in Browsers"},"content":{"rendered":"<p>Web developers often face the challenge of ensuring that browsers can handle specific features. To address gaps in browser capabilities, we sometimes use <a href=\"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/\">Polyfills<\/a>. While many turn to <a href=\"https:\/\/modernizr.com\/\">Modernizr<\/a> for this purpose, did you know you can also achieve this using only CSS?<\/p>\n<p>The W3C Draft is developing a new rule, known as <code><a href=\"https:\/\/drafts.csswg.org\/css-conditional\/\">@supports<\/a><\/code>. This rule helps you determine whether a browser supports certain CSS features directly through CSS. In this blog post, we will explain how @supports works and how it can be useful in detecting browser capabilities.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/modernizr\/\" class=\"ref-block__link\" title=\"Read More: Getting Started with Modernizr JavaScript Library\" rel=\"bookmark\"><span class=\"screen-reader-text\">Getting Started with Modernizr JavaScript Library<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/modernizr.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-16333 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/modernizr.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Getting Started with Modernizr JavaScript Library<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tModernizr is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>How to Use the @supports Rule<\/h2>\n<p>The <code>@supports<\/code> rule differs from Modernizr in that it requires both a property and a value to be specified. For example, if we want to apply CSS3 grid layouts only to browsers that support them, we can structure the code as follows.<\/p>\n<pre>\r\n@supports (display: grid) {\r\n  .selector {\r\n    display: grid;\r\n    grid-column: 3;\r\n    grid-row: 1;\r\n    grid-row-span: 2;\r\n  }\r\n}\r\n<\/pre>\n<p>Under the <code>@supports<\/code> rule, CSS declarations are only executed if the condition is <strong>true<\/strong>. In the example provided, the grid layout will only be applied if the browser supports the <code>display: grid<\/code> property. Otherwise, the browser will default to other specified rules outside of <code>@supports<\/code>.<\/p>\n<h2>Combining Conditions with @supports<\/h2>\n<p>You can also mix multiple conditions using the <code>and<\/code>, <code>or<\/code>, and <code>not<\/code> operators in the <code>@supports<\/code> rule. For instance, imagine you want to apply specific CSS rules only under certain conditions:<\/p>\n<ul>\n<li>The browser supports either <strong>CSS3 Grid<\/strong> or <strong>CSS3 Flexbox<\/strong>.<\/li>\n<li>The browser supports <strong>CSS3 Columns<\/strong>.<\/li>\n<\/ul>\n<p>Here\u2019s how you could write the conditional CSS rules:<\/p>\n<pre>\r\n@supports \r\n((display: grid) or (display: flexbox)) \r\nand (column-count: 3) {\r\n  \/* Your CSS rules here *\/\r\n}\r\n<\/pre>\n<p>It\u2019s important to use parentheses to group each condition correctly. This ensures the browser interprets the rules as intended. The following example shows an incorrect format that could confuse the browser:<\/p>\n<pre>\r\n@supports \r\n(display: grid) or (display: flexbox) and (column-count: 3) {\r\n  \/* Your CSS rules here *\/\r\n}\r\n<\/pre>\n<h2>Final Thoughts on @supports<\/h2>\n<p>This feature is highly beneficial and can be incredibly useful in various situations.<\/p>\n<p>However, for the <code>@supports<\/code> rule to be effective, it must be supported by the browser in use; if not, the method will not work. As of this writing, <strong>Opera<\/strong> is the only browser that has implemented this feature fully. Therefore, until the specification is finalized and widely adopted by all major browsers, it\u2019s advisable to refrain from using this method in production environments. For experimental purposes, though, feel free to use it extensively.<\/p>","protected":false},"excerpt":{"rendered":"<p>Web developers often face the challenge of ensuring that browsers can handle specific features. To address gaps in browser capabilities, we sometimes use Polyfills. While many turn to Modernizr for this purpose, did you know you can also achieve this using only CSS? The W3C Draft is developing a new rule, known as @supports. This&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Use @supports Rule to Check CSS Compatibility in Browsers - Hongkiat<\/title>\n<meta name=\"description\" content=\"Web developers often face the challenge of ensuring that browsers can handle specific features. To address gaps in browser capabilities, we sometimes use\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-supports-rule\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use @supports Rule to Check CSS Compatibility in Browsers\" \/>\n<meta property=\"og:description\" content=\"Web developers often face the challenge of ensuring that browsers can handle specific features. To address gaps in browser capabilities, we sometimes use\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-supports-rule\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-08-26T10:01:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T15:43:30+00:00\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-supports-rule\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-supports-rule\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Use @supports Rule to Check CSS Compatibility in Browsers\",\"datePublished\":\"2013-08-26T10:01:22+00:00\",\"dateModified\":\"2024-04-29T15:43:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-supports-rule\\\/\"},\"wordCount\":370,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"CSS\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-supports-rule\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-supports-rule\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-supports-rule\\\/\",\"name\":\"How to Use @supports Rule to Check CSS Compatibility in Browsers - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2013-08-26T10:01:22+00:00\",\"dateModified\":\"2024-04-29T15:43:30+00:00\",\"description\":\"Web developers often face the challenge of ensuring that browsers can handle specific features. To address gaps in browser capabilities, we sometimes use\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-supports-rule\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-supports-rule\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-supports-rule\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use @supports Rule to Check CSS Compatibility in Browsers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use @supports Rule to Check CSS Compatibility in Browsers - Hongkiat","description":"Web developers often face the challenge of ensuring that browsers can handle specific features. To address gaps in browser capabilities, we sometimes use","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css-supports-rule\/","og_locale":"en_US","og_type":"article","og_title":"How to Use @supports Rule to Check CSS Compatibility in Browsers","og_description":"Web developers often face the challenge of ensuring that browsers can handle specific features. To address gaps in browser capabilities, we sometimes use","og_url":"https:\/\/www.hongkiat.com\/blog\/css-supports-rule\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-08-26T10:01:22+00:00","article_modified_time":"2024-04-29T15:43:30+00:00","author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-supports-rule\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-supports-rule\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Use @supports Rule to Check CSS Compatibility in Browsers","datePublished":"2013-08-26T10:01:22+00:00","dateModified":"2024-04-29T15:43:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-supports-rule\/"},"wordCount":370,"commentCount":11,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["CSS"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-supports-rule\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-supports-rule\/","url":"https:\/\/www.hongkiat.com\/blog\/css-supports-rule\/","name":"How to Use @supports Rule to Check CSS Compatibility in Browsers - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2013-08-26T10:01:22+00:00","dateModified":"2024-04-29T15:43:30+00:00","description":"Web developers often face the challenge of ensuring that browsers can handle specific features. To address gaps in browser capabilities, we sometimes use","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-supports-rule\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-supports-rule\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-supports-rule\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use @supports Rule to Check CSS Compatibility in Browsers"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4G1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17981","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17981"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17981\/revisions"}],"predecessor-version":[{"id":71768,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17981\/revisions\/71768"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17981"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}