Den nya syntaxen för CSS Media Query Range

Vi litar på CSS Media Queries för att välja och styla element baserat på ett måltillstånd. Det tillståndet kan vara alla möjliga saker men delas vanligtvis in i två läger: (1) vilken typ av media som används och (2) en specifik funktion i webbläsaren, enheten eller till och med användarens miljö.

Så säg att vi vill tillämpa viss CSS-stil på ett tryckt dokument:

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

Det faktum att vi kan tillämpa stilar med en viss visningsportbredd har gjort CSS Media Queries till en kärningrediens i responsiv webbdesign sedan Ethan Marcotte myntade termen. Om webbläsarens visningsportbredd är en viss storlek, tillämpa en uppsättning stilregler som gör att vi kan designa element som svarar på storleken på webbläsaren.

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

Lägg märke till and där inne? Det är en operatör som låter oss kombinera uttalanden. I det exemplet kombinerade vi ett villkor att mediatypen är en screen och det är det min-width funktionen är inställd på 30em (eller ovanför). Vi kan göra samma sak för att rikta in oss på en rad visningsportstorlekar:

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

Nu gäller dessa stilar för ett explicit intervall av visningsportbredder snarare än en enda bredd!

Men Media Queries Level 4-specifikationen har introducerat en ny syntax för att rikta in sig på en rad visningsportbredder med vanliga matematiska jämförelseoperatorer - saker som <, >och = — som är mer meningsfullt syntaktiskt samtidigt som du skriver mindre kod.

Låt oss gräva i hur det fungerar.

Nya jämförelseoperatörer

Det sista exemplet är en bra illustration av hur vi har "förfalskat" intervall genom att kombinera villkor med hjälp av and operatör. Den stora förändringen i Media Queries Level 4-specifikationen är att vi har nya operatörer som jämför värden snarare än att kombinera dem:

• < utvärderar om ett värde är mindre än ett annat värde
• > utvärderar om ett värde är större än ett annat värde
• = utvärderar om ett värde är lika till ett annat värde
• <= utvärderar om ett värde är mindre än eller lika med to ett annat värde
• >= utvärderar om ett värde är större än eller lika med to ett annat värde

Så här kan vi ha skrivit en mediefråga som tillämpar stilar om webbläsaren är det 600px bred eller större:

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

Så här ser det ut att skriva samma sak med en jämförelseoperator:

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

Inriktning på en rad visningsportbredder

När vi skriver CSS Media Queries skapar vi ofta vad som kallas en brytpunkt — ett tillstånd där designen "går sönder" och en uppsättning stilar tillämpas för att fixa den. En design kan ha en massa brytpunkter! Och de är vanligtvis baserade på att viewporten är mellan två bredder: där brytpunkten börjar och där brytpunkten slutar.

Så här har vi gjort det med hjälp av and operatorn för att kombinera de två brytpunktsvärdena:

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

Du börjar få en bra uppfattning om hur mycket kortare och enklare det är att skriva en mediefråga när vi släpper det booleska and operatör till förmån för den nya syntaxen för jämförelse av intervall:

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

Mycket lättare, eller hur? Och det är tydligt exakt vad den här mediefrågan gör.

Webbläsarstöd

Denna förbättrade mediefrågesyntax är fortfarande i början när detta skrivs och har inte lika stor stöd för tillfället som metoden som kombinerar min-width och max-width. Men vi närmar oss! Safari är den enda större hållplatsen vid denna tidpunkt, men det finns en öppen biljett för det som du kan följa.

Låt oss titta på ett exempel

Här är en layout som passar bra för större skärmar, som ett skrivbord:

Den här layouten har basstilar som är gemensamma för alla brytpunkter. Men när skärmen blir smalare börjar vi tillämpa stilar som villkorligt appliceras vid olika mindre brytpunkter som är idealiska för surfplattor ända ner till mobiltelefoner:

För att se vad som händer, här är hur layouten reagerar mellan de två mindre brytpunkterna. Den dolda navigeringslistan visas också title i main ökar in font-size.

Den förändringen utlöses när visningsportens ändringar går från att matcha ett medias villkor till ett annat:

/* 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 kombinerat några av de koncept vi har täckt! Vi riktar in oss på enheter med en screen mediatyp, utvärderar om visningsportens bredd är större än eller lika med ett specifikt värde med hjälp av den nya mediafunktionsintervallsyntaxen, och kombinerar de två villkoren med and operatör.

OK, så det är bra för mobila enheter nedan 768px och för andra enheter lika med eller större än 768px. Men hur är det med den där skrivbordslayouten... hur kommer vi dit?

När det gäller layouten:

• Smakämnen main element blir ett rutnät med 12 kolumner.
• En knapp visas på bilden.
• Storleken på .title elementets teckensnitt ökar och överlappar bilden.

Förutsatt att vi har gjort våra läxor och bestämt exakt var dessa ändringar ska ske, kan vi tillämpa dessa stilar när visningsporten matchar width villkoret för den brytpunkten. Vi kommer att säga att brytpunkten är vid 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;
  }
}

Spela med det:

Varför den nya syntaxen är lättare att förstå

Summan av kardemumman: det är lättare att särskilja en jämförelseoperator (t.ex width >= 320px) än det är för att se skillnaden mellan min-width och max-width med and operatör. Genom att ta bort nyansen mellan min- och max-, vi har en singel width parameter att arbeta med och operatörerna berättar resten.

Utöver de visuella skillnaderna i dessa syntaxer, gör de också lite olika saker. Använder sig av min- och max- motsvarar att använda matematiska jämförelseoperatorer:

• max-width motsvarar <= operatör (t.ex (max-width: 320px) är det samma som (width <= 320px)).
• min-width motsvarar >= operatör (t.ex (min-width: 320px) är det samma som (width >= 320px)).

Observera att ingendera är motsvarigheten till > or < operatörer.

Låt oss ta ett exempel direkt från Media Queries Level 4-specifikationen där vi definierar olika stilar baserat på en brytpunkt vid 320px i visningsportens bredd med hjälp av min-width och max-width:

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

Båda mediefrågorna matchar ett villkor när visningsportens bredd är lika med 320px. Det är inte precis vad vi vill. Vi vill antingen ett av dessa villkor snarare än båda samtidigt. För att undvika dessa implicita förändringar kan vi lägga till en pixel i frågan baserat på min-width:

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

Även om detta säkerställer att de två uppsättningarna stilar inte tillämpas samtidigt när visningsportens bredd är 320px, alla visningsportbredder som hamnar mellan 320px och 321px kommer att resultera i en superliten zon där ingen av stilarna i någon av sökfrågorna tillämpas - en konstig "flash of unstyled content"-situation.

En lösning är att öka det andra jämförelseskalans värde (siffror efter decimalkomma) till 320.01px:

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

Men det blir dumt och alltför komplicerat. Det är därför den nya syntaxen för mediefunktioner är ett lämpligare tillvägagångssätt:

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

Inslagning upp

Puh, vi täckte mycket av den nya syntaxen för inriktning av visningsportbreddsintervall i CSS Media Queries. Nu när Media Queries Level 4-specifikationen har introducerat syntaxen och den har antagits i webbläsarna Firefox och Chromium, börjar vi närma oss att kunna använda de nya jämförelseoperatorerna och kombinera dem med andra mediefunktioner. width, tycka om height och aspect-ratio

Och det är bara en av de nyare funktionerna som nivå 4-specifikationen introducerade, tillsammans med en massa frågor vi kan göra baserat på användarens preferenser. Det slutar inte där! Kolla in Komplett guide till CSS Media Queries för en tjuvtitt på vad som kan inkluderas i Media Queries Level 5.