.title {
font-style: italic;
}Here,addingthetitleclasstoanelementwillbothitalicizeandunderlineit.The
subsequentfont–style: italic;lineoverridesthefont-style: normal;line.
That'snotwhatwewanthere,however.Instead,weneedtofliptheorderofour
rulesetsasshownsothatfont-style: normaltakesprecedenceoverfont-style:
italic;:
.title {
font-style: italic;
}@supports (text-decoration: underline wavy #c09) {
.title {
font-style: normal;
text-decoration: underline wavy #c09;
}
}Noteveryuserwillhaveabrowserthatsupportsthesefeatures,sobewaryofdefin-
ingmission-criticalstyleswithin@[email protected],usethese
featuresprogressively.Defineyourbasestyles—thestylesthateveryoneofyour
targetedbrowserscanhandle.Thenuse@supportsor@mediatooverrideandsup-
plementthosestylesinbrowsersthatcanhandlenewerfeatures.
Conclusion
Nowthatthischapteriscomplete,youshouldknowhowtouse:
■ @mediatocreateflexiblelayoutsforarangeofdevicesandinputs
■ window.matchMedia()andtheaddListener/removeListenermethodstocall
JavaScriptbasedonamediaquery
■ @supportsandtheCSS.supports()toprogressivelyenhancedocuments
Both@mediaand@supportarepowerfulandflexiblewaystoprogressivelyenhance
yourCSS.Inthenextchapter,we'lllookatusingCSSwithSVG.
Applying CSS Conditionally 303