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 für Medienabfragen der Ebene 4 enthält eine verbesserte Syntax für diese Bereichsabfragen.

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

Ein typischer Medienabfragetest für eine minimale Breite des Darstellungsbereichs würde so aussehen:

@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.
}

Test für eine maximale Breite:

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

Und die Version mit der Syntax der Ebene 4:

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

Diese Syntax kann Abfragen rationalisieren, insbesondere beim Testen zwischen zwei Breiten. Im folgenden Beispiel wird mit der Medienabfrage ein Darstellungsbereich mit einer Mindestbreite von 400 Pixeln und einer maximalen Breite von 600 Pixeln getestet.

@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 macht Medienabfragen nicht nur weniger ausführlich, sondern bietet auch den Vorteil der Genauigkeit. Die min-- und max--Abfragen schließen die angegebenen Werte ein, z. B. min-width: 400px-Tests für eine Breite von mindestens 400 Pixel. Die neue Syntax macht es möglich, deutlicher zu sagen, was Sie meinen, und verhindert, dass die Abfragen in Konflikt stehen.

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