CSS3 Media QueriesWDCM Dresden, 15.12.2011

Gliederung

1. Prolog

2. Syntax

3. Beispiele

4. Epilog

1. PrologFirst there was the screen.

Früher optimierte man Webseiten üblicherweise

für einen Desktop-PC-Bildschirm.

Zudem hatte man die Möglichkeit, Zielmedien per screen, print, projection,

… anzusprechen.

Nützlich. Aber …

http://www.flickr.com/photos/simajr/4285483549/

Heute geht mehr!

»By using media queries, presentations can be tailored to a specific range of output

devices without changing the content itself.«

W3C

Desktop

Tablet

Smartphone

http://www.flickr.com/photos/libraryman/95516793/

Moment mal: Warum will man überhaupt verschiedene Geräte

ansprechen?!

• In 3 Jahren wurden über 200 Millionen Android-Geräte aktiviert. (täglich kommen 550.000 hinzu)

• In 5 Jahren wurden über 250 Millionen iOS-Geräte verkauft.

• Apple verkauft mehr iPads als Dell PCs.

• Tablets-Verkäufe 2011 in D. im Vergleich zum Vorjahr um über 160 % gestiegen.

http://t3n.de/news/tablets-verkaufe-um-160-prozent-gestiegen-352008/

http://blog.kennstdueinen.de/2011/03/mobiles-internet-in-zahlen-infografik/

http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200812-201112

http://www.flickr.com/photos/7891209@N04/2951368555/

http://www.flickr.com/photos/7891209@N04/2951368555/

2. SyntaxGimme some code.

@media screen and (max-width: 800px) {

/* Awesome CSS code … */

}

»Führe CSS aus, wenn Medientyp screen unterstützt wird und das Browserfenster

kleiner als 800 Pixel breit ist.«

@media screen and (max-width: 800px) {

/* Awesome CSS code … */

}

»Führe CSS aus, wenn Medientyp screen unterstützt wird und das Browserfenster

kleiner als 800 Pixel breit ist.«

Medientyp

@media screen and (max-width: 800px) {

/* Awesome CSS code … */

}

»Führe CSS aus, wenn Medientyp screen unterstützt wird und das Browserfenster

kleiner als 800 Pixel breit ist.«

Verknüpfung

@media screen and (max-width: 800px) {

/* Awesome CSS code … */

}

»Führe CSS aus, wenn Medientyp screen unterstützt wird und das Browserfenster

kleiner als 800 Pixel breit ist.«

Ausdruck

<link rel="stylesheet" href="style.css" media="screen and (min-width: 800px)">

Geht auch so:

@media screen and (max-device-width: 480px) {

/* iPhone / iPod touch */

}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

/* iPad (horizontal) */

}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

/* iPad (vertikal) */

}

@media print and (color) {

/* Farbdrucker */

}

@media print and (monochrome) {

/* Schwarzweißdrucker */

}

Media-Features• width

• height

• device-width

• device-height

• orientation

• aspect-ratio

• device-aspect-ratio

• color

• color-index

• monochrome

• resolution

• scan

• grid

<meta name="viewport" content="width=device-width">

WichtigNie Media Queries ohne viewport-Meta-Angabe verwenden:

<meta name="viewport" content="width=device-width">

WichtigNie Media Queries ohne viewport-Meta-Angabe verwenden:

»Setze die Viewport-Breite auf die tatsächliche Breite des Gerätedisplays.«

http://www.w3.org/TR/css3-mediaqueries/

3. BeispieleWhat you see is what you get.

Demo: orientationhttp://www.flickr.com/photos/marfis75/5374308475/

Schriftgrößehttp://trentwalton.com/2011/12/05/on-font-size/

Demo: debugginghttp://xkcd.com/376/

Demo: WWW

4. EpilogYou’ve officially been pimped.

http://knowyourmeme.com/memes/xzibit-yo-dawg

Browsersupport

4 + 3.5 + 7 + 3 + 9 +

http://paulirish.com/2010/high-res-browser-icons/http://caniuse.com/#search=media

http://www.modernizr.com/

http://code.google.com/p/css3-mediaqueries-js/

https://github.com/scottjehl/Respond

CSS3 Media Queries!=

perpetuum mobile

wööörd!

Problem: Ladezeiten

Problem: Kontexthttp://www.flickr.com/photos/noeluap/3130274669/

Interessanter Ansatz: Gestaltungsprozess

umkehren. Mobile first!

Danke!

Francesco Schwarz

frncs.co (Blog)

frncs.co/+ (Google+)

@isellsoap (Twitter)

http://www.flickr.com/photos/ucumari/5696147028/

Quellen, Links & Co.• http://www.webkrauts.de/2011/12/12/der-aktuelle-stand-der-dinge-im-mobile-web-development/

• http://24ways.org/2011/adaptive-images-for-responsive-designs-again

• http://www.elmastudio.de/webdesign/was-konnen-css3-media-queries-wirklich-leisten/

• http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

• http://kulturbanause.de/2011/04/websites-mit-css3-media-queries-fur-iphone-ipad-android-co-optimieren/

• http://www.asymco.com/2011/12/02/the-big-bang-theory-of-computing/

• http://de.engadget.com/2011/11/16/google-200-millionen-android-gerate-aktiviert-taglich-kommen-5/

• http://www.slideshare.net/jameswillweb/css3-media-queries-mobile-elixir-or-css-snake-oil

• http://www.slideshare.net/jendryschik/css-media-queries-4685524

• http://johanbrook.com/design/css/debugging-css-media-queries/

• http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

• http://mediaqueri.es/

• http://coding.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/