Neue Syntax für Bereichsmedienabfragen

bookmark_border Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Hier erfahren Sie, wie Sie mit dieser neuen Syntax Media Queries optimieren können.

Rachel Andrew

Mit Medienabfragen wurde responsives Webdesign ermöglicht. Die Bereichsfunktionen, mit denen die Mindest- und Maximalgröße des Darstellungsbereichs getestet werden kann, werden von etwa 80% der Websites verwendet, die Medienabfragen nutzen. Die Spezifikation „Media Queries Level 4“ enthält eine verbesserte Syntax für diese Bereichsanfragen.

Die folgenden Beispiele zeigen, wie Sie Ihre Abfragen optimieren können.

Eine typische Medienabfrage, die die Mindestbreite des Darstellungsbereichs prüft, würde so geschrieben:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Die neue Syntax ermöglicht die Verwendung eines Vergleichsoperators:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

So testen Sie eine maximale Breite:

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

Und hier die Version mit der Syntax der 4. Ebene:

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

Mit dieser Syntax lassen sich Abfragen optimieren, insbesondere wenn zwei Breiten verglichen werden. Im folgenden Beispiel wird mit der Medienabfrage nach einem Darstellungsbereich mit einer Mindestbreite von 400 Pixeln und einer maximalen Breite von 600 Pixeln gesucht.

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

Mit der neuen Syntax kann das so umgeschrieben werden:

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

Das getestete Element, in diesem Fall width, liegt zwischen den beiden Werten.

Die neue Syntax ist nicht nur prägnanter, sondern auch genauer. Die min-- und max--Abfragen umfassen die angegebenen Werte. min-width: 400px prüft beispielsweise auf eine Breite von mindestens 400 Pixeln. Mit der neuen Syntax können Sie Ihre Absichten klarer formulieren und Kollisionen von Abfragen vermeiden.

Wenn Sie die neue Bereichssyntax verwenden möchten, aber auch Browser berücksichtigen möchten, die sie noch nicht implementiert haben, gibt es ein PostCSS-Plug-in, das die neue Syntax in Ihren Stylesheets in die alte umschreibt.