senäh

17senäh und so…

HTML/CSS/JS
18. Sep 2011
Kommentare: 1

Media Queries make longcat short!

Kategorien: HTML/CSS/JS | 18. Sep 2011 | Kommentare: 1

Schon einmal von Media Queries gehört? Media Queries sind in gewisser Weise eine mit CSS3 eingeführte verbesserte Version der Media Types von CSS2. Media Types dienen dazu das Design einer Webseite mittels CSS für verschiedene Ausgabegeräte anzupassen. So kann man beispielsweise einstellen, dass die Schrift beim Ausdruck einer Webseite kleiner sein soll, als auf der eigentlichen Webseite, um Druckerpapier zu sparen. Media Queries erweitern diese Idee in dem auch bestimmte Eigenschaften und Zustände des Ausgabegerätes abgefragt werden können.

Was nützt mir das? Eine der Eigenschaften des Ausgabegerätes, welche durch Media Queries abgerufen werden können, ist die Auflösung des Bildschirms. Auf diese Weise kann ganz einfach festgestellt werden, ob ein Nutzer eine Webseite von einem Smartphone oder einen Computer aus besucht. Hat man dies festgestellt, könnte man beispielsweise Buttons per CSS vergrößern, damit sie für Smartphonenutzer leichter zu treffen sind. Oder aber man blendet unnötige Schmuckelemente der Website aus, damit sie etwas performanter auf einem Smartphone dargestellt wird. Eine spitzen Sammlung an Praxisbeispielen zu diesen Thema findet ihr unter www.mediaqueri.es.

Wer schon mit Media Types gearbeitet hat, findet sich bei Media Queries schnell zurecht. Um für alle Geräte zu überprüfen, ob die darstellbare Fläche mindestens 500 px breit ist, müsst ihr beispielsweise folgendes schreiben:

@media all and (min-width: 500px) { ... }

Anstatt „…“ formuliert ihr hier alle Eigenschaften, welche erst ab einer Breite der darstellbaren Fläche von 500 px in Kraft treten sollen. Mit „darstellbarer Fläche“ meine ich nicht die Bildschirmgröße (welche aber auch abgefragt werden kann), sondern die Größe des Browserfensters. Im Englischen gibt es dafür den besseren Begriff „Viewport“. Welche Eigenschaften ihr genau abfragen könnt und wie, könnt ihr in der offiziellen Dokumentation nachschlagen.

Ich habe dazu auch ein kleines Beispiel angefertigt. Wenn ihr in dem Beispiel die Breite des Browserfenster verändert, seht ihr wie eine Katze kürzer bzw. länger wird. Das erledigen Media Queries.

Bazinga! (Sheldonisch für Reingefallen!)

Nein, die Katzengrafik hat damit gar nichts zu tun. Wohl aber der Text unterhalb der Katze. Der lautet bei einer Browserfensterbreite von weniger als 401 px „Longcat is short!“ bzw. bei mehr als oder genau 401 px „Longcat is long!“, wobei mehr o’s in „long“ eingefügt werden je breiter ihr das Fenster zieht.

Falls ihr einen Browser nutzt, der keine Media Queries unterstützt, könnt ihr hier das Beispiel sehen. Beachtet, dass sich der dargestellte Inhalt ändert ohne das JavaScript dafür genutzt wird! Alles basiert auf CSS.

Schmal:

Media Queries make longcat short! - 1

Media Queries make longcat short! - 1

Breit:

Media Queries make longcat short! - 2

Media Queries make longcat short! - 2

Und ja, das Copyright des Katzenbildes liegt bei mir 😉

Autor: Pipo

...kommt ursprünglich aus der Designerecke, ist aber im Laufe seines Studiums in die Webentwicklung gestolpert. Kann sich seit dem nicht so richtig entscheiden wo er hingehört und wagt deswegen vielleicht die Flucht nach vorne in ein komplett neues Gebiet. Vielleicht Management? Niemand weiß es. Auch er nicht.