Exclusive, Desktop- oder Mobile-first

Wenn man die CSS-Stile abhängig von der Breite und/oder Höhe des sichtbaren Bereichs vom Browser (oder von der Geräteauflösung) macht, dann muss man entscheiden, mit welchen Größen begonnen wird und wie die Logik im CSS-Code umgesetzt werden soll. Hierbei gibt es mehrere Vorgehensweisen. Dazu zählen:

  • Exclusive
  • Desktop-first
  • Mobile-first

Die richtige Wahl der Vorgehensweise ist vor allem deshalb wichtig, weil beim Zutreffen mehrerer Abhängigkeiten die zuletzt zugewiesenen CSS-Stile die vorherigen überschreiben. Außerdem behalten CSS-Stile beim Zutreffen mehrerer Abhängigkeiten ihre Gültigkeit, bis sie überschrieben werden. Sie müssen nicht jedes Mal neu definiert werden.

Exclusive

Hierbei stellt man sicher, dass einem Zustand nur ein Satz von CSS-Stilen zugewiesen wird. Beispielsweise könnte man abhängig von der Breite des Browserfensters verschiedene CSS-Stile zuweisen.

  1. Unter 320px: h1=16px, h2=14px
  2. Über 320px und unter 768px: h1=16px, h2=14px
  3. Über 768px: h1=18px, h2=14px

Ein Satz von CSS-Stilen wäre bei dieser Variante immer exklusiv. Denn, eine Fensterbreite kann nur einen Wert haben. Diese Methode scheint zunächst die beste Möglichkeit zu sein, da die Stile für die Breiten klar voneinander getrennt sind. Das bringt jedoch einen gravierenden Nachteil mit sich. Dazu ein Beispielcode.

@media only screen and (max-width:319px) {
/* CSS-Stile bis 319px */
h1 { 16px; }
h2 { 14px; }
}

@media only screen and (min-width:320px) and (max-width: 767px) {
/* CSS-Stile 320px - 767px */
h1 { 16px; }
h2 { 14px; }
}

@media only screen and (min-width:768px) {
/* CSS-Stile ab 768px */
h1 { 18px; }
h2 { 14px; }
}

Nachteil bei der Exclusive-Variante

Betrachtet man den Stil für die Überschrift H2, ändert sich die Größe nicht. Es ist immer 14px. Trotzdem muss man den CSS-Stil bei allen drei Breiten angeben. Würde man den CSS-Stil z.B. bei den Breiten ab 768px weglassen, wäre der Stil bei diesen Größen nicht definiert und es würde automatisch die Standardeinstellung des Browsers verwendet werden.

Das führt dazu, dass man bei der Exclusive-Variante immer alle CSS-Stile von neu definieren muss und das führt wiederum dazu, dass der CSS-Code unnötig aufgebläht wird.

Desktop-first

Bei dieser Variante beginnt man zunächst mit den Desktop-Größen und arbeitet sich Schritt für Schritt bis zu den mobilen Größen vor. Ein Beispielcode.

@media only screen and (min-width:768px) {
/* CSS-Stile ab 768px */
h1 { 18px; }
h2 { 14px; }
}

@media only screen and (max-width:767px) {
/* CSS-Stile bis 767px */
h1 { 16px; }
h2 { 14px; }
}

@media only screen and (max-width:319px) {
/* CSS-Stile bis 319px */
/* h1 und h2 müssen nicht erneut angegeben werden */
}

Vorteil bei Desktop-first

  • Betrachtet man die CSS-Stile für die Breiten (max-width: 767px) und (max-width: 319px), so muss man feststellen, dass die Stile für die Überschriften (h1 und h2) bei den Stilen von (max-width: 319px) nicht erneut definiert werden müssen.
  • Denn, ist ein Browserfenster z.B. 300px breit, dann treffen beide Abhängigkeiten zu. 300px ist nämlich kleiner als 767px und kleiner als 319px.
  • Da die CSS-Stile für die Überschriften bereits bei (max-width: 767px) definiert wurden, braucht man es bei (max-width: 319px) nicht erneut zu definieren, da sie identisch wären.
  • Man hat also zwei Zeilen CSS-Code gespart.

Mobile-first

Den Ansatz der Code-Ersparnis verfolgt man auch bei Mobile-first, nur mit dem Unterschied, dass man zunächst mit den mobilen Größen beginnt und sich Schritt für Schritt zu den Desktop-Größen vorarbeitet. Ein Beispielcode.

@media only screen and (max-width:319px) {
/* CSS-Stile bis 319px */
h1 { 16px; }
h2 { 14px; }
}

@media only screen and (min-width:320px) {
/* CSS-Stile ab 320px */
h1 { 16px; }
h2 { 14px; }
}

@media only screen and (min-width:768px) {
/* CSS-Stile ab 768px */
h1 { 18px; }
}

Vorteil bei Mobile-first

Betrachtet man die Stile ab (min-width: 320px) und (min-width: 768px), so kann man auch hier CSS-Code einsparen. Bei einer Browserauflösung von z.B. 1024 würden ebenfalls beide Abhängigkeiten zutreffen. Denn, 1024px ist größer als 320px und auch größer als 768px. In diesem Beispiel wurde bei (min-width: 768px) lediglich die Überschrift h1 neu definiert, da sie anders sein muss. Wäre sie identisch wie bei (min-width: 320px), könnte man den CSS-Stil an dieser Stelle ebenfalls weglassen. Die Möglichkeit, CSS-Code zu sparen, ist sowohl bei Desktop-first, als auch bei Mobile-first gegeben.

Trotzdem favorisieren viele Entwickler die Variante Mobile-first. Der Grund dafür ist, dass man während der Entwicklung tendenziell vor unerwünschten "Überraschungen" verschont wird. Denn, beginnt man mit Desktop-first, so führen einige CSS-Stile bei kleinen Displays zu unerwünschten Effekten und das kann dazu führen, dass man Aufgrund der Vererbung den gesamten Code überarbeiten muss. CSS-Stile, die für mobile Displays optimiert wurden, führen dagegen auf großen Monitoren seltener zu unerwünschten Effekten. Und wenn doch, dann muss man trotzdem nicht den gesamten Code überarbeiten, sondern nur die Codezeilen für die Breitenangaben, die es betrifft. Nachfolgend ein kompletter CSS-Code für Mobile-first, der als Grundlage dienen und angepasst werden kann.

/* Hier kommen alle CSS-Einstellungen */
/* Diese sind auch gültig für Browser, die keine @media queries kennen */
/* Überschreibung durch nachfolgende Einstellungen bei zutreffenden Queries */

@media only screen and (max-width:320px) {
/* CSS Einstellungen für Auflösungen unter 320px */
/* Können identisch mit ab 320px sein */
}

@media only screen and (min-width:320px) {
/* CSS Einstellungen für Auflösungen über 320px */
/* Für Smartphones geeignet */
}

@media only screen and (min-width:480px) {
/* CSS Einstellungen für Auflösungen über 480px */
/* Überschreibt die min-width: 320px */
/* Für Smartphones geeignet */
}

@media only screen and (min-width:640px) {
/* CSS Einstellungen für Auflösungen über 640px */
/* Überschreibt die min-width: 480px */
/* Für Smartphones und ggf. Tablets geeignet */
}

@media only screen and (min-width:768px) {
/* CSS Einstellungen für Auflösungen über 768px */
/* Überschreibt die min-width: 640px */
/* Für Tablets geeignet */
/* Kann als Breakpoint dienen */
}

@media only screen and (min-width:1024px) {
/* CSS Einstellungen für Auflösungen über 1024px */
/* Überschreibt die min-width: 768px */
/* Können identisch mit den generellen Einstellungen sein */
/* Für Desktop-PC geeignet */
}

Bei diesem Beispiel sind einmal die CSS-Einstellungen nochmal zu Beginn aufgeführt. Sie dienen für Browser, die keine Media-Queries kennen. Außerdem wurden die CSS-Stile für Breiten ab 480px, 640px und 1024px hinzugefügt.