Italsosupportsnegation(notkeyword).Forexample,wecantestwhetherabrowser
supportsdisplay: -webkit-flexordisplay: flexusingthefollowing:CSS.supports('(display: -webkit-flex) or (display: flex)');Ifyouforgettoincludetheparentheseswhenusingthissyntax,CSS.supports()
willreturnfalse.BrowsersupportforCSS.supports()mirrorsthatof@supports,withonecaveat:
Opera 12 usestheolderwindow.supportsCSS()method.Ifyouneedtosupport
Opera12,butwanttoavoidmanagingdifferentmethods,addthefollowingtoyour
JavaScriptcode:if(!window.CSS && typeof window.supportsCSS === "function"){
CSS = {};
CSS.supports = function(property, value) {
return supportsCSS(property, value)
}
}Thereisadrawbacktothiscode,however.Thewindow.supportsCSS()method
onlyacceptsargumentsinproperty,valueform.Itcan'tbeusedwiththenewer
parentheticalsyntax.Attemptingtodosowilltriggeranerror.Understanding the Cascade for @supports and @media
Asageneralguide,it'ssmarttoplaceyourat-rulesblockslaterinyourcode.Using
@supportsor@mediadoesn'tincreasethespecificityorimportanceofarule.Normal
cascaderulesapply,meaningthatanystylesdefinedafteran@supportsor@media
blockwilloverrideruleswithintheblock.ConsiderthefollowingCSS:@supports (text-decoration: underline wavy #c09) {
.title {
font-style: normal;
text-decoration: underline wavy #c09;
}
}302 CSS Master