Neue Syntax für Bereichsmedienabfragen

Finden Sie heraus, wie diese neue Syntax Medienabfragen optimieren kann.

Rachel Andrew

Medienabfragen ermöglichen responsives Design und die Bereichsfunktionen, mit denen die minimale und maximale Größe des Darstellungsbereichs getestet werden können, werden von etwa 80% der Websites verwendet, die Medienabfragen verwenden. Die Spezifikation „Media Queries Level 4“ enthält eine verbesserte Syntax für diese Bereichsanfragen.

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

Eine typische Medienabfrage, die eine minimale Ansichtsbreite 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.
}

Dies kann in der neuen Syntax wie folgt umgeschrieben werden:

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

Die Funktion, die Sie testen, in diesem Fall width, befindet sich zwischen den beiden Werten.

Die neue Syntax ist nicht nur prägnanter, sondern auch genauer. Die Abfragen min- und max- 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 genauer ausdrücken und Kollisionen von Abfragen vermeiden.

Wenn Sie die neue Bereichssyntax unter Berücksichtigung von Browsern verwenden möchten, die diese noch nicht implementiert haben, gibt es ein PostCSS-Plug-in, das die neue Syntax in Ihre Stylesheets in die alte umschreibt.