Wofür brauche ich CSS Media Queries?

Die Abstände auf der Website in der mobilen Ansicht gefallen dir nicht? Die Anordnung der Boxen in der Tablet-Ansicht ist für deinen Geschmack nicht optimal? Solche und ähnliche Probleme lassen sich in CSS seit längerer Zeit problemlos adressieren und angehen: mit Media Queries.

Salopp gesagt, ist es mithilfe von Media Queries möglich, die CSS-Angaben in verschiedene Schubladen zu sortieren.

Vielleicht hast du schon Mal solche oder ähnliche Konstrukte in CSS gesehen und dich gefragt wofür die gut sind:

@media (max-width: 768px) {.newsbox {padding: 3%;}}

Das war ein Beispiel für eine Medienabfrage (engl. Media Query). Die CSS-Regel innerhalb der geschweiften Klammer, wird nur unter bestimmten Umständen angewandt, und zwar dann, wenn die Breite des Fensters (engl. Viewport) maximal 768 Pixel breit ist.

Ist das Fenster dagegen 769 oder mehr Pixel breit, dann wird die Regel ignoriert.

Mehrere Bedingungen kombinieren

Die Medienanfragen erlauben nicht nur eine Bedingung. Du kannst die problemlos Miteinader kombinieren. So könnte eine Abfrage ausschauen, die Fensterbreiten in einem bestimmten Bereich berücksichtigt. Die folgende Abfrage spricht nur Fensterbreiten zwischen 769 und 839 Pixel an:

@media (min-width: 769px) and (max-width: 839px) {...}

Die Medienabfragen berücksichtigen nicht nur Zahlenwerte, du kannst auch mit Schlüsselwörtern arbeiten. Folgende Medienabfrage…

@media print and (min-width: 50em) {}

… wird nur bei der Druckausgabe berücksichtigt und das auch nur dann, wenn das Fenster bzw. die Ausgabe mindestens 50 em breit ist.

Medienabfragen in HTML-Dokumenten

Du kannst mit den Medienabfragen auch in HTML-Dokumenten arbeiten und diese sind dir wahrscheinlich auch schon über den Weg gelaufen:

<head>
    <link rel="stylesheet" href="alle-medien.css">
    <link rel="stylesheet" href="bildschirm.css" media="screen">
    <link rel="stylesheet" href="druckausgabe.css" media="print">

Das erste CSS hat keine Medienangabe und wird immer angewendet. Das zweite CSS kommt nur bei Bildschirmen zum Einsatz und das dritte CSS wird nur berücksichtigt, wenn das Dokument ausgedruckt wird. Aber bei der Angabe der Schlüsselwörter ist noch nicht Schluss. Auch hier kannst du Zahlenwerte einsetzen.

<link href="mobil.css" rel="stylesheet" media="screen and (max-width: 768px)">

In diesem Fall wird die CSS-Datei nur bei Bildschirmen mit einer maximalen breite von 768 Pixel geladen und sonst nicht. Diese Art der Einbindung hat den großen Vorteil, dass Sie nicht den Rendering Prozess blockiert, was unter anderem von PageSpeed Insights zu Recht angemeckert wird.

Es ist nicht notwendig CSS-Regeln zu laden, die für die Ausgabe nicht notwendig sind. Dies zu unterbinden macht die Website performanter und kommt auch den Besuchern zugute.

Weitere Informationen und auch Beispiele zu diesem Thema findest du in den unten verlinkten Quellen.

Quellen

CSS/Media Queries/Medienmerkmale auf SelfHTML
Media Queris auf MDN
Das link-Element auf MDN [en]
Rendering-blockierendes CSS auf Google Developers

Image(s) licensed by Ingram Image/adpic.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.