Die neue CSS-Medienabfrage-Bereichssyntax

Wir verlassen uns auf CSS-Medienabfragen zum Auswählen und Stylen von Elementen basierend auf einer Zielbedingung. Diese Bedingung kann alle möglichen Dinge sein, fällt aber normalerweise in zwei Lager: (1) die Art der verwendeten Medien und (2) eine bestimmte Funktion des Browsers, des Geräts oder sogar der Umgebung des Benutzers.

Angenommen, wir möchten ein bestimmtes CSS-Styling auf ein gedrucktes Dokument anwenden:

@media print {
  .element {
    /* Style away! */
  }
}

Die Tatsache, dass wir Stile bei einer bestimmten Viewport-Breite anwenden können, hat CSS Media Queries seit Ethan Marcotte zu einem Kernbestandteil des responsiven Webdesigns gemacht prägte den Begriff. Wenn die Viewport-Breite des Browsers eine bestimmte Größe hat, wenden Sie eine Reihe von Stilregeln an, die es uns ermöglichen, Elemente zu entwerfen, die auf die Größe des Browsers reagieren.

/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
  .element {
    /* Style away! */
  }
}

Beachten Sie die and da drin? Das ist ein Operator, mit dem wir Anweisungen kombinieren können. In diesem Beispiel haben wir eine Bedingung kombiniert, dass der Medientyp a ist screen und das ist es min-width Funktion eingestellt ist 30em (oder höher). Wir können dasselbe tun, um auf eine Reihe von Darstellungsbereichsgrößen abzuzielen:

/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
  .element {
    /* Style away! */
  }
}

Jetzt gelten diese Stile für einen expliziten Bereich von Ansichtsfensterbreiten und nicht für eine einzelne Breite!

Aber die Media Queries Level 4-Spezifikation hat eine neue Syntax eingeführt, um eine Reihe von Viewport-Breiten anzusprechen, indem gängige mathematische Vergleichsoperatoren verwendet werden – Dinge wie <, > und = – die syntaktisch sinnvoller sind und weniger Code schreiben.

Lassen Sie uns untersuchen, wie das funktioniert.

Neue Vergleichsoperatoren

Das letzte Beispiel ist ein gutes Beispiel dafür, wie wir Bereiche „gefälscht“ haben, indem wir Bedingungen mithilfe von kombiniert haben and Operator. Die große Änderung in der Media Queries Level 4-Spezifikation besteht darin, dass wir neue Operatoren haben, die Werte vergleichen, anstatt sie zu kombinieren:

• < wertet aus, ob ein Wert ist weniger als ein anderer Wert
• > wertet aus, ob ein Wert ist größer als ein anderer Wert
• = wertet aus, ob ein Wert ist gleich auf einen anderen Wert
• <= wertet aus, ob ein Wert ist kleiner oder gleich to ein anderer Wert
• >= wertet aus, ob ein Wert ist größer oder gleich to ein anderer Wert

So könnten wir eine Medienabfrage geschrieben haben, die Stile anwendet, wenn der Browser es ist 600px breit oder größer:

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

So sieht es aus, dasselbe mit einem Vergleichsoperator zu schreiben:

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

Ausrichtung auf eine Reihe von Darstellungsbereichsbreiten

Wenn wir CSS-Medienabfragen schreiben, erstellen wir oft eine sogenannte Haltepunkt — ein Zustand, bei dem das Design „bricht“ und eine Reihe von Stilen angewendet wird, um es zu reparieren. Ein Design kann viele Haltepunkte haben! Und sie basieren normalerweise darauf, dass das Ansichtsfenster zwischen zwei Breiten liegt: wo der Haltepunkt beginnt und wo der Haltepunkt endet.

So haben wir das mit dem gemacht and -Operator zum Kombinieren der beiden Breakpoint-Werte:

/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
  /* etc. */
}

Sie bekommen ein gutes Gefühl dafür, wie viel kürzer und einfacher es ist, eine Medienabfrage zu schreiben, wenn wir den booleschen Wert fallen lassen and Operator zugunsten der neuen Bereichsvergleichssyntax:

@media (400px <= width <= 1000px) {
  /* etc. */
}

Viel einfacher, oder? Und es ist klar, was genau diese Medienabfrage tut.

Browser-Unterstützung

Diese verbesserte Medienabfragesyntax befindet sich zum Zeitpunkt des Verfassens dieses Artikels noch in den Anfängen und wird derzeit nicht so umfassend unterstützt wie der kombinierte Ansatz min-width und max-width. Wir sind aber nah dran! Safari ist zu diesem Zeitpunkt der einzige große Überbleibsel, aber Dafür gibt es ein offenes Ticket dem du folgen kannst.

Schauen wir uns ein Beispiel an

Hier ist ein Layout, das sich gut für größere Bildschirme wie einen Desktop eignet:

Dieses Layout hat Basisstile, die allen Haltepunkten gemeinsam sind. Aber wenn der Bildschirm schmaler wird, beginnen wir, Stile anzuwenden, die bedingt an verschiedenen kleineren Haltepunkten angewendet werden, die ideal für Tablets bis hinunter zu Mobiltelefonen geeignet sind:

Um zu sehen, was passiert, sehen Sie hier, wie das Layout zwischen den beiden kleineren Haltepunkten reagiert. Die versteckte Navigationsliste wird ebenfalls angezeigt title der main wird erhöht font-size.

Diese Änderung wird ausgelöst, wenn die Änderungen des Darstellungsbereichs von der Übereinstimmung mit den Bedingungen eines Mediums zu einem anderen übergehen:

/* Base styles (any screen size) */
header {
  display: flex;
  justify-content: center;
}

header ul {
  display: none;
}

.title p {
  font-size: 3.75rem;
}

/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }

  header ul {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .title p {
    font-size: 5.75rem;
  }
}

Wir haben einige der Konzepte, die wir behandelt haben, kombiniert! Wir zielen auf Geräte mit a screen Medientyp, Auswerten, ob die Breite des Ansichtsfensters größer oder gleich einem bestimmten Wert ist, unter Verwendung der neuen Medienfunktionsbereichssyntax, und Kombinieren der beiden Bedingungen mit der and Betreiber.

OK, das ist also großartig für die unten aufgeführten Mobilgeräte 768px und für andere Geräte gleich oder größer als 768px. Aber was ist mit diesem Desktop-Layout ... wie kommen wir dorthin?

Was das Layout angeht:

• Das main Element wird zu einem 12-Spalten-Raster.
• Auf dem Bild wird eine Schaltfläche angezeigt.
• Die grosse von .title Die Schriftart des Elements wird vergrößert und überlappt das Bild.

Angenommen, wir haben unsere Hausaufgaben gemacht und genau festgelegt, wo diese Änderungen vorgenommen werden sollen, können wir diese Stile anwenden, wenn das Ansichtsfenster mit dem übereinstimmt width Bedingung für diesen Haltepunkt. Wir werden sagen, dass der Haltepunkt bei ist 1000px:

/* When the media type is a screen with a width greater or equal to 1000px  */
@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }

  /* Places the .title on the grid */
  .title {
    grid-row: 1;
  }

  /* Bumps up the font-size */
  .title p {
    font-size: 7.75rem;
  }

  /* Places .images on the grid */
  .images {
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
  }

  /* Displays the button */
  .images .button {
    display: block;
    position: absolute;
    inset-block-end: 5rem;
    inset-inline-end: -1rem;
  }
}

Spielen Sie damit:

Warum die neue Syntax einfacher zu verstehen ist

Fazit: Es ist einfacher, einen Vergleichsoperator (z width >= 320px) als es ist, den Unterschied zwischen zu erkennen min-width und max-width Verwendung der and Operator. Indem die Nuance dazwischen entfernt wird min- und max-, wir haben eine einzige width Parameter, mit dem gearbeitet werden soll, und die Operatoren sagen uns den Rest.

Abgesehen von den visuellen Unterschieden dieser Syntaxen machen sie auch etwas andere Dinge. Verwenden min- und max- entspricht der Verwendung mathematischer Vergleichsoperatoren:

• max-width entspricht dem <= Betreiber (zB (max-width: 320px) ist die gleiche wie (width <= 320px)).
• min-width entspricht dem >= Betreiber (zB (min-width: 320px) ist die gleiche wie (width >= 320px)).

Beachten Sie, dass keines von beiden das Äquivalent von ist > or < Operatoren.

Lassen Sie uns ein Beispiel direkt aus der Media Queries Level 4-Spezifikation ziehen, in der wir verschiedene Stile basierend auf einem Haltepunkt bei definieren 320px in der Ansichtsfensterbreite mit min-width und max-width:

@media (max-width: 320px) { /* styles for viewports = 320px */ }

Beide Medienabfragen stimmen mit einer Bedingung überein, wenn die Breite des Darstellungsbereichs gleich ist 320px. Das ist nicht genau das, was wir wollen. Wir wollen entweder eine dieser Bedingungen und nicht beide gleichzeitig. Um diese impliziten Änderungen zu vermeiden, fügen wir der Abfrage möglicherweise ein Pixel hinzu, das auf basiert min-width:

@media (max-width: 320px){ /* styles for viewports = 321px */ }

Dadurch wird zwar sichergestellt, dass die beiden Stilsätze nicht gleichzeitig angewendet werden, wenn die Ansichtsfensterbreite gleich ist 320px, jede Viewport-Breite, die dazwischen liegt 320px und 321px führt zu einer superkleinen Zone, in der keiner der Stile in beiden Abfragen angewendet wird – eine seltsame „Flash of Unstyled Content“-Situation.

Eine Lösung besteht darin, den zweiten Vergleichsskalenwert (Zahlen nach dem Komma) zu erhöhen 320.01px:

@media (max-width: 320px) { /* styles for viewports = 320.01px */ }

Aber das wird langsam albern und zu kompliziert. Aus diesem Grund ist die Syntax des neuen Medienfunktionsbereichs ein geeigneterer Ansatz:

@media (width <= 320px) { /* styles for viewports  320px) { /* styles for viewports > 320px */ }

Wrapping up

Puh, wir haben viel über die neue Syntax für das Targeting von Anzeigebereichsbreitenbereichen in CSS-Medienabfragen gesprochen. Jetzt, da die Media Queries Level 4-Spezifikation die Syntax eingeführt hat und sie in den Firefox- und Chromium-Browsern übernommen wurde, nähern wir uns der Möglichkeit, die neuen Vergleichsoperatoren zu verwenden und sie auch mit anderen Medienfunktionen zu kombinieren width, mögen height und aspect-ratio

Und das ist nur eine der neueren Funktionen, die die Level-4-Spezifikation neben a Reihe von Abfragen, die wir basierend auf Benutzereinstellungen stellen können. Es endet nicht dort! Probier das aus Vollständiger Leitfaden für CSS-Medienabfragen für einen kleinen Vorgeschmack was in Media Queries Level 5 enthalten sein könnte.