Media Queries/CSS

Bei den Medien Queries (deutsch: Medienabfragen) handelt es sich um eine 2012 vom W3C als Standard für CSS3 empfohlene Ergänzung. CSS3 und Media Queries sind eine der Grundvoraussetzungen für die Programmierung von Webdesign-Templates im Responsive Webdesign. Media Queries sind CSS Quellcodezeilen im Stylesheet einer Webseite, welche als Weiche für verschiedene Endgeräte dienen können, welche zur Darstellung einer Webseite zum Einsatz kommen.

Praktisches Beispiel

In Abhängigkeit vom Gerätetype und (!) der Breite des Bildschirms wird in diesem Beispiel

@media screen and (min-width: 480px) { 
 div#wasauchimmer {
font-size: 18px;
line-height: 26px;
width: 420px;
}
}
@media screen and (min-width: 1200px) { 
div#wasauchimmer {
font-size: 36px;
line-hight: 40px;
width: 960px;
}
}

Häufig genutzte Media Types

Bei der Darstellung im Browser kann immer nur 1 Typ verwendet werden, allerdings lesen alle Geräte die Definitionen, welche im Mediatyp "all" verwendet werden.

  • all *: Wird automatisch angenommen bei fehlenden Angaben
  • braille
  • handheld
  • print *
  • screen *
  • weiterhin: embossed, projection, speech, tty, tv

*: Die Praxis sieht so aus, dass in 2013 im Grunde genommen nur die mit einem Sternchen gekennzeichneten Medientypen in Browsern unterstützt wurden.

Der Medientyp "handheld" ist eigentlich für Smartphones und andere in der Hand gehaltene Geräte gedacht gewesen, aber in Zeiten höherer Auflösungen und Tablets nutzen auch diese Geräte wie mitunter auch Spielekonsolen eher den Typ "screen".

Die Angabe des Medientypes erfolgt mitunter bei der Referenzierung des CSS-Files und/oder innerhalb des CSS Files.

<link rel="stylesheet" href="print-style.css" media="print"/>
<link rel="stylesheet" href="smart-portrait.css" media="(orientation: portrait)"/>

Der maßgebende Unterschied zwischen den verschiedenen Mediatypen wie screen und print besteht darin, dasss Inhalte bei "screen" fortlaufend dargestellt werden, dh. das Device hat zwar durchaus eine Breite und eine begrenzte Höhe, aber man geht davon aus, dass der Nutzer den dargestellten Inhalten scrollen kann. Im Falle von "print" geht man davon aus, dass die Inhalte auf Seiten dargestellt werden, denen man eine Seitenzahl zuordnen kann.

Häufiggenutze Parameter

width, height, device-width, device-height, min-*, max-* (sofern min und max für den Parameter unterstützt werden).

aspect-ration und device-aspect-ratio beschreiben das Seitenverhältnis von Breite zu Höhe, also b/h. Mit Hilfe dieses Wertes lässt sich letztendlich prüfen, ob beispielsweise ein Endgerät zum Zeitpunkt der Betrachtung im Hochkantformat (Portrait) oder im Querformat (Landscape) eingesetzt wird.

@import 'fullhd.css' (min-width: 1800px);

@media (max-device-width: 330px) { ... }
@media (min-device-width: 331px) and (max-device-width: 500px) { ... }
@media (min-device-width: 501px) and (max-device-width: 800px) { ... }
@media (min-device-width: 801px) and (max-device-width: 1300px) { ... }
@media (min-device-width: 1301px) and (max-device-width: 1600px) { ... }
@media (min-device-width: 1601px) and (max-device-width: 2000px) { ... }
@media (min-device-width: 2001px) and (max-device-width: 3800px) { ... }
@media (min-device-width: 3801px)

Hinweis: Diese Abmessungen sind nur exemplar zu verstehen und sollten auf keinen Fall mit diesen Werten ungeprüft übernommen werden. Nicht zuletzt ist zu prüfen, wieviele Variationen für Abmessungen bzw. hier Bildschirmbreiten Sie überhaupt planen, programmieren und damit berücksichtigen wollen. Man muss sich bewusst machen, dass man jede Template und Subtemplate der Webseite plötzlich mehrfach konzipieren, anpassen und zudem auch testen muss. Einfachere Varianten im Responsive Webdesign arbeiten mit 2 oder 3 Stufen, bessere Varianten mit 4, 5 und mehr.

Logische Verknüpfungen

and : Eine Verknüpfung mit "and" führt dazu, dass beide Bedingungen eingehalten werden müssen, damit dieser Codeblock in CSS berücksichtigt wird. Wird eine Bedingung nicht einhalten, wird der Codeblock für die Darstellung ignoriert.

, : Mit Hilfe von Kommata lassen sich mehrere Varianten programmieren. Trifft eine Variante für das Gerät / Browser zu, wird der entsprechende CSS-File bzw. Code-Block für die Darstellung berücksichtigt.

Syntax

Media Types wie beispielsweise print oder screen werden ohne Klammern verwendet, während hingegen mit Klammern programmiert.

Maßeinheiten

Die Maßeinheit, die von den meisten Browsern verstanden wird, ist "Pixel", in der Programmierung mit px abgekürzt. Beispiel: 500px. Es ist ebenso möglich, die Abmessungen über das Maß "em" abzukürzen, welches sich an der Schriftgröße des entsprechenden Geräts im Browser orientiert. Beispiel: @media (min-width: 48em). Die Erfahrung zeigt, dass die meisten Designer sich mit klaren Pixelangaben beim Entwurf des Gestaltungskonzept zufriedener zeigen. Man sollte sich allerdings von der Erwartungshaltung verabschieden, dass die Darstellung später auch tatsächlich pixelgenau sein muss.

Dieser Test- und Optimierungsaufwand sprengt zum Zeitpunkt dieser Dokumentation das Budget fast jedes kleinen Unternehmens und wird nur noch für zumeist 1, 2 oder 3 exemplarische Geräte und Konfigurationen vorgenommen, sofern überhaupt vereinbart.

 

Typische Problematiken in der Nutzung

Problematik: Media Queries setzen die Fähigkeit des Browsers im Endgerät voraus, CSS3 Befehle und damit Media Queries Befehle zu verstehen. Auch wenn viele Browser heute bei Nutzern automatisch aktualisiert werden, verzichten dennoch manche Unternehmen und/oder Nutzer auf diese automatischen Aktualisierungen und/oder nutzen ältere PC/Endgeräte, auf denen neuere Browser-Versionen nicht mehr lauffähig sind. Die Media Queries Befehle werden hierbei von den Geräten in diesem Fall ignoriert.

Lösungsansatz: Man stellt sicher, dass der Quellcodebereich des CSS Codes, welcher von älteren Geräten verstanden wird, bereits für die Darstellung der Seite ausreichend ist und überschreibt ggf. für neuere Geräte mancheine Einstellung.

Typische Problematiken im Design derartige Webseiten

Für den Designentwurf derartiger Webseiten, die CSS3 Features, Media Queries und Responsive Webdesign zum Einsatz bringen sollen, stellt die Berücksichtigung von Varianten für ältere Browser einen höheren Aufwand dar. Es sollte dahingehend von Beginn an eine bestimmte Mindestversion und/oder Testgeräte für eine Referenzversion der neuen Webseite vereinbart werden.

Typische Problematiken für Auftraggeber

Auftraggeber müssen zunehmend damit leben, dass im Webdesign aus Kostengründen nicht mehr alle Eventualitäten im Webdesign-Entwurf gezeichnet und in der Programmierung bei Webseiten im unteren Drittel des Preissegments getestet werden können. Man muss zwingend damit leben, dass Webseiten nun einmal heutzutage auf jedem Gerät und bei jeder Orientierung (Smartphones) und bei jeden Browser und jeder Versionsnummer eines dieser Infrastruktur-Bestandteile anders aussieht. Die Erwartungshaltung, dass ein Webdesign pixelgenau umgesetzt wird, lässt sich zwar kaum abstellen, defakto aber wirtschaftlich betrachtet heutzutage kaum noch umsetzen.