Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

supports

The @supports rule will only apply its contained styles if the browser software supports the property+value pair specified. If the 'not' keyword is applied it will apply its contained styles only if the browser software does not support the property+value pair specified. Authors may also provide the 'or' and 'and' keywords to get the exact logic they require in the condition.

The idea behind it is that browsers that do not support features can get served default styles as a fallback, while new browsers that do support the features get served the new feature syntax. Authors can also make whole sections or elements display:none if the features for a certain applet are not present in the browser, and a hidden section can be made display:block only to people using the feature-lacking browser software.

Code Example

Browsers that do not support the specified property will get the default red background. Browsers that do support the property will get the green background. <style> body { background: red; } @supports ( animation-duration: 2s ) { body { background: green; } } </style> Using the 'not' keyword we could reverse the logic. <style> body { background: green; } @supports not ( animation-duration: 2s ) { body { background: red; } } </style> Using the 'or' keyword authors can expand the condition logic to evaluate support for more properties in the same @support block. <style> body { background: red; } @supports ( animation-duration: 2s ) or ( animation-delay: 1.5s ) or ( animation-direction: reverse ) { body { background: green; } } </style> Using the 'and' keyword authors can produce even more logic. In the example below if the browser supports the transform property, or if it supports the transition and animation properties, it gets the styles contained in the @supports block. <style> body { background: red; } @supports ( transform: translateX( 500px ) ) or ( transition-property: left ) and ( animation-name: box-move ) { body { background: green; } } </style>

Official Documentation

http://www.w3.org/TR/css3-conditional/#at-supports

CSS

At Rules

charsetcounter styledocumentfont facefont feature valuesimportkeyframesmedianamespacesupports