{"id":1948,"date":"2016-10-10T04:39:30","date_gmt":"2016-10-10T09:39:30","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1948"},"modified":"2016-10-10T04:39:30","modified_gmt":"2016-10-10T09:39:30","slug":"using-supports-to-compensate-for-older-browsers","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/using-supports-to-compensate-for-older-browsers\/","title":{"rendered":"Using @Supports to Compensate for Older Browsers"},"content":{"rendered":"

Here’s a neat little trick you don’t often hear about: did you know there’s a really simple way to compensate for older browsers that might not support CSS properties\u00a0like flex-box or transitions? All you have to do is wrap the CSS rules that you think or know may not be supported by older versions of browsers in @supports brackets and the rules that aren’t supported will simply be passed over. It’s a very cool, very useful, and not very well-known CSS trick.<\/p>\n

Here it is in action:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. @supports(display: flexbox){<\/span><\/div><\/li>\n
  2.    div{<\/span><\/div><\/li>\n
  3.       display<\/span>:<\/span> flexbox;<\/span><\/div><\/li>\n
  4.    }<\/span><\/div><\/li>\n
  5. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    So in terms of syntax it’s very similar to writing a media query, except you’re passing through the parameters of the rule you want to include\u00a0if<\/em> it’s supported rather than the rules you want to include\u00a0if<\/em> the viewport is within a certain size range. It can be used with any CSS property, and is great to use with new properties that you’re really eager to use but the browser support isn’t great.<\/p>\n

    Share and Enjoy !<\/h3>
    0<\/span><\/span>Shares<\/small><\/div>
    <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

    Here’s a neat little trick you don’t often hear about: did you know there’s a really simple way to compensate for older browsers that might not support CSS properties\u00a0like flex-box or transitions? All you have to do is wrap the […]<\/p>\n

    Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1948"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1948"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1948\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}