Den nye CSS Media Query Range Syntaks

Vi stoler på CSS-medieforespørgsler til udvælgelse og styling af elementer baseret på en målrettet tilstand. Denne tilstand kan være alle mulige ting, men falder typisk i to lejre: (1) den type medie, der bliver brugt, og (2) en specifik funktion af browseren, enheden eller endda brugerens miljø.

Så lad os sige, at vi ønsker at anvende en bestemt CSS-styling på et trykt dokument:

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

Det faktum, at vi kan anvende stilarter i en vis visningsportsbredde, har gjort CSS Media Queries til en kerneingrediens i responsivt webdesign siden Ethan Marcotte myntet udtrykket. Hvis browserens viewport-bredde er en vis størrelse, skal du anvende et sæt stilregler, som giver os mulighed for at designe elementer, der svarer til størrelsen på browseren.

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

Læg mærke til and derinde? Det er en operatør, der giver os mulighed for at kombinere udsagn. I det eksempel kombinerede vi en betingelse om, at medietypen er en screen og det er det min-width funktion er indstillet til 30em (eller over). Vi kan gøre det samme for at målrette en række visningsportstørrelser:

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

Nu gælder disse stilarter for et eksplicit udvalg af viewport-bredder i stedet for en enkelt bredde!

Men Media Queries Level 4-specifikationen har introduceret en ny syntaks til målretning af en række viewport-bredder ved hjælp af almindelige matematiske sammenligningsoperatorer - ting som f.eks. <, >og = - der giver mere mening syntaktisk, mens du skriver mindre kode.

Lad os grave ind i, hvordan det fungerer.

Nye sammenligningsoperatører

Det sidste eksempel er en god illustration af, hvordan vi har "falsket" områder ved at kombinere betingelser ved hjælp af and operatør. Den store ændring i Media Queries Level 4-specifikationen er, at vi har nye operatører, der sammenligner værdier i stedet for at kombinere dem:

• < vurderer om en værdi er mindre end en anden værdi
• > vurderer om en værdi er større end en anden værdi
• = vurderer om en værdi er lige til en anden værdi
• <= vurderer om en værdi er mindre end eller lig to en anden værdi
• >= vurderer om en værdi er større end eller lig to en anden værdi

Her er, hvordan vi måske har skrevet en medieforespørgsel, der anvender stilarter, hvis browseren er det 600px bred eller større:

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

Sådan ser det ud at skrive det samme ved hjælp af en sammenligningsoperator:

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

Målretning af en række visningsportsbredder

Når vi skriver CSS Media Queries, opretter vi ofte det, der kaldes en breakpoint — en tilstand, hvor designet "går i stykker", og et sæt stilarter anvendes for at rette det. Et design kan have en masse brudpunkter! Og de er normalt baseret på, at viewporten er mellem to bredder: hvor brudpunktet starter, og hvor brudpunktet slutter.

Her er, hvordan vi har gjort det ved hjælp af and operatør for at kombinere de to brudpunktværdier:

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

Du begynder at få en god fornemmelse af, hvor meget kortere og nemmere det er at skrive en medieforespørgsel, når vi dropper den boolske and operatør til fordel for den nye syntaks til sammenligning af rækkevidde:

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

Meget nemmere, ikke? Og det er tydeligt præcis, hvad denne medieforespørgsel gør.

Browser understøttelse

Denne forbedrede medieforespørgselssyntaks er stadig i sine tidlige dage i skrivende stund og ikke så bredt understøttet i øjeblikket som den tilgang, der kombinerer min-width , max-width. Vi nærmer os dog! Safari er det eneste store ophold på dette tidspunkt, men der er en åben billet til det som du kan følge.

Lad os se på et eksempel

Her er et layout, der er godt egnet til større skærme, som et skrivebord:

Dette layout har basisstile, der er fælles for alle breakpoints. Men efterhånden som skærmen bliver smallere, begynder vi at anvende stilarter, der er betinget anvendt ved forskellige mindre brudpunkter, der er ideelt egnet til tablets helt ned til mobiltelefoner:

For at se, hvad der sker, kan du se, hvordan layoutet reagerer mellem de to mindre brudpunkter. Den skjulte nav-liste bliver vist samt title i main bliver øget font-size.

Denne ændring udløses, når visningsportens ændringer går fra at matche et medies betingelser til et andet:

/* 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 kombineret et par af de koncepter, vi har dækket! Vi målretter mod enheder med en screen medietype, der evaluerer, om visningsportens bredde er større end eller lig med en specifik værdi ved hjælp af den nye mediefunktionsområdesyntaks, og kombinerer de to betingelser med and operatør.

OK, så det er fantastisk til mobile enheder nedenfor 768px og for andre enheder lig med eller større end 768px. Men hvad med det skrivebordslayout... hvordan kommer vi dertil?

Hvad angår layoutet:

• main element bliver et 12-søjlet gitter.
• En knap vises på billedet.
• Størrelsen af .title elementets skrifttype øges og overlapper billedet.

Hvis vi antager, at vi har lavet vores hjemmearbejde og bestemt præcist, hvor disse ændringer skal finde sted, kan vi anvende disse stilarter, når visningsporten matcher width betingelse for det brudpunkt. Vi vil sige, at breakpoint 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;
  }
}

Spil med det:

Hvorfor den nye syntaks er lettere at forstå

Den nederste linje: det er lettere at skelne en sammenligningsoperator (f.eks width >= 320px), end det er for at se forskel på min-width , max-width ved hjælp af and operatør. Ved at fjerne nuancen mellem min- , max-, vi har en enkelt width parameter at arbejde med, og operatørerne fortæller os resten.

Ud over de visuelle forskelle i disse syntakser, gør de også lidt forskellige ting. Ved brug af min- , max- svarer til at bruge matematiske sammenligningsoperatorer:

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

Bemærk, at ingen af ​​dem svarer til > or < operatører.

Lad os trække et eksempel direkte fra Media Queries Level 4-specifikationen, hvor vi definerer forskellige stilarter baseret på et brudpunkt på 320px i visningsportens bredde ved hjælp af min-width , max-width:

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

Begge medieforespørgsler matcher en betingelse, når visningsportens bredde er lig med 320px. Det er ikke lige det, vi ønsker. Vi vil have enten en af ​​disse betingelser frem for begge på samme tid. For at undgå disse implicitte ændringer kan vi tilføje en pixel til forespørgslen baseret på min-width:

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

Selvom dette sikrer, at de to sæt stilarter ikke gælder samtidigt, når visningsportens bredde er 320px, enhver viewport-bredde, der falder imellem 320px , 321px vil resultere i en super lille zone, hvor ingen af ​​stilene i nogen af ​​forespørgslerne er anvendt - en mærkelig "flash of unstyled content" situation.

En løsning er at øge den anden sammenligningsskalaværdi (tal efter decimaltegnet) til 320.01px:

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

Men det bliver dumt og alt for kompliceret. Det er grunden til, at den nye mediefunktionsområdesyntaks er en mere passende tilgang:

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

Indpakning op

Puha, vi dækkede meget af den nye syntaks til målretning af viewport-breddeintervaller i CSS Media Queries. Nu hvor Media Queries Level 4-specifikationen har introduceret syntaksen, og den er blevet adopteret i Firefox- og Chromium-browsere, er vi tæt på at kunne bruge de nye sammenligningsoperatører og kombinere dem med andre mediefunktioner. widthSom height , aspect-ratio

Og det er blot en af ​​de nyere funktioner, som Level 4-specifikationen introducerede sammen med en en masse forespørgsler, vi kan lave baseret på brugernes præferencer. Det slutter ikke der! Tjek ud Komplet guide til CSS-medieforespørgsler for et smugkig af hvad der kan inkluderes i Media Queries Level 5.