SlideShare ist ein Scribd-Unternehmen logo
Michael Jendryschik | itemis AG CSS Media Queries Auf Browser und Geräte reagieren
Michael Jendryschik Konzipiert und entwickelt Websites, schreibt und spricht 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äte mit Braillezeile
embossed  für Brailledrucker
handheld  für Handcomputer und Mobiltelefone
print  für Drucker
projection  für Projektoren
screen  für Monitore
tty  für Ausgabemedien mit 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=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;  media=&quot;screen&quot;  /> @import url(&quot;style.css&quot;)  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=&quot;ready&quot;>Fertig?</li> <li class=&quot;go&quot;>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 Queries Grundlagen 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(&quot;style.css&quot;) screen ,  projection; <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; media=&quot;screen and (min-width: 800px) ,   projection and (min-width: 800px)&quot; />
Das Schlüsselwort  not  steht für eine logische Negation. <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; media=&quot; not  screen and (color)&quot; />
Das Schlüsselwort  only  ist ein Workaround für veraltete Browser, die mit Media Queries nicht umzugehen wissen <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; media=&quot; only  screen and (color)&quot; />
CSS Media Queries Medienmerkmale
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 mindestens 500px hoch? <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;vertical-align.css&quot; media=&quot;screen and ( min-height: 500px )&quot; />
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=&quot;viewport&quot; content=&quot;width=device-width&quot;> Weitere Informationen: http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
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
Seitenverhältnis 16:9? @media only screen   and ( device-aspect-ratio: 16/9 ) { … } @media screen and ( device-aspect-ratio: 1280/720 ) { … }
Horizontale oder vertikale Ausrichtung eines iPad? <link … href=&quot;ipad-portrait.css&quot; media=&quot;(min-device-width: 768px) and (max-device-width: 1024px) and ( orientation: portrait )&quot; /> <link … href=&quot;ipad-landscape.css&quot; media=&quot;(min-device-width: 768px) and (max-device-width: 1024px) and ( orientation: landscape )&quot; />
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
Schwarzweiß- oder Farbdrucker? <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;print-color.css&quot; media=&quot;print and ( color )&quot; /> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;print-monochrome.css&quot; media=&quot;print and ( monochrome )&quot; />
 
iPhone4? <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/css/retina.css&quot; media=&quot;only screen and ( -webkit-min-device-pixel-ratio: 2 )&quot; />
Browserkompatibilität
 
Fragen?
Michael Jendryschik [email_address] [email_address] twitter.com/jendryschik www.facebook.com/jendryschik www.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

Weitere ähnliche Inhalte

Andere mochten auch

Immobiliare.it: Milano e le sue prospettive di sviluppo immobiliare
Immobiliare.it: Milano e le sue prospettive di sviluppo immobiliareImmobiliare.it: Milano e le sue prospettive di sviluppo immobiliare
Immobiliare.it: Milano e le sue prospettive di sviluppo immobiliare
Silvio De Rossi
 
Business Dynamics I Acknowledging Sources
Business Dynamics I Acknowledging SourcesBusiness Dynamics I Acknowledging Sources
Business Dynamics I Acknowledging Sources
lindahauck
 
Presentation eeep comiclab
Presentation eeep comiclabPresentation eeep comiclab
Presentation eeep comiclab
Giorgos Papanikolaou
 
Chanel
ChanelChanel
Slide quiz #1
Slide quiz #1Slide quiz #1
Slide quiz #1
stewartl
 
Buurtkracht presentatie proven nov 2013
Buurtkracht presentatie proven nov 2013Buurtkracht presentatie proven nov 2013
Buurtkracht presentatie proven nov 2013
Proven Partners
 
Homer donut odyssey
Homer donut odysseyHomer donut odyssey
Homer donut odyssey
mjacobson
 
Periodic Trends
Periodic  TrendsPeriodic  Trends
Periodic Trends
Regis Komperda
 
Examples pp documentation
Examples pp documentationExamples pp documentation
Examples pp documentation
lindahauck
 
Nike
NikeNike
Nike
emudao
 
Το πετρέλαιο ως πρώτη ύλη ΣΤ ΦΕ6
Το πετρέλαιο ως πρώτη ύλη ΣΤ ΦΕ6Το πετρέλαιο ως πρώτη ύλη ΣΤ ΦΕ6
Το πετρέλαιο ως πρώτη ύλη ΣΤ ΦΕ6
Giorgos Papanikolaou
 
Periodic Table E Config
Periodic  Table  E  ConfigPeriodic  Table  E  Config
Periodic Table E Config
Regis Komperda
 
Writing A Lab Report- Komperda
Writing A Lab Report- KomperdaWriting A Lab Report- Komperda
Writing A Lab Report- Komperda
Regis Komperda
 
Engineering entepreneurship fall 2012
Engineering entepreneurship fall 2012Engineering entepreneurship fall 2012
Engineering entepreneurship fall 2012
lindahauck
 
οδυσσέας ελύτης
οδυσσέας ελύτηςοδυσσέας ελύτης
οδυσσέας ελύτης
chryssa Papathoma
 
Arron and Marci
Arron and MarciArron and Marci
Arron and Marci
Steve J
 

Andere mochten auch (20)

Immobiliare.it: Milano e le sue prospettive di sviluppo immobiliare
Immobiliare.it: Milano e le sue prospettive di sviluppo immobiliareImmobiliare.it: Milano e le sue prospettive di sviluppo immobiliare
Immobiliare.it: Milano e le sue prospettive di sviluppo immobiliare
 
Sos gioco
Sos giocoSos gioco
Sos gioco
 
Business Dynamics I Acknowledging Sources
Business Dynamics I Acknowledging SourcesBusiness Dynamics I Acknowledging Sources
Business Dynamics I Acknowledging Sources
 
Presentation eeep comiclab
Presentation eeep comiclabPresentation eeep comiclab
Presentation eeep comiclab
 
Chanel
ChanelChanel
Chanel
 
ενέργεια στ 2
ενέργεια στ 2ενέργεια στ 2
ενέργεια στ 2
 
Slide quiz #1
Slide quiz #1Slide quiz #1
Slide quiz #1
 
Buurtkracht presentatie proven nov 2013
Buurtkracht presentatie proven nov 2013Buurtkracht presentatie proven nov 2013
Buurtkracht presentatie proven nov 2013
 
2 κριτήριο γλώσσας
2 κριτήριο γλώσσας2 κριτήριο γλώσσας
2 κριτήριο γλώσσας
 
Homer donut odyssey
Homer donut odysseyHomer donut odyssey
Homer donut odyssey
 
Periodic Trends
Periodic  TrendsPeriodic  Trends
Periodic Trends
 
Examples pp documentation
Examples pp documentationExamples pp documentation
Examples pp documentation
 
Nike
NikeNike
Nike
 
Το πετρέλαιο ως πρώτη ύλη ΣΤ ΦΕ6
Το πετρέλαιο ως πρώτη ύλη ΣΤ ΦΕ6Το πετρέλαιο ως πρώτη ύλη ΣΤ ΦΕ6
Το πετρέλαιο ως πρώτη ύλη ΣΤ ΦΕ6
 
Hnw coevent 31 mei 2011
Hnw coevent 31 mei 2011Hnw coevent 31 mei 2011
Hnw coevent 31 mei 2011
 
Periodic Table E Config
Periodic  Table  E  ConfigPeriodic  Table  E  Config
Periodic Table E Config
 
Writing A Lab Report- Komperda
Writing A Lab Report- KomperdaWriting A Lab Report- Komperda
Writing A Lab Report- Komperda
 
Engineering entepreneurship fall 2012
Engineering entepreneurship fall 2012Engineering entepreneurship fall 2012
Engineering entepreneurship fall 2012
 
οδυσσέας ελύτης
οδυσσέας ελύτηςοδυσσέας ελύτης
οδυσσέας ελύτης
 
Arron and Marci
Arron and MarciArron and Marci
Arron and Marci
 

Ähnlich wie CSS Media Queries (WebTech Conference 2010)

CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
Francesco Schwarz
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
Jens Grochtdreis
 
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
smueller_sandsmedia
 
Unwissenheit ist ein Segen - Responsive webdesign
Unwissenheit ist ein Segen - Responsive webdesignUnwissenheit ist ein Segen - Responsive webdesign
Unwissenheit ist ein Segen - Responsive webdesign
djesse
 
Typografie im Responsive Webdesign
Typografie im Responsive WebdesignTypografie im Responsive Webdesign
Typografie im Responsive Webdesign
Sven Wolfermann
 
Von Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein MigrationsberichtVon Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein Migrationsbericht
Andreas Schiweck
 
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
Oseon
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
Nico Steiner
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
Jens Grochtdreis
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
Markus Leutwyler
 
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
Patrick Lauke
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
falconwhite
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
Peter Rozek
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Nicolai Schwarz
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Yves Hoppe
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
Jürg Stuker
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Karionis
 
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experienceIcons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
Markus Greve
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Peter Rozek
 

Ähnlich wie CSS Media Queries (WebTech Conference 2010) (20)

CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
 
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
 
Unwissenheit ist ein Segen - Responsive webdesign
Unwissenheit ist ein Segen - Responsive webdesignUnwissenheit ist ein Segen - Responsive webdesign
Unwissenheit ist ein Segen - Responsive webdesign
 
Typografie im Responsive Webdesign
Typografie im Responsive WebdesignTypografie im Responsive Webdesign
Typografie im Responsive Webdesign
 
Von Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein MigrationsberichtVon Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein Migrationsbericht
 
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
 
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experienceIcons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 

Mehr von Michael Jendryschik

Entwicklungen in Spielen als Innovationstreiber für Usability
Entwicklungen in Spielen als Innovationstreiber für UsabilityEntwicklungen in Spielen als Innovationstreiber für Usability
Entwicklungen in Spielen als Innovationstreiber für Usability
Michael Jendryschik
 
Von der Nutzungsanforderung bis zur formalen Softwarespezifikation – Modellie...
Von der Nutzungsanforderung bis zur formalen Softwarespezifikation – Modellie...Von der Nutzungsanforderung bis zur formalen Softwarespezifikation – Modellie...
Von der Nutzungsanforderung bis zur formalen Softwarespezifikation – Modellie...
Michael Jendryschik
 
Personas im Usability Engineering
Personas im Usability EngineeringPersonas im Usability Engineering
Personas im Usability Engineering
Michael Jendryschik
 
HTML5: Einblick, Überblick, Ausblick
HTML5: Einblick, Überblick, AusblickHTML5: Einblick, Überblick, Ausblick
HTML5: Einblick, Überblick, Ausblick
Michael Jendryschik
 
Websemantik: Die nächsten Schritte
Websemantik: Die nächsten SchritteWebsemantik: Die nächsten Schritte
Websemantik: Die nächsten Schritte
Michael Jendryschik
 
6 Beispiele für die nützliche Anwendung von Mikroformaten
6 Beispiele für die nützliche Anwendung von Mikroformaten6 Beispiele für die nützliche Anwendung von Mikroformaten
6 Beispiele für die nützliche Anwendung von Mikroformaten
Michael Jendryschik
 

Mehr von Michael Jendryschik (6)

Entwicklungen in Spielen als Innovationstreiber für Usability
Entwicklungen in Spielen als Innovationstreiber für UsabilityEntwicklungen in Spielen als Innovationstreiber für Usability
Entwicklungen in Spielen als Innovationstreiber für Usability
 
Von der Nutzungsanforderung bis zur formalen Softwarespezifikation – Modellie...
Von der Nutzungsanforderung bis zur formalen Softwarespezifikation – Modellie...Von der Nutzungsanforderung bis zur formalen Softwarespezifikation – Modellie...
Von der Nutzungsanforderung bis zur formalen Softwarespezifikation – Modellie...
 
Personas im Usability Engineering
Personas im Usability EngineeringPersonas im Usability Engineering
Personas im Usability Engineering
 
HTML5: Einblick, Überblick, Ausblick
HTML5: Einblick, Überblick, AusblickHTML5: Einblick, Überblick, Ausblick
HTML5: Einblick, Überblick, Ausblick
 
Websemantik: Die nächsten Schritte
Websemantik: Die nächsten SchritteWebsemantik: Die nächsten Schritte
Websemantik: Die nächsten Schritte
 
6 Beispiele für die nützliche Anwendung von Mikroformaten
6 Beispiele für die nützliche Anwendung von Mikroformaten6 Beispiele für die nützliche Anwendung von Mikroformaten
6 Beispiele für die nützliche Anwendung von Mikroformaten
 

CSS Media Queries (WebTech Conference 2010)

  • 1. Michael Jendryschik | itemis AG CSS Media Queries Auf Browser und Geräte reagieren
  • 2. Michael Jendryschik Konzipiert und entwickelt Websites, schreibt und spricht darüber http://jendryschik.de Leiter Webentwicklung http://www.itemis.de Webkraut http://www.webkrauts.de
  • 3. Es gibt verschiedene Möglichkeiten, den Geltungsbereich von CSS auf bestimmte Medien einzuschränken.
  • 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
  • 14. <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; media=&quot;screen&quot; /> @import url(&quot;style.css&quot;) screen ; @media print { div#header, div#sidebar, div#footer { display: none; } }
  • 15. 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.
  • 17. @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 */ }
  • 18. A List Apart Artikelbeispiel
  • 19. @media screen and (max-width: 600px) { .mast, .intro, .main, .footer { float: none; width: auto; } }
  • 21. @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) { … }
  • 22. kleines iPhone-Beispiel <ol> <li class=&quot;ready&quot;>Fertig?</li> <li class=&quot;go&quot;>Los!</li> </ol>
  • 23. kleines iPhone-Beispiel @media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { body { background-color: yellow; } li.go { display: none; } }
  • 24. 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; } }
  • 25.  
  • 26. CSS Media Queries Grundlagen und Syntax
  • 27. Media Queries sind logische Ausdrücke, die die Angabe von Medientypen und bestimmten Medienmerkmalen miteinander verknüpfen.
  • 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 )
  • 29. Das Schlüsselwort and drückt ein logisches Und aus. screen and (max-width: 300px) (min-width: 450px) and (max-width: 950px)
  • 30. Ein Komma steht für ein logisches Oder. @import url(&quot;style.css&quot;) screen , projection; <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; media=&quot;screen and (min-width: 800px) , projection and (min-width: 800px)&quot; />
  • 31. Das Schlüsselwort not steht für eine logische Negation. <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; media=&quot; not screen and (color)&quot; />
  • 32. Das Schlüsselwort only ist ein Workaround für veraltete Browser, die mit Media Queries nicht umzugehen wissen <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; media=&quot; only screen and (color)&quot; />
  • 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
  • 35. Viewport mindestens 500px hoch? <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;vertical-align.css&quot; media=&quot;screen and ( min-height: 500px )&quot; />
  • 36. Smartphone? @media only screen and ( min-device-width: 320px ) and ( max-device-width: 480px ) { … }
  • 37. Gerät- und Viewportbreite Achtung! Breite des Viewports ist häufig größer als die des Geräts selbst <meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;> Weitere Informationen: http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
  • 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
  • 39. Seitenverhältnis 16:9? @media only screen and ( device-aspect-ratio: 16/9 ) { … } @media screen and ( device-aspect-ratio: 1280/720 ) { … }
  • 40. Horizontale oder vertikale Ausrichtung eines iPad? <link … href=&quot;ipad-portrait.css&quot; media=&quot;(min-device-width: 768px) and (max-device-width: 1024px) and ( orientation: portrait )&quot; /> <link … href=&quot;ipad-landscape.css&quot; media=&quot;(min-device-width: 768px) and (max-device-width: 1024px) and ( orientation: landscape )&quot; />
  • 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
  • 42. Schwarzweiß- oder Farbdrucker? <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;print-color.css&quot; media=&quot;print and ( color )&quot; /> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;print-monochrome.css&quot; media=&quot;print and ( monochrome )&quot; />
  • 43.  
  • 44. iPhone4? <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/css/retina.css&quot; media=&quot;only screen and ( -webkit-min-device-pixel-ratio: 2 )&quot; />
  • 46.  
  • 48. Michael Jendryschik [email_address] [email_address] twitter.com/jendryschik www.facebook.com/jendryschik www.xing.com/profile/Michael_Jendryschik
  • 50. 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