Die neue Syntax für CSS Media Query-Bereiche

Wir verlassen uns auf CSS Media Queries, um Elemente basierend auf einer gezielten Bedingung auszuwählen und zu stylen. Diese Bedingung kann vielfältig sein, fällt aber typischerweise in zwei Kategorien: (1) die Art des verwendeten Mediums und (2) ein bestimmtes Merkmal des Browsers, Geräts oder sogar der Umgebung des Benutzers.

Sagen wir also, wir möchten einem gedruckten Dokument bestimmte CSS-Stile zuweisen

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

Die Tatsache, dass wir Stile bei einer bestimmten Viewport-Breite anwenden können, hat CSS Media Queries zu einer Kernkomponente des Responsive Webdesigns gemacht, seit Ethan Marcotte den Begriff prägte. Wenn die Viewport-Breite des Browsers eine bestimmte Größe hat, dann wende eine Reihe von Stilregeln an, was uns ermöglicht, 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 das and darin? Das ist ein Operator, der es uns erlaubt, Anweisungen zu kombinieren. In diesem Beispiel haben wir eine Bedingung kombiniert, dass der Medientyp screen ist und dass seine min-width Eigenschaft auf 30em (oder höher) eingestellt ist. Wir können dasselbe tun, um einen Bereich von Viewport-Größen anzusprechen

/* 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 Viewport-Breiten und nicht für eine einzelne Breite!

Aber die Media Queries Level 4 Spezifikation hat eine neue Syntax für die Ansprache eines Bereichs von Viewport-Breiten mit gängigen mathematischen Vergleichsoperatoren eingeführt – Dinge wie <, > und = –, die syntaktisch sinnvoller sind und weniger Code schreiben.

Lassen Sie uns eintauchen, wie das funktioniert.

Neue Vergleichsoperatoren

Das letzte Beispiel ist eine gute Veranschaulichung dafür, wie wir Bereiche durch die Kombination von Bedingungen mit dem and Operator „gefälscht“ haben. Die große Änderung in der Media Queries Level 4 Spezifikation ist, dass wir neue Operatoren haben, die Werte vergleichen, anstatt sie zu kombinieren

• < evaluiert, ob ein Wert kleiner als ein anderer Wert ist
• > evaluiert, ob ein Wert größer als ein anderer Wert ist
• = evaluiert, ob ein Wert gleich einem anderen Wert ist
• <= evaluiert, ob ein Wert kleiner oder gleich einem anderen Wert ist
• >= evaluiert, ob ein Wert größer oder gleich einem anderen Wert ist

Hier ist, wie wir eine Media Query geschrieben hätten, die Stile anwendet, wenn der Browser 600px breit oder breiter ist

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

So sieht es aus, wenn man dasselbe mit einem Vergleichsoperator schreibt

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

Zielgerichtete Bereiche von Viewport-Breiten

Oft erstellen wir bei der Schreibweise von CSS Media Queries sogenannte Breakpoints – eine Bedingung, bei der das Design „bricht“ und ein Satz von Stilen angewendet wird, um es zu beheben. Ein Design kann viele Breakpoints haben! Und sie basieren normalerweise darauf, dass der Viewport zwischen zwei Breiten liegt: wo der Breakpoint beginnt und wo er endet.

Hier ist, wie wir das mit dem and Operator getan haben, um die beiden Breakpoint-Werte zu kombinieren

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

Man beginnt zu verstehen, wie viel kürzer und einfacher es ist, eine Media Query zu schreiben, wenn wir den booleschen and Operator zugunsten der neuen Bereichsvergleichssyntax aufgeben

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

Viel einfacher, oder? Und es ist klar ersichtlich, was diese Media Query tut.

Browser-Unterstützung

Diese verbesserte Media Query-Syntax befindet sich zum Zeitpunkt des Schreibens noch in einem frühen Stadium und ist derzeit noch nicht so weit verbreitet wie der Ansatz, der min-width und max-width kombiniert. Wir nähern uns aber an! Safari ist derzeit der einzige große Ausreißer, aber es gibt ein offenes Ticket dafür, dem Sie folgen können.

Schauen wir uns ein Beispiel an

Hier ist ein Layout, das gut für größere Bildschirme geeignet ist, wie z. B. einen Desktop

Dieses Layout hat Basisstile, die für alle Breakpoints gelten. Aber wenn der Bildschirm schmaler wird, beginnen wir, Stile anzuwenden, die bedingt bei verschiedenen kleineren Breakpoints angewendet werden, die ideal für Tablets bis hin zu Mobiltelefonen geeignet sind.

Um zu sehen, was passiert, hier ist, wie das Layout zwischen den beiden kleineren Breakpoints reagiert. Die versteckte Navigationsliste wird angezeigt und der title im main bekommt eine größere font-size.

Diese Änderung wird ausgelöst, wenn sich die Viewport-Änderungen von der Übereinstimmung mit den Bedingungen eines Mediums zur Übereinstimmung mit einer anderen bewegen

/* 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 behandelten Konzepte kombiniert! Wir zielen auf Geräte mit dem Medientyp screen ab, prüfen, ob die Viewport-Breite größer oder gleich einem bestimmten Wert ist, indem wir die neue Media-Feature-Range-Syntax verwenden, und kombinieren die beiden Bedingungen mit dem and Operator.

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

Was das Layout betrifft

• Das main-Element wird zu einem 12-Spalten-Grid.
• Ein Button wird über dem Bild angezeigt.
• Die Größe der Schrift des .title-Elements erhöht sich und überlappt das Bild.

Wenn wir unsere Hausaufgaben gemacht und genau bestimmt haben, wo diese Änderungen stattfinden sollen, können wir diese Stile anwenden, wenn der Viewport der width-Bedingung für diesen Breakpoint entspricht. Wir sagen, dass dieser Breakpoint bei 1000px liegt.

/* 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 leichter zu verstehen ist

Fazit: Es ist einfacher, einen Vergleichsoperator (z. B. width >= 320px) zu erkennen, als den Unterschied zwischen min-width und max-width mit dem and Operator zu erkennen. Indem die Nuance zwischen min- und max- entfernt wird, haben wir einen einzigen width-Parameter zur Verfügung, und die Operatoren sagen uns den Rest.

Abgesehen von den visuellen Unterschieden der Synthesen tun sie auch leicht unterschiedliche Dinge. Die Verwendung von min- und max- ist äquivalent zur Verwendung mathematischer Vergleichsoperatoren

• max-width ist äquivalent zum <= Operator (z. B. (max-width: 320px) ist dasselbe wie (width <= 320px)).
• min-width ist äquivalent zum >= Operator (z. B. (min-width: 320px) ist dasselbe wie (width >= 320px)).

Beachten Sie, dass keine davon dem > oder < Operator entspricht.

Nehmen wir ein Beispiel direkt aus der Media Queries Level 4 Spezifikation, wo wir verschiedene Stile basierend auf einem Breakpoint bei 320px Viewport-Breite mit min-width und max-width definieren

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

Beide Media Queries stimmen überein, wenn die Viewport-Breite gleich 320px ist. Das ist nicht genau das, was wir wollen. Wir wollen *eine* der beiden Bedingungen statt beider gleichzeitig. Um diese impliziten Änderungen zu vermeiden, könnten wir der Abfrage basierend auf min-width ein Pixel hinzufügen

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

Während dies sicherstellt, dass sich die beiden Stilsets nicht gleichzeitig anwenden, wenn die Viewport-Breite 320px beträgt, führt jede Viewport-Breite zwischen 320px und 321px zu einer superkleinen Zone, in der keiner der Stile in einer der beiden Abfragen angewendet wird – eine seltsame „Flash of unstyled content“-Situation.

Eine Lösung ist, den zweiten Vergleichsskalenwert (Zahlen nach dem Dezimalpunkt) auf 320.01px zu erhöhen

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

Aber das wird albern und übermäßig kompliziert. Deshalb ist die neue Media-Feature-Range-Syntax ein besser geeigneter Ansatz

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

Zusammenfassung

Puh, wir haben viel über die neue Syntax für die Ansprache von Viewport-Breitenbereichen in CSS Media Queries gelernt. Da die Media Queries Level 4 Spezifikation die Syntax eingeführt hat und sie in Firefox- und Chromium-Browsern übernommen wurde, sind wir kurz davor, die neuen Vergleichsoperatoren nutzen zu können und sie mit anderen Range-Media-Features außer width zu kombinieren, wie height und aspect-ratio.

Und das ist nur eines der neueren Features, die die Level 4 Spezifikation eingeführt hat, zusammen mit einer Reihe von Abfragen, die wir basierend auf Benutzereinstellungen machen können. Es hört nicht auf! Schauen Sie sich den vollständigen Leitfaden zu CSS Media Queries an, um einen Vorgeschmack auf das zu bekommen, was in Media Queries Level 5 enthalten sein könnte.