CSS Media Queries (WebTech Conference 2010)

Michael Jendryschik | itemis AG

CSS Media QueriesAuf Browser und Geräte reagieren

Michael Jendryschik

• Konzipiert und entwickeltWebsites, schreibt undspricht darüber

• http://jendryschik.de

• Leiter Webentwicklung• http://www.itemis.de

• Webkraut• http://www.webkrauts.de

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

aural für Sprachbrowser

braille für Gerätemit Braillezeile

embossed fürBrailledrucker

handheld für Handcomputer und Mobiltelefone

print für Drucker

projection für Projektoren

screen für Monitore

tty für Ausgabemedienmit Festbreitenschrift

tv für Fernseher

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

<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; }

}

• 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.

Microsoft IE Test Drive

@media (min-width: 950px) {

/* Regeln für breite Browserfenster */

}

@media (min-width: 450px) and (max-width: 950px) {

  /* Regeln für Netbooks */

}

@media (max-width: 450px) {

/* Regeln für mobile Geräte */

}

A List Apart Artikelbeispiel

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

.mast,

.intro,

.main,

.footer {

float: none;

width: auto;

}

}

Jon Hicks

@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) { … }

kleines iPhone-Beispiel

<ol>

<li class="ready">Fertig?</li>

<li class="go">Los!</li>

</ol>

kleines iPhone-Beispiel

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {

body { background-color: yellow; }

li.go { display: none; }

}

kleines iPhone-Beispiel

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

body { color: white; background-color: green;

}

li.ready { display: none; }

}

CSS Media QueriesGrundlagen und Syntax

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

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)

• Das Schlüsselwort and drückt ein logisches Und aus.

screen and (max-width: 300px)

(min-width: 450px)and (max-width: 950px)

• 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)" />

• Das Schlüsselwort not steht für eine logische Negation.

<link rel="stylesheet" type="text/css"

href="style.css"

media="not screen and (color)" />

• 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)" />

CSS Media QueriesMedienmerkmale

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

Viewport mindestens500px hoch?

<link rel="stylesheet" type="text/css"

href="vertical-align.css"

media="screen and (min-height: 500px)"

/>

Smartphone?

@media only screen

and (min-device-width: 320px)

and (max-device-width: 480px) { … }

Gerät- und Viewportbreite

• Achtung! Breite des Viewports ist häufig größer als die des Geräts selbst

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

Weitere Informationen:http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

Seitenverhältnis und Ausrichtung

Merkmal min/max Beschreibungaspect-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

Seitenverhältnis 16:9?

@media only screen and (device-aspect-ratio: 16/9) { … }

@media screen

and (device-aspect-ratio: 1280/720) { … }

Horizontale oder vertikaleAusrichtung eines iPad?

<link … href="ipad-portrait.css" media="(min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)" />

<link … href="ipad-landscape.css" media="(min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)" />

Farbmerkmale

Merkmal min/max Beschreibungcolor Ja Farbtiefe des Gerätscolor-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

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)" />

iPhone4?

<link rel="stylesheet" type="text/css"

href="/css/retina.css"

media="only screen and

(-webkit-min-device-pixel-ratio: 2)" />

Browserkompatibilität

Fragen?

Michael Jendryschik

michael@jendryschik.demichael.jendryschik@itemis.de

twitter.com/jendryschikwww.facebook.com/jendryschikwww.xing.com/profile/Michael_Jendryschik

Beispiele

http://ie.microsoft.com/testdrive/HTML5/85CSS3_MediaQueries/Default.html

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-larger.html

http://hicksdesign.co.uk/

http://files.jendryschik.de/examples/wtc2010/mq.html

Abbildungsnachweis• 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/CableNetworks/Teletubbies-Group2.jpg

• http://www.audiobooks.at/images/cover/europa/DDF_132_CD.jpg

• http://www.pm.ruhr-uni-bochum.de/imperia/md/images/pressestelle/einstein.jpg

• http://img2.fengniao.com/product/28/473/ceOnyLQihT8xg.jpg

• http://www.apple.com/iphone/

• http://wallpapers-diq.net/wallpapers/30/Firefox%2C_The_Browser%2C_Reloaded.jpg