Mit CSS3 Media Queries ist es möglich, die Einbindung von CSS nicht nur von einem bestimmten Medium abhängig zu machen, sondern auch davon, ob das Medium oder Ausgabegerät bestimmte Merkmale aufweist oder nicht. Webautoren können so beispielsweise auf die Breite des Browserfensters reagieren und ein Spaltenlayout auflösen, wenn die Breite für die mehrspaltige Darstellung nicht mehr ausreicht. Oder sie können spezielle Stylesheets für die Darstellung auf dem iPhone oder iPad bereitstellen, abhängig davon, wie das Gerät in der Hand gehalten wird. Dieser Vortrag führt ein in die Funktionsweise von CSS Media Queries und zeigt aktuelle Anwendungsbeispiele, die in (fast) allen aktuellen Browsern funktionieren.

1. Michael Jendryschik | itemis AG CSS Media Queries Auf Browser und Geräte reagieren

4. aural für Sprachbrowser

5. braille für Geräte mit Braillezeile

6. embossed für Brailledrucker

7. handheld für Handcomputer und Mobiltelefone

8. print für Drucker

9. projection für Projektoren

10. screen für Monitore

11. tty für Ausgabemedien mit Festbreitenschrift

12. tv für Fernseher

13. CSS-Medientypen Typ Medium all alle Geräte aural Sprachbrowser braille Ausgabegeräte mit Braillezeile embossed Brailledrucker handheld Handcomputer und Mobiltelefone print Drucker projection Projektion screen Computermonitore tty Ausgabemedien mit Festbreitenschrift tv Fernseher

16. Microsoft IE Test Drive

18. A List Apart Artikelbeispiel

20. Jon Hicks

26. CSS Media Queries Grundlagen und Syntax

28. Bezeichnung Beispiel Media Query screen and (max-width: 300px) Medientyp screen and (max-width: 300px) Verknüpfung screen and (max-width: 300px) Ausdruck screen and ( max-width: 300px ) Merkmal screen and ( max-width : 300px) Wert screen and (max-width: 300px )

33. CSS Media Queries Medienmerkmale

34. Breite und Höhe Merkmal min/max Beschreibung width Ja Breite der Anzeigefläche height Ja Höhe der Anzeigefläche device-width Ja Breite des Geräts device-height Ja Höhe des Geräts

38. Seitenverhältnis und Ausrichtung Merkmal min/max Beschreibung aspect-ratio Ja Verhältnis der Merkmale width und height device-aspect-ratio Ja Verhältnis der Merkmale device-width und device-height orientation Nein Ausrichtung des Geräts

41. Farbmerkmale Merkmal min/max Beschreibung color Ja Farbtiefe des Geräts color-index Ja Anzahl der Einträge in der Farb-Lookup-Tabelle des Geräts monochrome Ja Anzahl der Bits pro Pixel im Bildspeicher eines einfarbigen Geräts

45. Browserkompatibilität

47. Fragen?