widespread.Browsersupportfor@supports(andtheCSS.supportsJavaScriptAPI)
isalittlepatchier,butit'sstillsupportedwidelyenoughtobediscussedhere.Media Queries and @media
The@mediaruleanditsbasicsyntaxwasoriginallydefinedbytheCSS2.1specific-
ation.^4 BuildingonthetenmediatypesdefinedbyHTML4,^5 theintentof@media
wastoenabledeveloperstoservedifferentstylestodifferentmediatypesand
devices.Usingthe@mediarule,ormediaHTMLattribute,wecouldspecifydistinct
stylesforprintorscreen.TheMediaQueriesLevel 3 specification^6 extendedthe@mediarule,addingsupport
formediafeaturesinadditiontomediatypes.Mediafeaturesincludeconditions
suchaswindowwidth,screenorientation,andresolution.Ifyou'veeverpracticed
responsivewebdesign,you'reprobablyfamiliarwiththesefeaturetestsandtech-
niques.MostofthemediatypesdefinedbyHTML4aredeprecatedinMediaQueriesLevel
4 specification,^7 thelatestversionofthespecification.Fourmediatypesaredefined
intheLevel 4 specification:all,screen,print,andspeech.Ofthose,onlythe
firstthreehavewidespreadbrowsersupport.MediaQueriesLevel 4 does,however,addafewmorefeaturestoquery,suchas
pointerandlight-level.Again,mostoftheseareyettobesupportedbybrowsers.
We'llbrieflydiscusssomeoftheseintheexamplesthatfollow.Succession Planning
There'sagoodchancetheseremainingmediatypeswillalsobecomedeprecated
infavoroffeaturetestsinafuturemediaqueriesspecification.Mediaqueriesenjoyawiderangeofsupport,asshowninTable7.1.InternetExplorer
9,however,doesnotsupportmatchMedia,theDOMscriptinginterfacefortesting(^4) http://www.w3.org/TR/CSS21/media.html#media-sheets
(^5) http://www.w3.org/TR/html4/types.html#h-6.13
(^6) http://dev.w3.org/csswg/css3-mediaqueries/
(^7) http://dev.w3.org/csswg/mediaqueries-4/
278 CSS Master