CSS Media Queries - Screen Size Icons - Tag 8 im CSS3 Adventskalender 2011

CSS3 Media Queries - Screen Size Icons - Tag 8 im CSS3 Adventskalender 2011Screen Size Icons - CSS3 ist in aller Munde. Eine der vielen nützliche Sachen an CSS3, sind die Media Queries. Damit lassen sich gewissen Dinge abfragen und auf auf der Ergebnis reagieren. Der meistbenutzte Anwendungsfall dürfte sein, dass man damit die Webseite für verschiedene Auflösungen bereit stellt. Somit bekommt man mit einem kleinen Netbook die Website etwas anders angezeigt als wenn man mit einem 27 iMac diese anschaut. Vorteil ist einfach, dass man das gegeben Ausgabegerät optimal nutzen kann. Nicht uninteressant das Ganze. Da im folgenden Media Queries Tutorial keine Einschränkung bezüglich eines bestimmten Medien Typen wie PC, Handheld oder Projektor vorliegen soll, gibt es hierfür keine zusätzliche Referenzierung zu einer seperaten CSS Datei. Das heißt, die CSS Eigenschaften für die veränderten Bedingungen basierend auf den Media Queries können in der CSS-Datei definiert werden, in der auch alle anderen Eigenschaften zur Gestaltung angelegt werden.

HTML-Code zur Darstellung der Screen Size Icons

Um CSS Media Queries unkompliziert und bildhaft zu beschreiben, basiert das heutige Beispiel auf einem recht überschaubaren HTML-Code. Dieser Enthält neben der Überschrift h1, die span-Elemente über deren CSS Eigenschaften die Screen Size Icons ausgegeben werden können.

CSS3 MediaQueries - HTML-Code der Überschrift
<h1>     <span class="#"widescreen">widescreen</span>
    <span class="#"screen">screen</span>
    <span class="#"laptop">laptop</span>
    <span class="#"ipad">ipad</span>
    <span class="#"iphone">iphone</span>
</h1>

CSS-Code zur Darstellung der Screen Size Icons bei Ausgabegeräten mit verschiedenen Viewports

Auf die Ausrichtung und die Farbgebung des Hintergrundes für dieses CSS Media Query Beispiel möchte ich an dieser Stelle nicht näher eingehen, da dies an dieser Stelle nicht von Relevanz ist. Daher überspringen wir diese Eigenschaften und beginnen mit den Eigenschaften für die Headline h1, die für die Darstellung der Screen Size Icons verantwortlich ist. Um den entsprechenden Freiraum für die Darstellung der Icons zu schaffen, bekommen diese von der Headline eine Breite und Höhe von jeweils 200px zugestanden.

Ausrichten der Screen Size Icons
h1 {
    float: left;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background: #fff;
}
...
.widescreen,
.screen,
.laptop,
.ipad,
.iphone
{
    width: 46px;
    height: 40px;
    text-indent: -99999px;
    background:url(images/screenIcons.png) 0 -160px no-repeat;
    position: absolute;
    left:50%;
    top:50%;
    margin: -20px 0 0 -23px;
}

Sprite-GrafikSie selbst sind 46px breite und 40px hoch und werden über eine Sprite Grafik (siehe Abbildung rechts) entsprechend dem Viewport des Betrachters unterschiedlich innerhalb dieser Sprite-Grafik positioniert und ausgeblendet. Die klasse .widescreen wird initial als erstes ausgerichtet und im nächsten CSS-Block lediglich von den anderen Klassen in Bezug auf die Position innerhalb der hier abgebildeten Sprite Grafik in y-Richtung verändert. Da in der Grafik mit dem Icon für die kleinsten Endgeräte begonnen wird, ist der Negativ-Wert der y-Position bei den großen Endgeräten höher (widescreen = -160px, screen = -120px, ...). Wer jetzt noch zwischen Landscape und Portrait bei Tablets und Smartphones unterscheiden möchte bzw. muss, kann diese Grafiken der Sprite einfach hinzufügen und wie im weiteren Verlauf des Tutorials beschrieben wird, über entsprechende Klassen zuweisen. Das heißt, wird der Viewport aus Basis einer bestimmten max-width verändert, wird die entsprechende Klasse und deren Position innerhalb der Sprite-Grafik dazu verwendet, das entsprechende Icon anzuzeigen. Der innerhalb des span-Elementes enthaltene Titeltext wird etwas nach links aus dem Blickfeld des Betrachters gezogen (text-indent).

Ausrichten der Screen Size Icons
.screen {
    display: none;
    background-position: 0 -120px;
}
.laptop {
    display: none;
    background-position: 0 -80px;
}
.ipad {
    display: none;
    background-position: 0 -40px;
}
.iphone {
    display: none;
    background-position: 0 0px;
}

Im Grunde ist es ganz einfach. Wir zeigen dem Benutzer mittels eines Icons an, was er für eine Version der Website zu sehen bekommt. Wenn er den Browser nicht in volle Größe nutzt bekommt er unter Umständen eine andere Version der Seite als wie wenn er den Browser in voller Größe nutzen würde.

CSS MediaQueries - Desktop (widescreen, screen)

Wir haben folgende Fälle iPhone, iPad, Laptop, normale Bildschirmgröße und sehr großer Bildschirm. Durch groß und klein ziehen des Browserfensters kann man dieses Verhalten einigermaßen gut simulieren und somit die Veränderungen sichtbar werden lassen.

< 1920px und < 1441px
@media screen and (max-width:1921px) {
    .screen, .laptop, .ipad, .iphone {
        display: none;
    }
    h1 .widescreen {
        display: block;
    }
}
...
@media screen and (max-width:1441px) {
    .widescreen, .laptop, .ipad, .iphone {
        display: none;
    }
    .screen {
        display: block;
    }
}

Für Entgeräte die in die Kategorie Widescreen (größer 1920px) und sScreen (größer 1441px) fallen, wird wie in der folgenden Abbildung zu erkennen, entweder ein widescreen-Icon (links) oder ein screen-Icon über zugewiesen bzw. das eine Icon wird über die CSS-Eigenschaft display und den Wert block "eingeblendet", während die anderen ausgeblendet werden.

CSS3 media Queries - Widescreen, ScreenCSS3 media Queries - Widescreen, Screen

Da es außer diesen beiden Ausgabemedien auch kleiner Ausgabegeräte gibt und hier denke ich in erster Linie an mobile Endgeräte, müssen auch diese ein entsprechendes Icon zugewiesen bekommen.

CSS MediaQueries - Laptop/Tablet (laptop, ipad)

Der nun notwendige Arbeitsschritt ist analog zu dem vorangegangen - "einblenden", "ausblenden" und fertig! Dazu wird allen Engeräten mit einem maximalen Viewport von 1281px, dass Laptop-Icon zugewiesen.

< 1281px und < 1025px
@media screen and (max-width:1281px) {
    .widescreen, .screen, .ipad, .iphone {
        display: none;
    }
    .laptop {
        display: block;
    }
}
...
@media screen and (max-width:1025px) {
    .widescreen, .screen, .laptop, .iphone {
        display: none;
    }
    .ipad {
        display: block;
    }
}

Für alle kleineren Endgeräte mit einem maximale bis zu 1025px breiten Viewport, erhalten dann das Icon für Tablets. Genauer gesagt, dass in der folgenden Abbildung rechts befindliche iPad-Icon.

CSS3 media Queries - Laptop, iPadCSS3 media Queries - Laptop, iPad

Das nun fast folgerichtig noch übrige Icon, bezieht sich auf die Darstellung von Inhalten mittels eines Smartphones bzw. um bei den Bezeichnungen der Klassen zu bleiben eines iPhones.

CSS MediaQueries - Smartphone (iphone)

Alle anderen noch handlicheren und somit noch kleineren Endgeräte mit einer Auflösung kleiner 759px, erhalten nun im letzten Arbeitsschritt das iPhone-Icon zugewiesen.

< 759px
@media screen and (max-width:481px) {
    .widescreen, .screen, .laptop, .ipad {
        display: none;
    }
    .iphone {
        display: block;
    }
}

Wie in der abschliessenden Abbildung der Icons zu erkennen ist, bekommen diese Endgeräte mit kleinerem Viewport, dass hier abgebildete iphoneIcon über die klasse iphonezugewiesen.

CSS3 media Queries - iPhoneCSS3 media Queries - iPhone

Dieses hier abgebildete kleine Beispiel soll lediglich einen kleinen Einblick darüber geben, was man mit den CSS Media Queries alles anfangen kann und das ohne relativ viel Aufwand!

View Media Queries Demo

CSS Media Queries im praktischen Einsatz

Das dieser Ansatz keine reine Spielerei sein muss, sondern durchaus eine brauchbare Information darstellen kann, zeigt die T-Shirt Galerie Make-Better-Shirts. Dort ist das oben beschriebene Verhalten des Icons implementiert (links oben unterhalb des Logos).

CSS3 Media Queries - Make-Better-ShirtsCSS3 Media Queries im Einsatz in der T-Shirt Galerie von Make-Better-Shirts

Wer das hier beschriebene Verhalten dieser Icons nicht nur anhand der Abbildungen und der Code-Sbnippets nachvollziehen möchte, dem sei die Demo-Version dieses CSS3 Tutorials empfohlen.

CSS Media Queries - Browser-Support

Unabhängig von den Möglichkeiten die sich mit den CSS3 Modulen rund um CSS Media Queries ergeben, ist wie die folgende Abbildung zeigt, auch die Browser-Unterstützung dieses Moduls mittlerweile sehr beachtlich. Wer von Euch also in dem Besitz einer aktuellen Version der relevanten Browser ist, kann die Demo-Version dieses CSS3 Tutorials auch im Browser nachvollziehen.

CSS3 Media Queries - Browser-SupportCSS3 Media Queries

Aber auch für Anwender älterer Browserversionen und hier schiele ich ein wenig nach Redmond, gibt es die Möglichkeit des Nachempfindens von CSS Media Queries, wenn auch nur mit Hilfe von JavaScript. Das Script css3-mediaqueries.js von Wouter van der Graaf ermöglicht es, dass auch diese teilweise über 10 Jahre alten Browser in den "Genuss" des hier vorgestellten Verhaltens kommen können.

Informationen über den Gastautoren David Hellmann

Gastautor des heutigen CSS3 Adventskalender-Türchens ist David Hellmann. Er ist 26 Jahre alt, Grafikdesigner, Webdesigner und Webentwickler und lebt in der Rheinmetropole Köln. Nur Pixel schubsen ist für Ihn nicht das Wahre. Das Photoshop-Fenster minimiert er laut eigenen Angaben ganz gern mal, um sich mit HTML5 und CSS3 auseinanderzusetzen. Dieser Gastbeitrag zeigt, wie gut er sich in diesen BEreichen auskennt. Wer die interessanten und inspirierenden Postings seiner Social-Media Kanäle nicht verpassen möchte, dem ist neben seinem Twitter-Account auch die Google Seite von David zu sehr empfehlen!

  1. Sebastian K. 08 Dez 2011, 09:06

    Danke für dieses Tutorial. Endlich mal eine Darstellung und auch Ermittlung der Bildschirmgröße auf unterschiedlichen Geräten. War mir bisher nicht bewußt, dies so zu regeln. Werde das Tutorial in meine arbeit gleich mal einfließen lassen. Danke.


  2. Tom 08 Dez 2011, 09:57

    Jetzt nach dem ich hier bereits einige Tage mit diese CSS3 Tutorials ansehe, muss ich endlich tätig werden. Ich glaube, ich habe dieses Thema viel zu lange nicht in Betracht gezogen. Danke für diesen "Denkanstoss"!


  3. Florence
    08 Dez 2011, 13:03

    Kleiner Hinweis: Damit es dann auf Smartphones auch wirklich funktioniert, ist es wichtig eine Metaangabe zu ergänzen, die verhindert, dass Smartphones auch weiterhin die Seite kleinzoomen. Sonst tun Smartphones weiterhin so, als würden sie 800px oder 960px darstellen und reagieren nicht auf die gewünschen max-width-Angaben.

    Die Metaangabe lautet beispielsweise

    Eine schöne ausführliche Erläuterung dieser Angabe gibt es bei http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

    ansonsten natürlich auch bei
    http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html


  4. Florence
    08 Dez 2011, 13:06

    Die entscheidende Zeile aus meinem letzten Kommentar wurde rausgelöscht, weil es HTML-Code war: jetzt ohne die spitze Klammer am Anfang und die spitze Klammer am Schluss:

    spitzeKlammerauf
    meta name="viewport" content="width=device-width, initial-scale=1.0"
    spitzeKlammerzu


  5. Tobi
    08 Dez 2011, 23:43

    Super Tutorial, wirklich klasse dein Adventskalender!
    Bin schon auf deinen nächsten Beitrag gespannt :)


  6. David Hellmann
    13 Dez 2011, 10:20

    @Florence

    Jo, recht hast du :) Hab ich da wirklich vergessen. Ist natürlich auf www.makebettershirts.com mit drin :)


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage