CSS Media Queries

Die Sprache CSS („Cascading Style Sheets“, zu Deutsch „gestufte Ge­stal­tungs­bö­gen“) bildet mit HTML und Ja­va­Script das Grund­ge­rüst für die Ent­wick­lung moderner Websites. Bei CSS handelt es sich um eine Pro­gram­mier­spra­che, es werden jedoch keine einzelnen Schritte für die Lösung eines Problems be­schrie­ben. Statt­des­sen wird ein Ziel definiert, das erreicht werden soll. Damit ist CSS ähnlich wie SQL eine de­kla­ra­ti­ve Sprache.

Teil von CSS sind die so­ge­nann­ten Media Queries, die die Ei­gen­schaf­ten eines Aus­ga­be­ge­räts abfragen. Sie werden fürs Re­spon­si­ve Webdesign ein­ge­setzt. Wie funk­tio­niert dies genau?

Die CSS Media Queries wurden mit der CSS3-Spe­zi­fi­ka­ti­on ein­ge­führt. Ein Media Query bindet die Zuweisung von CSS-Ei­gen­schaf­ten eines Elements an eine oder mehrere Medium-Kon­di­tio­nen. Im ein­fachs­ten Fall wird un­ter­schie­den, auf welchem Medium In­for­ma­tio­nen dar­ge­stellt werden – auf einem Bild­schirm, als gedruckte Seite (dies schließt auch die Ausgabe als PDF ein) oder als vor­ge­le­se­ner Text:

Ein CSS Media Query wird innerhalb eines CSS-Code­blocks über eine spezielle '@media'-Regel fest­ge­legt. Die darin ent­hal­te­nen CSS-Se­lek­to­ren und -Regeln werden nur unter der an­ge­ge­be­nen Bedingung aktiviert. So lassen sich z. B. nicht dar­stell­ba­re Elemente bei der Ausgabe als gedruckte Seite verbergen:

Neben dem zum Einsatz kommenden Medium lassen sich mit CSS Media Queries gezielt Ei­gen­schaf­ten des je­wei­li­gen Mediums abfragen. CSS Media Queries sind damit das zentrale tech­ni­sche Feature, das Re­spon­si­ve Webdesign erst er­mög­lich­te.

Re­spon­si­ve Webdesign zielt darauf ab, die Dar­stel­lung einer Webseite möglichst optimal an das jeweilige Gerät an­zu­pas­sen. Media Queries werden genutzt, um ver­schie­de­ne Ei­gen­schaf­ten des dar­stel­len­den Geräts, so­ge­nann­te Media Features, ab­zu­fra­gen. So ist es u. a. möglich, Style-Regeln für ver­schie­de­ne Bild­schirm­di­men­sio­nen fest­zu­le­gen. Ferner lassen sich op­ti­mier­te Style-Regeln für den Fall de­fi­nie­ren, dass ein mobiles Gerät gekippt wird.

Hier eine Übersicht der derzeit am häu­figs­ten für Re­spon­si­ve Design genutzten Media Features:

Be­trach­ten wir ein paar Beispiele. Stellen wir uns die Haupt-Über­schrift einer Webseite vor. HTML sieht dafür das Element 'h1' vor. Zunächst werden wir für das h1-Element die Style-Regeln un­ab­hän­gig vom dar­stel­len­den Gerät festlegen:

Als nächstes de­fi­nie­ren wir einen Media Query, der die Breite des Bild­schirms abfragt. Innerhalb der Abfrage legen wir die Style-Regeln fest, die ab dieser Breite für die Über­schrift gelten sollen. Im spe­zi­fi­schen Beispiel erhöhen wir die Schrift­grö­ße der h1-Über­schrift auf Bild­schir­men, die min­des­tens 1.024 Pixel breit sind:

Beachten Sie hier, dass wir nur die 'font-size'-Ei­gen­schaft der h1-Über­schrift anpassen. Der Zei­len­ab­stand ist per 'line-height'-Ei­gen­schaft als relative Einheit definiert und wird – da nicht explizit über­schrie­ben – geerbt. Im konkreten Beispiel ist der Zei­len­ab­stand des h1-Elements im Grund­zu­stand 24px * 1,25 = 30px. Auf Bild­schir­men ab 1.024 Pixel Breite ergibt sich pro­por­tio­nal ein Zei­len­ab­stand von 36px * 1,25 = 45px.

Diese Ver­mi­schung be­stehen­der und neu de­fi­nier­ter Style-Regeln wird im Namen CSS durch das Wort „Cascading“ aus­ge­drückt: ein Element erbt Style-Regeln von Eltern-Elementen oder ge­ne­rel­len Regeln, die bereits definiert wurden. Für ge­wöhn­lich legt man die Grund­ei­gen­schaf­ten der Elemente fest und über­schreibt dann selektiv Ei­gen­schaf­ten unter be­stimm­ten Kon­di­tio­nen.

Ein weiteres Beispiel: Stellen Sie sich vor, wir möchten drei Elemente in einem Container dar­stel­len. Dabei sollen die Elemente auf dem Bild­schirm eines Mo­bil­ge­räts un­ter­ein­an­der dar­ge­stellt werden, wenn das Gerät hochkant gehalten wird. Beim Kippen des Geräts auf Quer­for­mat soll das Layout um­schal­ten, sodass die Elemente ne­ben­ein­an­der dar­ge­stellt werden. Mit dem Flexbox Layout Modul und einem CSS Media Query, der die Aus­rich­tung des Geräts abfragt, lässt sich das Layout in wenigen Zeilen HTML und CSS umsetzen. Zunächst de­fi­nie­ren wir den Container und die ent­hal­te­nen Elemente in HTML:

Überdies de­fi­nie­ren wir die folgenden CSS-Regeln. Wir setzen die Ei­gen­schaft 'display: flex' auf dem Container und legen für diesen die 'flex-di­rec­tion'-Ei­gen­schaft per CSS Media Query kon­di­tio­nal fest. Wird das Gerät im Quer­for­mat gehalten, werden die Elemente in einer Reihe ne­ben­ein­an­der angezeigt; bei Nutzung im Hoch­for­mat erfolgt die Anordnung der Elemente un­ter­ein­an­der in einer Zeile:

Außer Bild­schirm­di­men­sio­nen und Aus­rich­tung des Geräts können wir auch die physische Auflösung des Bild­schirms per Media Query abfragen. Dies ist ins­be­son­de­re für die Dar­stel­lung von Pixel-Bildern in­ter­es­sant. Stellen Sie sich als Beispiel vor, dass ein Logo in zwei Versionen vorliegt, jeweils optimiert für Bild­schir­me mit niedriger und hoher Auflösung. Ein einfacher Trick dafür, das jeweils passende Logo an­zu­zei­gen, besteht darin, beide Varianten auf der Seite zu plat­zie­ren. Mittels CSS Media Query fragen wir die Auflösung des Bild­schirms ab und verbergen über 'display: none' die jeweils nicht benötigte Version. Dieser Ansatz könnte in HTML- und CSS-Code im­ple­men­tiert so aussehen:

In den bis­he­ri­gen Er­klä­run­gen haben wir im Zu­sam­men­hang mit der ver­füg­ba­ren Breite des Aus­ga­be­me­di­ums vom „Bild­schirm“ ge­spro­chen. Dies ist kon­zep­tu­ell zu­tref­fend, technisch jedoch nicht ganz korrekt. Der Browser operiert intern mit dem Konzept des „Viewport“. Damit die Breite des Viewport tat­säch­lich mit der Breite des Bild­schirms kor­re­spon­diert, wird eine 'meta-viewport'-Angabe im '<head>' des HTML-Dokuments benötigt. Ohne diese Angabe wird die Seite auf Mo­bil­ge­rä­ten wie auf dem Desktop angezeigt, jedoch insgesamt stark ver­klei­nert.

Beim Re­spon­si­ve Webdesign sollen sich die Elemente an die vor­han­de­ne Bild­schirm­flä­che anpassen. Häufig geht es darum, die Di­men­sio­nen der Elemente unter ver­schie­de­nen Be­din­gun­gen fest­zu­le­gen. Die CSS-Spe­zi­fi­ka­ti­on definiert eine Vielzahl von Einheiten; die ein­fachs­te Di­men­si­ons-Einheit ist wohl das Pixel. Ein 1080p-Bild bei­spiels­wei­se hat Di­men­sio­nen von 1.920 Pixel Breite mal 1.080 Pixel Höhe.

Das Pixel ist eine absolute Einheit und passt sich per De­fi­ni­ti­on nicht an den vor­han­de­nen Platz an. Schauen wir uns an einem Beispiel an, weshalb dies pro­ble­ma­tisch sein kann. Nehmen wir an, eine Webseite enthält ein Bild mit einer Breite von 1.920 Pixel. Legen wir die Bild­brei­te per CSS auf diesen Wert fest, kommt es ggf. auf kleinen Bild­schir­men zu Störungen der Dar­stel­lung: Das Bild ragt über den ver­füg­ba­ren Platz hinaus.

Hier de­fi­nie­ren wir ein Bild in HTML mit dem '<img>'-Tag:

Per CSS fixieren wir die Breite auf 1.920 Pixel:

In diesem Szenario wäre es besser, statt Pixeln eine relative Einheit zu nutzen. Seit den frühen Tagen der ta­bel­len­ba­sier­ten Layouts kennt CSS das Prozent als relative Einheit. Setzen wir die Breite des Bildes per CSS auf '100%', passt das Bild sich fluide an den vor­han­de­nen Platz an. Dies funk­tio­niert, weil sich Pro­zent­an­ga­ben immer auf das um­schlie­ßen­de Element beziehen.

Wir sind unserem Ziel, die Breite eines Bilds an den zur Verfügung stehenden Platz an­zu­pas­sen, ein gutes Stück näher gekommen. Jedoch haben wir ein neues Problem ge­schaf­fen: Auf einem Bild­schirm, der breiter als 1.920 Pixel ist, wird das Bild ver­grö­ßert dar­ge­stellt und dadurch verpixelt. Daher sollten wir zu­sätz­lich die maximale Breite des Bilds auf dessen tat­säch­li­che Pixel-Di­men­sio­nen be­schrän­ken:

Neben Pixel und Prozent kennt CSS eine Reihe weiterer Einheiten. Die relativen Einheiten em, rem und vw, vh bieten allesamt in­ter­es­san­te Ein­satz­mög­lich­kei­ten im Re­spon­si­ve Design. Hier eine Übersicht der am häu­figs­ten für re­spon­si­ves Design ge­brauch­ten CSS-Einheiten nebst Ver­wen­dung:

Neben den bisher vor­ge­stell­ten simplen Media Queries lassen sich auch komplexe CSS Media Queries schreiben. CSS sieht dafür die logischen Ope­ra­to­ren 'and', 'or', und 'not' vor. Hier ein Beispiel eines komplexen Query:

Zu­sätz­lich zu den bereits eta­blier­ten Media Features, die sich per CSS Media Query abfragen lassen, wird es in Zukunft eine Reihe weiterer in­ter­es­san­ter Features geben. So sieht die Spe­zi­fi­ka­ti­on „CSS Media Queries Level 5“ (CSS5) u. a. die folgenden neuen Ab­fra­ge­mög­lich­kei­ten vor:

Eine weitere Neuerung, die mit Er­schei­nen von CSS5 erwartet wird, sind die so­ge­nann­ten Container Queries. Mit diesen wird es erstmals möglich sein, Style-Regeln für Elemente an die Ei­gen­schaf­ten des sie um­ge­ben­den Con­tai­ners zu knüpfen. Damit stehen die Container Queries im Gegensatz zu den CSS Media Queries, die globale Ei­gen­schaf­ten des dar­stel­len­den Geräts abfragen. Der Einsatz von Container Queries wird die Be­hand­lung von Spe­zi­al­fäl­len erlauben, für die bisher auf Ja­va­Script oder komplexe Media Queries zu­rück­ge­grif­fen wird.

Im Zu­sam­men­hang mit Re­spon­si­ve Webdesign und CSS Media Queries wird oft von „Break­points“ (zu Deutsch: „Um­bruch­stel­len“) ge­spro­chen. Bei einem Break­point handelt es sich um eine de­fi­nier­te Bild­schirm­brei­te, bei der ein Satz von CSS-Regeln aktiviert wird, der per CSS Media Query definiert wurde. Sie können sich die auf einer Website de­fi­nier­ten Break­points ver­an­schau­li­chen, indem Sie im Browser die Developer-Tools öffnen. Ist die Re­spon­si­ve-Ansicht aktiv, werden die Break­points als farbige Balken oberhalb der ei­gent­li­chen Webseite dar­ge­stellt.

Eine an­er­kann­te Best Practice des Re­spon­si­ve Webdesign ist der Mobile-First-Ansatz. Folgen Design und Ent­wick­lung einer Website diesem Ansatz, werden die Style-Angaben für kleinste Bild­schir­me zuerst definiert. Diese De­fi­ni­tio­nen bilden das Grund­ge­rüst des Designs. Darauf aufbauend werden mehrere Break­points für sukzessiv größere Bild­schir­me definiert. Innerhalb der Break­points werden selektiv neue Style-Regeln für Elemente fest­ge­legt und damit die be­stehen­den Regeln für kleinere Bild­schir­me über­schrie­ben.

Gut nach­voll­zie­hen lässt sich der Mobile-First-Ansatz am bekannten CSS-Utility-Framework „Tachyons“. Dieses definiert stan­dard­mä­ßig drei Break­points: 'not-small', 'medium' und 'large':

Beachten Sie, dass dem Mobile-First-Ansatz folgend kein eigener 'small'-Break­point existiert. Angaben für kleine Geräte werden einfach ohne Break­point definiert.

Innerhalb der Break­points werden Style-Regeln für Elemente fest­ge­legt, deren Dar­stel­lung auf ver­schie­den großen Bild­schir­men angepasst werden soll. Viel­leicht erkennen Sie bereits, dass diese Zen­tra­li­sie­rung der CSS-Codebase eines Web­pro­jekts pro­ble­ma­tisch ist. Nor­ma­ler­wei­se ist es vor­zu­zie­hen, sämtliche CSS-Ei­gen­schaf­ten eines Elements in einer eigenen Datei zu sammeln.

Um den CSS-Code eines Projekts zu mo­du­la­ri­sie­ren, kamen zunächst ver­schie­de­ne CSS-Pre­pro­zes­so­ren zum Einsatz. Viel­leicht sind Ihnen die Sprachen Sass, Less oder Stylus ein Begriff. Später kam mit den Node.js-Projekt PostCSS ein CSS-Post­pro­zes­sor hinzu. Alle genannten Tech­no­lo­gien erlauben das Kapseln von CSS Media Queries unterhalb eines CSS-Selektors. So lassen sich die Style-Regeln eines Elements für sämtliche Media-Kon­di­tio­nen gesammelt de­fi­nie­ren. Hier ein Beispiel mit Stylus.

Stylus-Datei 'text.styl' für Text-Ei­gen­schaf­ten:

Stylus-Datei 'link.styl' für Link-Ei­gen­schaf­ten:

Der Stylus-Pre­pro­zes­sor übersetzt die Dateien in CSS und sammelt die ein­ge­rück­ten CSS-Media-Query-Regeln unter einem einzigen Break­point. Der dar­ge­stell­te Stylus-Code wird zum folgenden CSS-Code übersetzt:

Der Ansatz, CSS Media Queries innerhalb der Style-Regeln eines Elements zu kapseln und per CSS-Prozessor zu ver­ar­bei­ten, funk­tio­niert. Jedoch zwingt dies den Ent­wick­ler weiterhin dazu, zwischen den Ebenen HTML und CSS hin und her zu wechseln. Ferner besteht die Not­wen­dig­keit, den Elementen in HTML ein­deu­ti­ge Klas­sen­na­men zu­zu­wei­sen. Die sich daraus ergebende Logistik führt zu un­er­wünsch­ter Kom­ple­xi­tät. Hier setzen die CSS-Utility-Frame­works an, eine heut­zu­ta­ge maß­geb­li­che Tech­no­lo­gie.

Ein CSS-Utility-Framework verknüpft atomare CSS-Ei­gen­schaf­ten mit Break­points. Die sich daraus er­ge­ben­den CSS-Klassen lassen sich in HTML einem be­lie­bi­gen Element zuweisen. So wird es möglich, re­spon­si­ve Layouts und Kom­po­nen­ten nur in HTML zu de­fi­nie­ren, ohne dafür CSS-Code schreiben zu müssen. Die Nutzung eines CSS-Utility-Frame­works erlaubt eine schnelle Pro­to­ty­pi­sie­rung und eignet sich her­vor­ra­gend zur Ent­wick­lung von Kom­po­nen­ten. Daher werden CSS-Utility-Frame­works oft in Ver­bin­dung mit kom­po­nen­ten­ori­en­tier­ten Tech­no­lo­gien wie React und Vue ein­ge­setzt.

Be­trach­ten wir ein weiteres, dem CSS-Utility-Framework Tachyons ent­lehn­tes Beispiel. Schauen Sie sich den folgenden CSS-Code an. Wir de­fi­nie­ren zunächst die Klassen 'mw1' bis 'mw3', die die maximale Breite eines be­lie­bi­gen Elements auf Werte zwischen '1rem' und '3rem' begrenzen. Ferner de­fi­nie­ren wir innerhalb der bereits vor­ge­stell­ten Break­points 'medium' und 'large' kor­re­spon­die­ren­de CSS-Klassen, die das Kürzel des je­wei­li­gen Break­points im Namen tragen:

Mithilfe dieser CSS-Klassen können wir re­spon­si­ve Elemente komplett in HTML schreiben. Das folgende HTML-Code­schnip­sel definiert ein Bild, das auf kleinen Bild­schir­men eine maximale Breite von '1rem' hat. Das Bild passt sich au­to­ma­tisch an die ver­füg­ba­re Bild­schirm­brei­te an. Auf mit­tel­gro­ßen Bild­schir­men nimmt das Element maximal '2rem' ein, auf großen maximal '3rem'.

CSS-Utility-Frame­works de­fi­nie­ren eine große Menge atomarer Klassen, wobei jede Klasse nur eine CSS-Ei­gen­schaft festlegt. Dazu zählen neben den Di­men­sio­nen eines Elements Angaben zur Ty­po­gra­fie, Farb­ge­bung und so ziemlich allen weiteren denkbaren Ei­gen­schaf­ten. Für jede atomare Ei­gen­schaft enthält ein CSS-Utility-Framework Klassen für jeden de­fi­nier­ten Break­point. Durch die Kom­bi­na­ti­on mehrerer Klassen lassen sich nahezu beliebige, voll­stän­dig re­spon­si­ve Elemente zu­sam­men­fü­gen.

Das bereits vor­ge­stell­te Framework Tachyons ist bereits einige Jahre alt und wird nicht aktiv wei­ter­ent­wi­ckelt. Aufgrund seiner relativen Ein­fach­heit ist Tachyons jedoch zum Lernen von Re­spon­si­ve Webdesign weiterhin eine Be­trach­tung wert. Am ein­fachs­ten zu verstehen ist der Ansatz, wenn man sich die Tachyons-Kom­po­nen­ten anschaut. Dabei handelt es sich um Beispiel-Elemente, die voll­stän­dig über Utility-Klassen definiert sind.

Als geistiger Nach­fol­ger von Tachyons existiert heut­zu­ta­ge mit Tail­windCSS eine moderne Variante. Tail­windCSS verfügt im Vergleich mit Tachyons über einige Vorteile. So wird das Projekt aktiv wei­ter­ent­wi­ckelt und un­ter­stützt von Hause aus viele beliebte Systeme zur Frontend-Ent­wick­lung. Ferner lässt sich Tail­windCSS komplett an die je­wei­li­gen Be­dürf­nis­se eines Projekts anpassen. Sämtliche Vor­ein­stel­lun­gen wie Break­points, Schrift­grö­ßen-Skala etc. lassen sich einfach kon­fi­gu­rie­ren.

So praktisch die Arbeit mit CSS-Utility-Frame­works ist, sie haben auch einen großen Nachteil: Zur De­fi­ni­ti­on eines Elements wird u. U. eine große Menge atomarer Klassen benötigt. Ferner enthält die CSS-Quell­text­da­tei stan­dard­mä­ßig Klassen für sämtliche Kom­bi­na­tio­nen von CSS-Ei­gen­schafts­wer­ten und Break­points. Im Falle von Tail­windCSS handelt es sich um tausende von Klassen, was die CSS-Datei im un­kom­pri­mier­ten Zustand auf mehrere Megabyte Da­tei­grö­ße anwachsen lässt – ein unter Per­for­mance-Ge­sichts­punk­ten nicht tragbarer Zustand.

Glück­li­cher­wei­se schafft Tail­windCSS auf zweierlei Weise Abhilfe. Zum einen kennt das Framework die '@apply'-Anweisung, die dazu dient, mehrfach genutzte Kom­bi­na­tio­nen von Utility-Klassen unter einem neuen Klas­sen­na­men zu­sam­men­zu­fas­sen. Zum anderen un­ter­stützt Tail­windCSS das Tool PurgeCSS. Dieses wird als Teil des Build-Prozesses ein­ge­setzt, um alle nicht genutzten Utility-Klassen aus dem Pro­duk­ti­ons-Build zu entfernen. PurgeCSS pro­zes­siert dazu die HTML-Templates des Projekts und nimmt nur die dabei ge­fun­de­nen CSS-Klassen in die erzeugte CSS-Quell­text­da­tei auf. Dadurch sinkt die Größe der Quell­text­da­tei auf ein ak­zep­ta­bles Maß.