@supports not (display: flex) {
nav {
display: table;
}
nav ul {
display: table-row;
}
nav li {
display: table-cell;
}
}Thenotkeywordcanonlybeusedtonegateoneconditionatatime.Inotherwords,
@supports not (text-decoration-color: #c09) and (text-decoration-style:
double)willfailtowork.Butyoucancombinetwotestsintoasinglecondition.
Useanoutersetofparentheses;forexample,@supports not ((text-decoration-
color: #c09) and (text-decoration-style: double)).
CSS.supports DOM API
Alongwiththe@supportsrulecomesascriptableAPI:CSS.supports().Thinkof
itasaCSS-onlyversionofModernizr.It'sperfectforwhenyouonlyneedtotest
CSSfeaturesupport.CSS.supports()alwaysreturnsaBooleantrueorfalsevalue
dependingonwhetherthebrowsersupportsthatpropertyandvaluecombination.
BecauseCSS.supports()hasevolvedsinceitwasoriginallyproposed,thereare
twosyntaxvariations.ThefirstandmostwidelysupportedisCSS.supports(prop-
erty, value).Forexample:
CSS.supports('text-decoration', 'underline wavy #e91e63');Withthissyntax,boththepropertyandvaluemustbeenclosedinquotes.Arguments
mustbeseparatedbyacomma.Thenewersyntaxistheparentheticalsyntax,which
[email protected],thecon-
ditionmustbewrappedinparentheses:
CSS.supports('(text-decoration: underline wavy #e91e63)')Thisparentheticalsyntaxisfarmorerobustthantheoriginal.Withit,wecantest
multipleconditionsusingconjunctions(andkeyword)ordisjunctions(orkeyword).
Applying CSS Conditionally 301