Syntax rozsahu prišla do kontajnerových štýlových dotazov a @if

Syntax rozsahu v CSS je funkcia, ktorá nám umožňuje písať dotazy s porovnávaniami spôsobom, ktorý je prirodzenejší a čitatelnejší. Namiesto písania niečoho ako:

@media (min-width: 400px) and (max-width: 800px) {
  /* štýly */
}

Môžeme teraz písať:

@media (400px <= width <= 800px) {
  /* štýly */
}

Táto syntax je podporovaná v moderných prehliadačoch pre media dotazy už nejaký čas. Ale teraz sa rozširuje na ďalšie oblasti CSS – konkrétne na kontajnerové štýlové dotazy a nadchádzajúce pravidlo @if.

Syntax rozsahu v kontajnerových štýlových dotazoch

Kontajnerové štýlové dotazy umožňujú aplikovať štýly na základe vlastných CSS vlastností (premenných) kontajnera. S novou syntaxou rozsahu môžeme teraz porovnávať tieto hodnoty elegantnejším spôsobom.

Predtým sme museli používať samostatné dotazy pre minimálne a maximálne hodnoty:

@container style(--theme-color: blue) {
  /* štýly pre modrú tému */
}

@container style(--size >= 100) {
  /* štýly pre väčšie veľkosti */
}

Teraz môžeme kombinovať podmienky s operátormi rozsahu:

@container style(50 <= --size <= 150) {
  /* štýly pre stredné veľkosti */
}

Pravidlo @if a syntax rozsahu

Pravidlo @if je nová funkcia CSS, ktorá prináša podmienené štýly priamo do CSS bez potreby použiť media dotazy alebo kontajnerové dotazy. Je to ako mať if príkazy v CSS.

Syntax rozsahu tu robí podmienky ešte výraznejšími:

@if (0 < --value < 10) {
  .element {
    color: green;
  }
} @else if (10 <= --value <= 20) {
  .element {
    color: yellow;
  }
} @else {
  .element {
    color: red;
  }
}

Výhody syntaxe rozsahu

Táto nová syntax prináša niekoľko výhod:

• Čitateľnosť – Kód je intuitívnejší a bližší k matematickému zápisu
• Stručnosť – Menej opakujúceho sa kódu pri definovaní rozsahov
• Menšia náchylnosť na chyby – Jednoduchšie sa udržiava a menej miest, kde môžu vzniknúť preklepy

Podpora v prehliadačoch

Syntax rozsahu pre media dotazy je už dobre podporovaná. Pre kontajnerové štýlové dotazy a pravidlo @if je podpora stále v ranom štádiu vývoja. Sledujte aktualizácie prehliadačov a používajte progresívne vylepšovanie pri implementácii týchto funkcií.

Praktické príklady použitia

Tu je niekoľko praktických scenárov, kde môže syntax rozsahu zlepšiť váš kód:

Responzívna typografia

@container (300px <= width <= 600px) {
  h1 {
    font-size: calc(1rem + 2vw);
  }
}

Stavové štýlovanie na základe premenných

@container style(0 <= --progress <= 100) {
  .progress-bar {
    background: linear-gradient(
      to right,
      green calc(var(--progress) * 1%),
      gray calc(var(--progress) * 1%)
    );
  }
}

Témy založené na rozsahoch

@if (0 <= --brightness < 50) {
  :root {
    --text-color: white;
    --bg-color: black;
  }
} @else {
  :root {
    --text-color: black;
    --bg-color: white;
  }
}

Záver

Syntax rozsahu v CSS predstavuje významný krok vpred v tom, ako píšeme podmienené štýly. Či už pracujete s media dotazmi, kontajnerovými dotazmi alebo s pripravovaným pravidlom @if, táto syntax robí váš CSS kód čistejším a udržiavateľnejším. Aj keď plná podpora ešte prichádza, je to funkcia, ktorú by ste mali mať na zreteli pre budúce projekty.