Web­au­to­ren haben ver­schie­dene Mög­lich­kei­ten, den Gel­tungs­be­reich von CSS auf bestimmte Medien ein­zu­schrän­ken, sowohl bei der Ein­bin­dung eines Style­s­heets als auch für bestimmte Regeln inner­halb des Stylesheets.

Mit CSS3 Media Que­ries ist es mög­lich, die Ein­bin­dung von CSS nicht nur von einem bestimm­ten Medium abhän­gig zu machen, son­dern auch davon, ob das Medium oder Aus­ga­be­ge­rät bestimmte Merk­male auf­weist oder nicht.

Web­au­to­ren kön­nen so bei­spiels­weise auf die Breite des Brow­ser­fens­ters rea­gie­ren und ein Spal­ten­lay­out auf­lö­sen, wenn die Breite für die mehr­spal­tige Dar­stel­lung nicht mehr aus­reicht. Oder sie kön­nen spe­zi­elle Style­s­heets für die Dar­stel­lung auf dem iPhone oder iPad bereit stel­len, abhän­gig davon, wie das Gerät in der Hand gehal­ten wird. Das Gute daran ist, dass fast alle aktu­el­len Brow­ser mit CSS Media Que­ries umge­hen können!

Die­ser Vor­trag, den ich auf dem Word­Camp in Ber­lin gehal­ten habe, führt ein in die Funk­ti­ons­weise von CSS Media Que­ries und zeigt einige Anwendungsbeispiele.