{"id":137032,"date":"2024-10-11T15:17:43","date_gmt":"2024-10-11T09:47:43","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=137032"},"modified":"2024-10-16T15:09:23","modified_gmt":"2024-10-16T09:39:23","slug":"using-supports-to-fork-css-css-selectors-typography-and-more","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/using-supports-to-fork-css-css-selectors-typography-and-more\/","title":{"rendered":"Using @supports to fork CSS | CSS Selectors, Typography and More"},"content":{"rendered":"\n<p>The @supports at-rule allows you to conditionally apply CSS rules based on whether the browser supports specific CSS features. This is particularly useful for creating responsive designs that gracefully degrade on older browsers.<\/p>\n\n\n\n<p><strong>Basic Syntax<\/strong><\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>@supports (feature: value) {<\/p>\n\n\n\n<p>&nbsp; \/* Styles to apply if the feature is supported *\/<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>Example: Using CSS Grid<\/strong><\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>@supports (display: grid) {<\/p>\n\n\n\n<p>&nbsp; .container {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; display: grid;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; grid-template-columns: 1fr 1fr;<\/p>\n\n\n\n<p>&nbsp; }<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>In this example, the grid layout will only be applied if the browser supports the display: grid property. If not, the browser will fallback to the default layout.<\/p>\n\n\n\n<p><strong>Additional Features<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Multiple conditions:<\/strong> You can combine multiple conditions using logical operators (and, or, not).<\/li>\n\n\n\n<li><strong>Feature queries:<\/strong> You can query specific CSS features, such as flexbox or calc().<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>@supports (display: flex) and (calc(100vw &#8211; 20px) &gt; 0) {<\/p>\n\n\n\n<p>&nbsp; \/* Styles to apply if Flexbox is supported and the viewport width is greater than 20px *\/<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>Best Practices<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Test thoroughly:<\/strong> Test your website on different browsers and devices to ensure that the fallback styles are working as expected.<\/li>\n\n\n\n<li><strong>Use progressive enhancement:<\/strong> Start with a basic layout that works on all browsers and gradually add more features using @supports for browsers that support them.<\/li>\n\n\n\n<li><strong>Consider feature detection:<\/strong> In addition to @supports, you can use JavaScript feature detection to check for browser support and apply appropriate styles.<\/li>\n<\/ul>\n\n\n\n<p>The @supports at-rule is a powerful tool for creating responsive web designs that gracefully degrade on older browsers. By using @supports, you can leverage modern CSS features while ensuring that your website remains accessible to a wider audience.<\/p>\n\n\n\n<div class=\"wp-block-buttons alignwide is-content-justification-space-between is-layout-flex wp-container-core-buttons-is-layout-3d213aab wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/responsive-viewport-relative-lengths-css-selectors-typography-and-more\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>&lt;&lt;Prev<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certificate-in-responsive-web-design\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Back To The Tutorial<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/web-typography-css-selectors-typography-and-more\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Next&gt;&gt;<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The @supports at-rule allows you to conditionally apply CSS rules based on whether the browser supports specific CSS features. This is particularly useful for creating responsive designs that gracefully degrade on older browsers. Basic Syntax CSS @supports (feature: value) { &nbsp; \/* Styles to apply if the feature is supported *\/ } Example: Using CSS&#8230;<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-137032","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using @supports to fork CSS | CSS Selectors, Typography and More - Tutorial<\/title>\n<meta name=\"description\" content=\"Achieve exam success by preparing for Certified Responsive Web Design exam with expert study guide. Get Certified Now!\" \/>\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.vskills.in\/certification\/tutorial\/using-supports-to-fork-css-css-selectors-typography-and-more\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using @supports to fork CSS | CSS Selectors, Typography and More - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Achieve exam success by preparing for Certified Responsive Web Design exam with expert study guide. Get Certified Now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/using-supports-to-fork-css-css-selectors-typography-and-more\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-16T09:39:23+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/using-supports-to-fork-css-css-selectors-typography-and-more\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/using-supports-to-fork-css-css-selectors-typography-and-more\/\",\"name\":\"Using @supports to fork CSS | CSS Selectors, Typography and More - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2024-10-11T09:47:43+00:00\",\"dateModified\":\"2024-10-16T09:39:23+00:00\",\"description\":\"Achieve exam success by preparing for Certified Responsive Web Design exam with expert study guide. Get Certified Now!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/using-supports-to-fork-css-css-selectors-typography-and-more\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/using-supports-to-fork-css-css-selectors-typography-and-more\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/using-supports-to-fork-css-css-selectors-typography-and-more\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using @supports to fork CSS | CSS Selectors, Typography and More\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using @supports to fork CSS | CSS Selectors, Typography and More - Tutorial","description":"Achieve exam success by preparing for Certified Responsive Web Design exam with expert study guide. Get Certified Now!","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.vskills.in\/certification\/tutorial\/using-supports-to-fork-css-css-selectors-typography-and-more\/","og_locale":"en_US","og_type":"article","og_title":"Using @supports to fork CSS | CSS Selectors, Typography and More - Tutorial","og_description":"Achieve exam success by preparing for Certified Responsive Web Design exam with expert study guide. Get Certified Now!","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/using-supports-to-fork-css-css-selectors-typography-and-more\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-10-16T09:39:23+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/using-supports-to-fork-css-css-selectors-typography-and-more\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/using-supports-to-fork-css-css-selectors-typography-and-more\/","name":"Using @supports to fork CSS | CSS Selectors, Typography and More - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2024-10-11T09:47:43+00:00","dateModified":"2024-10-16T09:39:23+00:00","description":"Achieve exam success by preparing for Certified Responsive Web Design exam with expert study guide. Get Certified Now!","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/using-supports-to-fork-css-css-selectors-typography-and-more\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/using-supports-to-fork-css-css-selectors-typography-and-more\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/using-supports-to-fork-css-css-selectors-typography-and-more\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Using @supports to fork CSS | CSS Selectors, Typography and More"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=137032"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137032\/revisions"}],"predecessor-version":[{"id":137357,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137032\/revisions\/137357"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=137032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=137032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=137032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}