Responsive Design: Dynamisches CSS3 – Conditions for CSS3

Das Ziel von Responsive Webdesign ist es eine optimale Darstellung des Webdesigns für die jeweilige Auflösung des Endgeräts abzubilden. Aktuelle Studien vom User Verhalten zeigen, daß auch ein einziger User mit durchschnittlich drei Endgeräten am Tag online ist. Das ist zum einen ein Desktop-PC auf der Arbeit, zwischendurch das Smartphone, wenn er unterwegs ist ,und abends ein Tablet, Laptop oder MacBook. Ich habe auch bereits in den letzten Artikeln darauf hingewiesen, daß das TV Format ganz sicher ganz Kommen wird. Der Deutsche ist ein TV Kind. Wenn das Format gut bedienfähig wird werden wir hier ganz tolle neue Möglichkeiten erschließen. Da sich bereits mit Smartphones Fernseher bedienen lassen ist der Weg klar und wird kommen. Jetzt aber zurück zum eigentlichen Thema.

CSS3 Conditions in Media Queries

If CSS3 Media Query Statement
Ein Kernfeature von Webdesign Media Queries ist das logische if Statement. „If“ die maximale Displaybreite 400px, dann verwende folgende CSS Vorgabe.

And CSS3 Media Query Statement
Mit dem Media Query Keyword „and“ kann das If-Statement mit Bedingungen erweitert werden.
AND Beispiel Example CSS3 Media Query Statement
@media (min-width: 500px) and (max-width: 700px) {
html { background: black; }
}

Das kann auch mit einer anderen Syntax und einem einfachen Komma erreicht werden
Komma separiert Comma separate CSS3 Media Query Statement
@media (max-width: 500px), (min-width: 700px) {
html { background: black; }
}

Not CSS3 Media Query Statement
Das Keyword Not dreht eine CSS Logik um
@media not all and (max-width: 500px) {
html { background: blue; }
}
Ausschließlich ein not (max-width: 600px) zu verwenden hat in meinen Augen unerwünschte Nebeneffekte. Daher habe ich diesen kleinen CSS3 Media Query Hack eingefügt. Das Ganze funktioniert bei Komma separierten Statements auch nicht so, wie ich es mir am Anfang vorgestellt habe. An dieser Stelle macht es deher gerade am Anfang Sinn mit zusätzlichen Klammern zu arbeiten. Das gewähleistet die Übersichtlichkeit im CSS3 Style.

Zusätzliches zum not CSS3 Media Query Statement
not a and b entspricht not (a and b) entspricht (not a) and y. Ich persönlich würde die letzte Schreibweise vorziehen.

Hinweis CSS3 Media Query Statement
Es ist sehr wichtige die Übersichtlichkeit in seinen Media Queries ist zu behalten. Daher macht es Sinn bestimmte Statements zu einer CSS Eigenschaft untereinander gelistet abzubilden. Meine Beispiele hier beziehen sich ja immer nur auf dem Hintergrund. Hier kann man sich natürlich sehr leicht vorstellen, dass es sich am Beginn des CSS Dokuments befindet. Der wesentliche Bestandteil ist allerdings die Darstellung von Bildern, Navigationen und Seitenbereichen. Dabei werden einzelne Spalten bei kleineren Auflösungen und Endgeräten meistens völlig ausgeblendet. Daher macht es Sinn sein CSS Style von Anfang an in drei Teile aufzuteilen. Die Teile sind Layout, Module und State. Diese Vorgehensweise ist von Jonathan Snook in seinem smacss CSS Prinzip sehr gut erläutert.

www.smacss.com

@media (max-width: 500px) {
html { background: red; }
}

@media (min-width: 601px) and (max-width: 900px) {
html { background: yellow; }
}

@media (min-width: 901px) {
html { background: green; }
}

Im Grunde hat das etwas von einem switch-Statement ohne den default case.

Überschreiben – Overriding CSS3 Media Query Statement

Es wird immer schwerer mit Media Queries arbeiten, wenn mehrere Konditionen zum gleichen Zeitpunkt für ein Element erfüllt sind. Das lässt sich natürlich nicht immer vermeiden. Daher macht es mehr Sinn Konditionen zu überschreiben. Nachfolgend ist das oben aufgeführte CSS3 Statement so geschrieben, daß direkt überschrieben wird. Nach meiner Erfahrung ist es besser so zu arbeiten. Der Vollständigkeit halber habe ich hier allerdings beide Fälle abgebildet. Ich glaube allerdings auch, daß sich in Zukunft noch einiges in dem Bereich tun wird und auch die Standards viel Entwicklung mitmachen werden.

@media (min-width: 500px) {
html { background: red; }
}

@media (min-width: 600px) {
html { background: yellow; }
}

@media (min-width: 900px) {
html { background: green; }
}

Media Queries wirken immer unabhängig von den Eigenschaften, die in ihnen aufgerufen werden. Daher ist es sehr wichtig die Übersichtlichkeit zu behalten und die Reihenfolgen nicht durcheinander zubringen. Das kann sonst auch später zu Darstellungsfehlern führen.

Smartphones zu erst – Mobile First
Es hat sich als Media Queries Best Practice herausgestellt in den CSS3 Styles zu erst die Smartphone Ansicht zu definieren und dann CSS3 Eigenschaften für größere Displays und Screens zu definieren. Deshalb werden in der Regel min-width Media Queries verwendet.

html { background: red; }
@media (min-width: 500px) {
html { background: yellow; }
}

Desktop zuerst – Desktop First
Natürlich gibt es die Möglichkeit auch von einem großen Screen auf einem kleinen herab zu definieren. Das bietet sich vor allem an, wenn bestehende Seiten bisher nicht Responsive Webdesign nutzten aufbereitet werden sollen.

html { background: red; }
@media (max-width: 600px) {
html { background: green; }
}

Hinweis
Es gibt natürlich auch Fälle in denen das möglich ist. Hier sind allerdings zwei Dinge zu

beachten. Es reicht nicht nur für Smartphones und kleinere Displays Spalten oder Inhalte ausblenden oder kleiner darzustellen. Content First ist ein sehr wichtiger Ansatz, der in diesem Artikel nicht näher erläutert wird: Jedem muss aber klar sein das ein mobiler User in seinem Verhalten und seinen Interessen völlig anders ist, als ein Desktop User. Das können wir auch in unserem eigenen Verhalten auf den beiden Geräten sehr gut miteinander vergleichen. Mobil wird viel viel weniger geklickt, gescrollt und auf der Seite insgesamt verbracht. Zudem möchte man eine sehr gezielte Information in diesem Moment haben. Kontakt und Adresse sind hier viel weiter im Vordergrund, als Bildergalerien, wie im Desktop Internet das Salz in der Suppe sind.

Komplexe Media Queries
@media
only screen and (min-width: 300px),
not all and (min-width: 300px),
not print and (min-height: 300px),
(color),
(min-height: 300px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: yellow; }
}

Zu beachten ist das das only Keyword dafür bestimmt ist den Browser, die keine Media Queries unterstützen, anzusprechen. Dieser CSS Fallback wird sicher noch lange Zeit in den kommenden zwei verwendet werden uns in Zukunft ein echter Klassiker.