Hauptmenü

Untermenü

CSS3 - Media Queries

1. Feine Unterschiede

Wer hat sich nicht schon mal gewünscht, per CSS die Monitor- oder Fenstergröße eines Browsers herauszufinden. Oder über welches Bildformat ein wie auch immer geartetes Endgerät verfügt? Zumal wir ja mittlerweile im Zeitalter des mobilen Internets leben. Mit den neuen Media Queries in CSS3 ist das nun endlich möglich.

Die Browserunterstützung

2. Das Prinzip

Die grundlegenden Dinge zu den Medientypen habe ich ja schon an dieser Stelle gesagt. Und bei den dortigen Beispielen handelt es sich schon um eine rudimentäre Form von Media Queries.


<link rel="stylesheet" media="screen" href="..." />
@import url(color.css) print
@media screen {...}

Die neuen Möglichkeiten

Obige Beispiele kann man jetzt durch Bedingungen verfeinern. Dabei gibt es drei Möglichkeiten.

3. and

Definiert eine oder mehrere Bedingungen. Diese Angabe kann nur hinter dem Medientyp gemacht werden.


/* Wenn screen und Bedingung */
@media screen and ([Bedingung]) {...}
/* Wenn screen und Bedingung1 und Bedingung2 */
@media screen and ([Bedingung1]) and ([Bedingung2]) {...}

4. not

Negiert einen kompletten(!) Ausdruck.


/* Wenn NICHT screen und NICHT Bedingung */
@media not screen and ([Bedingung]) {...}

5. only

Verhindert, dass alte Browser Anweisungen laden, die sie nicht für sie bestimmt sind.


/* Wird nicht von alten Browsern geladen */
@media only screen and ([Bedingung]) {...}

6. Ein Zwischenfazit

Echte Programmierer werden jetzt sicher enttäuscht sein, dass es so wenige Möglichkeiten zur Steuerung gibt. Aber eigentlich reichen sie völlig aus, um die verschiedenen Eigenschaften eines Endgeräts abzufangen. Außerdem müsst ihr mal an die armen Designer denken. ;-) Zudem gelten hier dieselben Regeln wie beim Programmieren. Nicht mit den Bedingungen übertreiben!

Mobiles Webdesign

Wer jetzt denkt, dass das alles ist, was man braucht, um für mobile Endgeräte wie Tablets oder Smartphones zu entwickeln, der irrt sich. Denn da warten noch einige Fallstricke und Klippen, viel Theorie und eine Menge Mutmaßungen auf euch. Dazu werde ich demnächst dazu ein paar Tutorials verfassen.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt