CSS Media Queries

Webautoren haben verschiedene Möglichkeiten, den Geltungsbereich von CSS auf bestimmte Medien einzuschränken, sowohl bei der Einbindung eines Stylesheets als auch für bestimmte Regeln innerhalb des Stylesheets. 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 bereit stellen, abhängig davon, wie das Gerät in der Hand gehalten wird. Das Gute daran ist, dass fast alle aktuellen Browser mit CSS Media Queries umgehen können!

Transcript

1. CSS Media Queries Auf Geräte und Browser reagieren Michael Jendryschik
2. Es gibt verschiedene Möglichkeiten, den Geltungsbereich von CSS auf bestimmte Medien einzuschränken.
3. aural für Sprachbrowser
4. braille für Ausgabegeräte mit Braillezeile
5. embossed für Brailledrucker
6. handheld für Handcomputer und Mobiltelefone
7. print für Drucker
8. projection für Projektoren
9. screen für Computermonitore
10. tty für Ausgabemedien mit Festbreitenschrift
11. tv für Fernseher
12. <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> @import url("style.css") screen; @media print { div#header, div#sidebar, div#footer { display: none; } }
13. Mit CSS Media Queries ist es möglich, die Einbindung von CSS davon abhängig zu machen, ob ein Medium oder Ausgabegerät bestimmte Merkmale aufweist oder nicht.
18. @media (min-width: 950px) { /* Regeln für breite Browserfenstern */ } @media (min-width: 450px) and (max-width: 950px) { /* Regeln für Netbooks */ } @media (max-width: 450px) { /* Regeln für mobile Geräte */ }
22. @media screen and (max-width: 600px) { .mast, .intro, .main, .footer { float: none; width: auto; } }
27. @media screen and (max-width: 500px) { ... } @media screen and (max-width: 800px) { ... } @media screen and (min-width: 1024px) { ... } @media handheld and (max-device-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) { ... } @media screen and (min-width: 920px) { ... } @media screen and (min-width: 1350px) { ... } @media screen and (min-width: 1500px) { ... } @media only screen and (max-device-width: 480px) { ... } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { ... }
29. CSS Media Queries: Grundlagen und Syntax
30. Media Queries sind logische Ausdrücke, die die Angabe von Medientypen und bestimmten Medienmerkmalen miteinander verknüpfen.
31. 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)
32. Das Schlüsselwort and drückt ein logisches Und aus. screen and (max-width: 300px) (min-width: 450px) and (max-width: 950px)
33. Ein Komma steht für ein logisches Oder. @import url("style.css") screen, projection; <link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 800px), projection and (min-width: 800px)" />
34. Das Schlüsselwort not steht für eine logische Negation. <link rel="stylesheet" type="text/css" href="style.css" media="not screen and (color)" />
35. Das Schlüsselwort only ist ein Workaround für veraltete Browser, die mit Media Queries nicht umzugehen wissen. <link rel="stylesheet" type="text/css" href="style.css" media="only screen and (color)" />
36. CSS3 Media Queries Medienmerkmale
37. 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. Viewport mindestens 500px hoch? <link rel="stylesheet" type="text/css" href="vertical-align.css" media="screen and (min-height: 500px)" />
39. iPhone? <link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-device-width: 480px)" />
40. 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. Seitenverhältnis 16:9? screen and (device-aspect-ratio: 16/9) screen and (device-aspect-ratio: 32/18) screen and (device-aspect-ratio: 1280/720)
42. Horizontale oder vertikale Ausrichtung eines iPad? <link ... href="ipad-portrait.css" media="(min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait)" /> <link ... href="ipad-landscape.css" media="(min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape)" />
43. 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
44. Schwarzweiß- oder Farbdrucker? <link rel="stylesheet" type="text/css" href="print-color.css" media="print and (color)" /> <link rel="stylesheet" type="text/css" href="print-monochrome.css" media="print and (monochrome)" />
46. iPhone 4? <link rel="stylesheet" type="text/css" href="/css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
47. Browserkompatibilität
49. Michael Jendryschik http://jendryschik.de http://www.itemis.de http://www.webkrauts.de http://twitter.com/jendryschik http://facebook.com/jendryschik
50. Quellennachweis • http://www.digitale-chancen.de/transfer/assets/468.jpg • http://ceipntrasradelapiedad.files.wordpress.com/2010/03/braille.jpg • http://gadgets.boingboing.net/Palm-Pre-Disassembled.jpg • http://upload.wikimedia.org/wikipedia/commons/d/dc/Westermann_Druckerei_1890.png • http://www.infocus.rbt-pressroom.eu/de/download/der-heimkino-projektor-sp8602-kommt-vielen- hochleistungsfhigen-eigenschaften-auf-den-markt-4.jpg • http://upload.wikimedia.org/wikipedia/commons/2/2c/Monitor_in_gutter.jpg • http://cmsdata.iucn.org/img/original/iberian_lynx_by_antonio_rivas.jpg • http://www.comcast.com/MediaLibrary/1/1/About/PressRoom/Images/LogoAndMediaLibrary/Photography/CableNe tworks/Teletubbies-Group2.jpg • http://www.pm.ruhr-uni-bochum.de/imperia/md/images/pressestelle/einstein.jpg • http://www.colgate.at/OralHealthMonth/AT/2009/arch/2007/colgate_merkmale0805.jpg • http://www.claudia-berg-grafik.de/claudia_berg_Grasland.jpg • http://www.grossi-online.de/gallery2/d/314-1/Farbe_001.jpg • http://www.apple.com/iphone/ • http://wallpapers-diq.net/wallpapers/30/Firefox%2C_The_Browser%2C_Reloaded.jpg