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
   

   View Slide

2. Es gibt verschiedene
   Möglichkeiten, den
   Geltungsbereich von CSS auf
   bestimmte Medien
   einzuschränken.
   

   View Slide

3. aural für Sprachbrowser
   

   View Slide

4. braille für Ausgabegeräte
   mit Braillezeile
   

   View Slide

5. embossed für Brailledrucker
   

   View Slide

6. handheld für Handcomputer
   und Mobiltelefone
   

   View Slide

7. print für Drucker
   

   View Slide

8. projection für Projektoren
   

   View Slide

9. screen für
   Computermonitore
   

   View Slide

10. tty für Ausgabemedien mit
    Festbreitenschrift
    

    View Slide

11. tv für Fernseher
    

    View Slide

12. href="style.css" media="screen" />
    @import url("style.css") screen;
    @media print {
    div#header,
    div#sidebar,
    div#footer { display: none; }
    }
    

    View Slide

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.
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

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 */
    }
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. @media screen and (max-width: 600px) {
    .mast,
    .intro,
    .main,
    .footer {
    float: none;
    width: auto;
    }
    }
    

    View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

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) { ... }
    

    View Slide

28. View Slide

29. CSS Media Queries:
    Grundlagen und Syntax
    

    View Slide

30. Media Queries sind logische
    Ausdrücke, die die Angabe von
    Medientypen und bestimmten
    Medienmerkmalen miteinander
    verknüpfen.
    

    View Slide

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)
    

    View Slide

32. Das Schlüsselwort and drückt ein
    logisches Und aus.
    screen and (max-width: 300px)
    (min-width: 450px) and (max-width: 950px)
    

    View Slide

33. Ein Komma steht für ein logisches Oder.
    @import url("style.css") screen, projection;
    type="text/css" href="style.css"
    media="screen and (min-width: 800px),
    projection and (min-width: 800px)" />
    

    View Slide

34. Das Schlüsselwort not steht für
    eine logische Negation.
    href="style.css"
    media="not screen and (color)" />
    

    View Slide

35. Das Schlüsselwort only ist ein
    Workaround für veraltete
    Browser, die mit Media Queries
    nicht umzugehen wissen.
    href="style.css"
    media="only screen and (color)" />
    

    View Slide

36. CSS3 Media Queries
    Medienmerkmale
    

    View Slide

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
    

    View Slide

38. Viewport mindestens 500px hoch?
    href="vertical-align.css"
    media="screen and (min-height: 500px)"
    />
    

    View Slide

39. iPhone?
    href="iphone.css"
    media="only screen
    and (max-device-width: 480px)"
    />
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

42. Horizontale oder vertikale
    Ausrichtung eines iPad?
    media="(min-device-width: 481px)
    and (max-device-width: 1024px)
    and (orientation: portrait)" />
    media="(min-device-width: 481px)
    and (max-device-width: 1024px)
    and (orientation: landscape)" />
    

    View Slide

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
    

    View Slide

44. Schwarzweiß- oder Farbdrucker?
    href="print-color.css"
    media="print and (color)" />
    href="print-monochrome.css"
    media="print and (monochrome)" />
    

    View Slide

45. View Slide

46. iPhone 4?
    href="/css/retina.css"
    media="only screen and
    (-webkit-min-device-pixel-ratio: 2)" />
    

    View Slide

47. Browserkompatibilität
    

    View Slide

48. View Slide

49. Michael Jendryschik
    http://jendryschik.de
    http://www.itemis.de
    http://www.webkrauts.de
    http://twitter.com/jendryschik
    http://facebook.com/jendryschik
    

    View Slide

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
    

    View Slide