De nieuwe syntaxis van het CSS-mediaquerybereik

We vertrouwen op CSS-mediaquery's voor het selecteren en stylen van elementen op basis van een gerichte conditie. Die voorwaarde kan van alles zijn, maar valt meestal in twee kampen: (1) het type media dat wordt gebruikt, en (2) een specifiek kenmerk van de browser, het apparaat of zelfs de omgeving van de gebruiker.

Stel dat we bepaalde CSS-stijlen willen toepassen op een afgedrukt document:

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

Het feit dat we stijlen kunnen toepassen bij een bepaalde viewport-breedte heeft van CSS Media Queries een kerningrediënt van responsive webdesign gemaakt sinds Ethan Marcotte bedacht de term. Als de viewportbreedte van de browser een bepaalde grootte heeft, pas dan een set stijlregels toe, waarmee we elementen kunnen ontwerpen die reageren op de grootte van de browser.

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

Let op de and daarin? Dat is een operator waarmee we uitspraken kunnen combineren. In dat voorbeeld hebben we een voorwaarde gecombineerd dat het mediatype a . is screen en dat is het min-width functie is ingesteld op 30em (of hoger). We kunnen hetzelfde doen om een ​​reeks viewportformaten te targeten:

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

Nu zijn die stijlen van toepassing op een expliciet bereik van viewport-breedten in plaats van op een enkele breedte!

Maar de Media Queries Level 4-specificatie heeft een nieuwe syntaxis geïntroduceerd voor het targeten van een reeks viewport-breedten met behulp van algemene wiskundige vergelijkingsoperatoren - dingen als <, > en = - die syntactisch logischer zijn en minder code schrijven.

Laten we eens kijken hoe dat werkt.

Nieuwe vergelijkingsoperators

Dat laatste voorbeeld is een goede illustratie van hoe we een soort "vervalste" bereiken hebben gemaakt door voorwaarden te combineren met behulp van de and exploitant. De grote verandering in de Media Queries Level 4-specificatie is dat we nieuwe operators hebben die waarden vergelijken in plaats van ze te combineren:

• < evalueert of een waarde is minder dan een andere waarde
• > evalueert of een waarde is groter dan een andere waarde
• = evalueert of een waarde is gelijk naar een andere waarde
• <= evalueert of een waarde is kleiner dan of gelijk aan to een andere waarde
• >= evalueert of een waarde is groter dan of gelijk aan to een andere waarde

Hier is hoe we een mediaquery kunnen hebben geschreven die stijlen toepast als de browser dat is 600px breed of groter:

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

Zo ziet het eruit om hetzelfde te schrijven met een vergelijkingsoperator:

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

Een reeks viewportbreedten targeten

Wanneer we CSS-mediaquery's schrijven, creëren we vaak wat a . wordt genoemd breekpunt - een toestand waarbij het ontwerp "breekt" en een reeks stijlen wordt toegepast om het te repareren. Een ontwerp kan een heleboel breekpunten hebben! En ze zijn meestal gebaseerd op de viewport die zich tussen twee breedtes bevindt: waar het breekpunt begint en waar het breekpunt eindigt.

Hier is hoe we dat hebben gedaan met behulp van de and operator om de twee breekpuntwaarden te combineren:

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

Je begint een goed idee te krijgen van hoeveel korter en gemakkelijker het is om een ​​mediaquery te schrijven als we de Boolean weglaten and operator in het voordeel van de nieuwe syntaxis voor bereikvergelijking:

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

Veel makkelijker, toch? En het is duidelijk wat deze mediaquery precies doet.

Browser ondersteuning

Deze verbeterde syntaxis voor mediaquery's staat op het moment van schrijven nog in de kinderschoenen en wordt momenteel niet zo breed ondersteund als de aanpak die min-width en max-width. Maar we komen in de buurt! Safari is op dit moment de enige grote tegenvaller, maar er is een open ticket voor die je kunt volgen.

Laten we naar een voorbeeld kijken

Hier is een lay-out die goed geschikt is voor grotere schermen, zoals een desktop:

Deze lay-out heeft basisstijlen die voor alle onderbrekingspunten gelden. Maar naarmate het scherm smaller wordt, beginnen we stijlen toe te passen die voorwaardelijk worden toegepast op verschillende kleinere breekpunten die bij uitstek geschikt zijn voor tablets tot en met mobiele telefoons:

Om te zien wat er gebeurt, volgt hier hoe de lay-out reageert tussen de twee kleinere onderbrekingspunten. De verborgen navigatielijst wordt weergegeven en ook: title in de main wordt verhoogd in font-size.

Die wijziging wordt geactiveerd wanneer de wijzigingen in de viewport van overeenkomen met de voorwaarden van het ene medium naar het andere gaan:

/* 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;
  }
}

We hebben een paar van de concepten die we hebben behandeld gecombineerd! We targeten apparaten met een screen mediatype, evalueren of de viewportbreedte groter is dan of gelijk is aan een specifieke waarde met behulp van de syntaxis van het nieuwe mediafunctiebereik, en de twee voorwaarden combineren met de and operator.

OK, dus dat is geweldig voor onderstaande mobiele apparaten 768px en voor andere apparaten gelijk aan of groter dan 768px. Maar hoe zit het met die desktoplay-out ... hoe komen we daar?

Wat de indeling betreft:

• De main element wordt een raster met 12 kolommen.
• Op de afbeelding wordt een knop weergegeven.
• De grootte van de .title het lettertype van het element wordt groter en overlapt de afbeelding.

Ervan uitgaande dat we ons huiswerk hebben gedaan en precies hebben bepaald waar die wijzigingen moeten plaatsvinden, kunnen we die stijlen toepassen wanneer de viewport overeenkomt met de width voorwaarde voor dat breekpunt. We gaan zeggen dat het breekpunt is op 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;
  }
}

Speel er eens mee:

Waarom de nieuwe syntaxis gemakkelijker te begrijpen is

Waar het op neerkomt: het is gemakkelijker om een ​​vergelijkingsoperator te onderscheiden (bijv width >= 320px) dan is het om het verschil te zien tussen min-width en max-width met de and exploitant. Door de nuance tussen min- en max-, we hebben een single width parameter om mee te werken en de operators vertellen ons de rest.

Naast de visuele verschillen van die syntaxis, doen ze ook iets andere dingen. Gebruik makend van min- en max- is gelijk aan het gebruik van wiskundige vergelijkingsoperatoren:

• max-width is gelijk aan de <= operator (bijv (max-width: 320px) is hetzelfde als (width <= 320px)).
• min-width is gelijk aan de >= operator (bijv (min-width: 320px) is hetzelfde als (width >= 320px)).

Merk op dat geen van beide het equivalent is van de > or < exploitanten.

Laten we een voorbeeld nemen rechtstreeks uit de Media Queries Level 4-specificatie waar we verschillende stijlen definiëren op basis van een breekpunt op 320px in de viewport-breedte met behulp van min-width en max-width:

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

Beide mediaquery's komen overeen met een voorwaarde wanneer de viewportbreedte gelijk is aan 320px. Dat is niet precies wat we willen. Wij willen beide een van die voorwaarden in plaats van beide tegelijkertijd. Om die impliciete wijzigingen te voorkomen, kunnen we een pixel aan de zoekopdracht toevoegen op basis van: min-width:

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

Hoewel dit ervoor zorgt dat de twee sets stijlen niet tegelijkertijd van toepassing zijn wanneer de breedte van het kijkvenster is 320px, elke viewport-breedte die valt tussen 320px en 321px zal resulteren in een superkleine zone waar geen van de stijlen in beide query's wordt toegepast - een rare "flits van niet-gestileerde inhoud" situatie.

Een oplossing is om de tweede vergelijkingsschaalwaarde (cijfers achter de komma) te verhogen naar 320.01px:

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

Maar dat wordt dwaas en te ingewikkeld. Daarom is de syntaxis van het nieuwe mediafunctiebereik een meer geschikte benadering:

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

Afsluiten

Pfff, we hebben veel aandacht besteed aan de nieuwe syntaxis voor het targeten van viewport-breedtebereiken in CSS Media Queries. Nu de Media Queries Level 4-specificatie de syntaxis heeft geïntroduceerd en deze is overgenomen in Firefox- en Chromium-browsers, komen we bijna in staat om de nieuwe vergelijkingsoperatoren te gebruiken en ze te combineren met andere mediafuncties van het bereik naast width, zoals height en aspect-ratio

En dat is slechts een van de nieuwere functies die de Level 4-specificatie heeft geïntroduceerd, naast een een heleboel vragen die we kunnen stellen op basis van gebruikersvoorkeuren. Daar houdt het niet op! Bekijk de Volledige gids voor CSS-mediaquery's voor een voorproefje van wat kan worden opgenomen in mediaquery's niveau 5.