Den nye syntaksen for CSS Media Query Range

Vi stoler på CSS Media Queries for valg og styling av elementer basert på en målrettet tilstand. Denne tilstanden kan være alle slags ting, men faller vanligvis i to leire: (1) typen media som brukes, og (2) en spesifikk funksjon i nettleseren, enheten eller til og med brukerens miljø.

Så si at vi ønsker å bruke en viss CSS-stil på et trykt dokument:

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

Det faktum at vi kan bruke stiler med en viss visningsportbredde har gjort CSS Media Queries til en kjerneingrediens i responsiv webdesign siden Ethan Marcotte myntet begrepet. Hvis nettleserens visningsportbredde er en viss størrelse, bruk et sett med stilregler, som lar oss designe elementer som svarer til størrelsen på nettleseren.

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

Legg merke til and der inne? Det er en operatør som lar oss kombinere utsagn. I det eksemplet kombinerte vi en betingelse om at medietypen er en screen og det er det min-width funksjonen er satt til 30em (eller over). Vi kan gjøre det samme for å målrette en rekke visningsportstørrelser:

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

Nå gjelder disse stilene for et eksplisitt utvalg av viewport-bredder i stedet for en enkelt bredde!

Men Media Queries Level 4-spesifikasjonen har introdusert en ny syntaks for målretting av en rekke visningsportbredder ved å bruke vanlige matematiske sammenligningsoperatorer – ting som <, >og = - som gir mer mening syntaktisk mens du skriver mindre kode.

La oss grave i hvordan det fungerer.

Nye sammenligningsoperatører

Det siste eksemplet er en god illustrasjon på hvordan vi har "falsket" områder ved å kombinere forhold ved å bruke and operatør. Den store endringen i Media Queries Level 4-spesifikasjonen er at vi har nye operatører som sammenligner verdier i stedet for å kombinere dem:

• < vurderer om en verdi er mindre enn en annen verdi
• > vurderer om en verdi er større enn en annen verdi
• = vurderer om en verdi er lik til en annen verdi
• <= vurderer om en verdi er mindre enn eller lik to en annen verdi
• >= vurderer om en verdi er større enn eller lik to en annen verdi

Her er hvordan vi kan ha skrevet en mediespørring som bruker stiler hvis nettleseren er det 600px bred eller større:

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

Slik ser det ut å skrive det samme ved å bruke en sammenligningsoperator:

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

Målretting mot en rekke visningsportbredder

Når vi skriver CSS Media Queries, lager vi ofte det som kalles en stoppunkt – en tilstand der designet "brekker" og et sett med stiler brukes for å fikse det. Et design kan ha en haug med bruddpunkter! Og de er vanligvis basert på at visningsporten er mellom to bredder: hvor bruddpunktet starter og hvor bruddpunktet slutter.

Her er hvordan vi har gjort det ved å bruke and operatør for å kombinere de to brytepunktverdiene:

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

Du begynner å få en god følelse av hvor mye kortere og enklere det er å skrive et mediesøk når vi dropper boolsk and operatør til fordel for den nye syntaksen for sammenligning av rekkevidde:

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

Mye enklere, ikke sant? Og det er tydelig nøyaktig hva denne medieforespørselen gjør.

Nettleser støtte

Denne forbedrede mediespørringssyntaksen er fortsatt i sine tidlige dager når dette skrives og ikke like bredt støttet for øyeblikket som tilnærmingen som kombinerer min-width og max-width. Men vi nærmer oss! Safari er den eneste store ventetiden på dette tidspunktet, men det er en åpen billett til det som du kan følge.

La oss se på et eksempel

Her er et oppsett som er godt egnet for større skjermer, som et skrivebord:

Denne layouten har basisstiler som er felles for alle bruddpunkter. Men etter hvert som skjermen blir smalere, begynner vi å bruke stiler som er betinget brukt ved forskjellige mindre bruddpunkter som er ideelt egnet for nettbrett helt ned til mobiltelefoner:

For å se hva som skjer, her er hvordan oppsettet reagerer mellom de to mindre bruddpunktene. Den skjulte navigasjonslisten vises også title i main blir økt inn font-size.

Denne endringen utløses når visningsportens endringer går fra å matche ett medies forhold til et annet:

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

Vi har kombinert noen av konseptene vi har dekket! Vi målretter mot enheter med en screen medietype, evaluere om visningsportbredden er større enn eller lik en bestemt verdi ved å bruke den nye mediefunksjonens områdesyntaks, og kombinere de to betingelsene med and operatør.

OK, så det er flott for mobile enheter nedenfor 768px og for andre enheter lik eller større enn 768px. Men hva med det skrivebordsoppsettet ... hvordan kommer vi dit?

Når det gjelder oppsettet:

• De main element blir et rutenett med 12 kolonner.
• En knapp vises på bildet.
• Størrelsen på .title elementets skrift øker og overlapper bildet.

Forutsatt at vi har gjort leksene våre og bestemt nøyaktig hvor disse endringene skal finne sted, kan vi bruke disse stilene når visningsporten samsvarer med width betingelse for det bruddpunktet. Vi skal si at bruddpunktet er kl 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;
  }
}

Lek med det:

Hvorfor den nye syntaksen er lettere å forstå

Hovedpoenget: det er lettere å skille en sammenligningsoperatør (f.eks. width >= 320px) enn det er å fortelle forskjellen mellom min-width og max-width bruker and operatør. Ved å fjerne nyansen mellom min- og max-, vi har en singel width parameter å jobbe med og operatørene forteller oss resten.

Utover de visuelle forskjellene til disse syntaksene, gjør de også litt forskjellige ting. Ved hjelp av min- og max- tilsvarer å bruke matematiske sammenligningsoperatorer:

• max-width tilsvarer <= operatør (f.eks. (max-width: 320px) er det samme som (width <= 320px)).
• min-width tilsvarer >= operatør (f.eks. (min-width: 320px) er det samme som (width >= 320px)).

Legg merke til at ingen av dem er ekvivalent med > or < operatører.

La oss ta et eksempel rett fra Media Queries Level 4-spesifikasjonen der vi definerer forskjellige stiler basert på et bruddpunkt på 320px i visningsportens bredde ved å bruke min-width og max-width:

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

Begge mediespørringene samsvarer med en betingelse når visningsportbredden er lik 320px. Det er ikke akkurat det vi ønsker. Vi vil enten en av disse forholdene i stedet for begge samtidig. For å unngå de implisitte endringene, kan vi legge til en piksel i spørringen basert på min-width:

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

Selv om dette sikrer at de to settene med stiler ikke gjelder samtidig når visningsportens bredde er 320px, hvilken som helst visningsportbredde som faller mellom 320px og 321px vil resultere i en superliten sone der ingen av stilene i noen av søkene blir brukt - en merkelig "flash of unstyled content"-situasjon.

En løsning er å øke den andre sammenligningsskalaverdien (tall etter desimaltegn) til 320.01px:

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

Men det blir dumt og altfor komplisert. Det er derfor den nye mediefunksjonens rekkeviddesyntaks er en mer passende tilnærming:

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

Innpakning opp

Puh, vi dekket mye av den nye syntaksen for målretting av visningsportbreddeområder i CSS Media Queries. Nå som Media Queries Level 4-spesifikasjonen har introdusert syntaksen og den er tatt i bruk i Firefox og Chromium-nettlesere, nærmer vi oss å kunne bruke de nye sammenligningsoperatørene og kombinere dem med andre mediefunksjoner. width, Som height og aspect-ratio

Og det er bare en av de nyere funksjonene som nivå 4-spesifikasjonen introduserte, sammen med en masse spørsmål vi kan gjøre basert på brukerpreferanser. Det slutter ikke der! Sjekk ut Komplett guide til CSS Media Queries for en sniktitt på hva som kan inkluderes i Media Queries Level 5.