CSS Master

isLandscape.addEventListener('change', toggleClass); // Add listener

isLandscape.removeEventListener('change', toggleClass); // Remove

➥ listener

Mostbrowsersareyettoimplementthischange,andstillsupportaddListener/re-
moveListenerexclusively.ChromeandOperaaretheexceptions.Inthosebrowsers,
addListener/removeListenerarealiasesofaddEventListener/removeEventListen-
er.UseaddListenerandremoveListeneruntilotherbrowserssupportthenewer
specification.

Conditional Rules with @supports

Let'smoveintoamoreexperimentalfeatureofconditionalCSS:@supports.The
@supportsruleletsyouaddCSSrulesbasedonwhetherthebrowsersupportsa
particularpropertyandvalue."Andvalue"iskey.SomeCSSpropertiesandvalues
havebeenredefinedorexpandedbetweenCSS2.1andCSSLevel3.Using@supports
letsustestforthosechanges.Like@media,@supportsconsistsoftwoparts:theCSS
at-rule,andaDOM-basedAPIforusewithJavaScript.Unfortunately,@supports
enjoyslesssupportthan@media,asevidentinTable7.4.

Table 7.4. Support for @supports (Source CanIUse.com^14 )

Internet Firefox Chrome Safari Opera Android UC Browser
Explorer
Noa 23+ 28+ 9+ 12.1+b 4.4+ No
aMicrosoftEdgesupports@supports.
bVersion12.1usestheolderwindow.supports CSSmethod.Versions15+useCSS.supports.

Whymightweuse@supports?Here'sascenario:asoriginallyspecified,^15 display
allowedfourpossiblevalues—block,inline,list-item,andnone.LatertheCSS
FlexibleBoxLayoutModuleLevel 116 (betterknownasflexbox)andCSSDisplay
ModuleLevel 317 specificationsaddedflexandinline-flexasnewvaluesfor

(^14) http://caniuse.com/#feat=css-featurequeries
(^15) http://www.w3.org/TR/CSS1/#display
(^16) http://dev.w3.org/csswg/css-flexbox/
(^17) http://dev.w3.org/csswg/css-text-decor-3/
Applying CSS Conditionally 299