display.With@supports,wecandefineCSSrulesthatwillbeappliedonlywhen
thebrowsersupportsdisplay: flex;@supports (display: flex) {
nav ul {
display: flex;
}
}Todefineacondition,wrapthepropertyandvalueyou'dliketotestinasetof
parenthesesasshown.Bothportionsarerequired;aconditionsuchas@supports
(hyphens)willnotworkasatest.Tocombineconditions,usetheandkeyword.Forexample,ifyouwantedtoapply
styleswhenboththetext-decoration-colorandtext-decoration-styleare
supported,youcouldusethefollowing:@supports (text-decoration-color: #c09) and (text-decoration-style:
➥ double) {
.title {
font-style: normal;
text-decoration: underline double #f60;
}
}The@supportssyntaxalsoallowsdisjunctionsusingtheorkeyword.Disjunctions
areespeciallyusefulfortestingvendor-prefixedpropertysupport.Let'srevisitour
display: flexexample.SomerecentversionsofWebKit-basedbrowserssuchas
Safari 8 requireavendorprefixforflexboxsupport.Wecanaugmentour@supports
conditiontotakethatintoaccount:@supports (display: flex) or (display: -webkit-flex) {
nav ul {
display: -webkit-flex;
display: flex;}
}Finally,wecanalsodefineacollectionofstylesifaconditionisn'tsupportedby
usingthenotkeyword:300 CSS Master