CSS @when taisyklė: sąlyginio stiliaus taikymo įvaldymas

CSS pasaulis nuolat tobulėja, siūlydamas kūrėjams galingesnius ir lankstesnius būdus stilizuoti interneto puslapius. Viena iš tokių populiarėjančių funkcijų yra @when taisyklė, dar žinoma kaip CSS sąlyginių taisyklių modulio 1 lygis (CSS Conditional Rules Module Level 1). Ši taisyklė leidžia taikyti CSS stilius sąlygiškai, remiantis konkrečių sąlygų įvykdymu. Tai galingas įrankis adaptyviam dizainui, funkcijų aptikimui ir tvirtesnių bei labiau pritaikomų stilių aprašų kūrimui.

Kas yra CSS @when taisyklė?

@when taisyklė yra sąlyginė „at-rule“ CSS taisyklė, kuri leidžia apibrėžti stilius, taikomus tik tada, kai tam tikros sąlygos yra teisingos. Galvokite apie tai kaip apie if sąlygą savo CSS kode. Skirtingai nuo medijos užklausų, kurios daugiausia orientuotos į peržiūros srities charakteristikas (ekrano dydį, orientaciją ir t. t.), @when suteikia bendresnį ir išplečiamą būdą tvarkyti sąlyginį stiliavimą. Ji išplečia esamas sąlygines „at-rules“, tokias kaip @supports ir @media.

Pagrindiniai @when naudojimo pranašumai

• Geresnis kodo skaitomumas: Įtraukdami sąlyginę logiką į @when blokus, padarote savo CSS lengviau suprantamą ir prižiūrimą. Konkrečių stilių taikymo tikslas tampa aiškesnis.
• Padidintas lankstumas: @when gali apdoroti sudėtingesnes sąlygas nei tradicinės medijos užklausos, ypač kai derinama su funkcijų užklausomis ir JavaScript valdoma logika (naudojant CSS pasirinktines savybes).
• Supaprastintas funkcijų aptikimas: @when sklandžiai integruojasi su @supports, leidžiančia taikyti stilius tik tada, kai pasiekiamos konkrečios naršyklės funkcijos. Tai labai svarbu laipsniškam tobulinimui (progressive enhancement).
• Semantiškesnis stiliavimas: @when leidžia stilizuoti elementus pagal jų būseną ar kontekstą, o tai veda prie semantiškesnio ir lengviau prižiūrimo CSS. Pavyzdžiui, stilizuoti elementus pagal duomenų atributus ar pasirinktines savybes, nustatytas JavaScript.

@when taisyklės sintaksė

The basic syntax of the @when rule is as follows:

@when <sąlyga> {
  /* CSS taisyklės, taikomos, kai sąlyga yra teisinga */
}

<sąlyga> gali būti bet kokia teisinga loginė išraiška, kuri įvertinama kaip teisinga (true) arba klaidinga (false). Ši išraiška dažnai apima:

• Medijos užklausos: Sąlygos, pagrįstos peržiūros srities charakteristikomis (pvz., ekrano plotis, įrenginio orientacija).
• Funkcijų užklausos (@supports): Sąlygos, pagrįstos naršyklės palaikymu konkrečioms CSS funkcijoms.
• Loginė algebra: Kelių sąlygų derinimas naudojant loginius operatorius (and, or, not).

Praktiniai @when veikimo pavyzdžiai

Panagrinėkime keletą praktinių pavyzdžių, kad parodytume @when taisyklės galią ir universalumą.

1. Adaptyvus dizainas su @when ir medijos užklausomis

Dažniausias @when panaudojimo atvejis yra adaptyvus dizainas, kai stiliai koreguojami atsižvelgiant į ekrano dydį. Nors medijos užklausos tai gali pasiekti pačios, @when suteikia struktūriškesnį ir skaitomesnį požiūrį, ypač dirbant su sudėtingomis sąlygomis.

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

Šiame pavyzdyje stiliai @when bloke taikomi tik tada, kai ekrano plotis yra tarp 768px ir 1023px (įprastas planšetinio kompiuterio dydis). Tai suteikia aiškų ir glaustą būdą apibrėžti stilius konkretiems peržiūros srities diapazonams.

Pastaba dėl internacionalizacijos: Adaptyvus dizainas yra labai svarbus pasaulinei auditorijai. Atsižvelkite į skirtingus ekranų dydžius įvairiuose regionuose. Pavyzdžiui, kai kuriose šalyse mobiliųjų įrenginių naudojimas yra didesnis, todėl „mobile-first“ dizainas tampa dar svarbesnis.

2. Funkcijų aptikimas su @when ir @supports

@when galima derinti su @supports, norint taikyti stilius tik tada, kai konkrečią CSS funkciją palaiko naršyklė. Tai leidžia palaipsniui tobulinti jūsų svetainę, suteikiant geresnę patirtį vartotojams su moderniomis naršyklėmis, tuo pačiu išlaikant suderinamumą su senesnėmis.

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Atsarginiai stiliai naršyklėms, kurios nepalaiko tinklelio */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Plotis pritaikytas senesnėms naršyklėms */
  }
}

Čia mes naudojame @supports, kad patikrintume, ar naršyklė palaiko CSS Grid Layout. Jei taip, mes taikome tinklelio (grid) stilius .container elementui. Jei ne, pateikiame atsarginius stilius naudojant „flexbox“, kad užtikrintume panašų išdėstymą senesnėse naršyklėse.

Pasaulinė prieinamumo pastaba: Funkcijų aptikimas yra svarbus prieinamumui. Senesnės naršyklės gali nepalaikyti naujesnių ARIA atributų ar semantinių HTML5 elementų. Pateikite tinkamus atsarginius sprendimus, kad turinys liktų prieinamas.

3. Medijos užklausų ir funkcijų užklausų derinimas

Tikroji @when galia atsiskleidžia gebėjime derinti medijos užklausas ir funkcijų užklausas, siekiant sukurti sudėtingesnes ir niuansuotesnes sąlyginio stiliavimo taisykles.

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

Šiame pavyzdyje .modal elementas turės sulieto fono efektą tik tada, kai ekrano plotis bus bent 768px ir naršyklė palaikys backdrop-filter savybę. Tai leidžia kurti vizualiai patrauklius efektus moderniose naršyklėse, išvengiant galimų našumo problemų ar atvaizdavimo klaidų senesnėse.

4. Stiliavimas remiantis pasirinktinėmis savybėmis (CSS kintamaisiais)

@when taip pat galima naudoti kartu su CSS pasirinktinėmis savybėmis (dar žinomomis kaip CSS kintamieji), norint sukurti dinamišką ir būsenomis pagrįstą stiliavimą. Galite naudoti „JavaScript“ norėdami atnaujinti pasirinktinės savybės vertę, o tada naudoti @when, kad pritaikytumėte skirtingus stilius, priklausomai nuo tos vertės.

Pirma, apibrėžkite pasirinktinę savybę:

:root {
  --theme-color: #007bff; /* Numatytosios temos spalva */
  --is-dark-mode: false;
}

Tada, naudokite @when, kad pritaikytumėte stilius pagal pasirinktinės savybės vertę:

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

Galiausiai, naudokite „JavaScript“, kad perjungtumėte --is-dark-mode pasirinktinės savybės vertę:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

Tai leidžia vartotojams perjungti tarp šviesios ir tamsios temų, o CSS dinamiškai atsinaujina pagal pasirinktinės savybės vertę. Atkreipkite dėmesį, kad tiesioginis CSS kintamųjų palyginimas @when taisyklėje gali būti nepalaikomas visose naršyklėse. Vietoj to gali tekti naudoti aplinkkelį su medijos užklausa, tikrinančia ne nulinę vertę:

@when ( --is-dark-mode > 0 ) { ... }

Tačiau įsitikinkite, kad pasirinktinė savybė turi skaitinę vertę, kad tai veiktų teisingai.

Prieinamumo pastaba: Alternatyvių temų (pvz., tamsaus režimo) suteikimas yra labai svarbus prieinamumui. Vartotojams su regos sutrikimais gali būti naudingos didelio kontrasto temos. Užtikrinkite, kad jūsų temos perjungiklis būtų pasiekiamas klaviatūra ir ekrano skaitytuvais.

5. Stiliavimas remiantis duomenų atributais

Taip pat galite naudoti @when su duomenų atributais, kad stilizuotumėte elementus pagal jų duomenų vertes. Tai gali būti naudinga kuriant dinamiškas sąsajas, kuriose elementų išvaizda keičiasi priklausomai nuo vartotojo sąveikos ar duomenų atnaujinimų.

Pavyzdžiui, tarkime, turite užduočių sąrašą, ir kiekviena užduotis turi data-status atributą, kuris nurodo jos būseną (pvz., „todo“, „in-progress“, „completed“). Galite naudoti @when, kad kiekvieną užduotį stilizuotumėte skirtingai, priklausomai nuo jos būsenos.

[data-status="todo"] {
  /* Numatytieji stiliai „todo“ užduotims */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

Pastaba: attribute() testo sąlygos palaikymas gali būti ribotas arba nevisiškai įdiegtas visose naršyklėse šiuo metu. Visada kruopščiai testuokite.

Naršyklių suderinamumas ir polifilai

2024 m. pabaigoje naršyklių palaikymas @when taisyklei vis dar tobulėja. Nors daugelis modernių naršyklių palaiko pagrindinę funkciją, kai kurios senesnės naršyklės gali to nedaryti. Todėl labai svarbu tikrinti suderinamumo lenteles ir prireikus naudoti atitinkamus atsarginius sprendimus ar polifilus.

Visada pasikonsultuokite su tokiais šaltiniais kaip Can I use..., kad patikrintumėte dabartinę @when ir susijusių funkcijų naršyklių palaikymo būseną.

Geriausios @when naudojimo praktikos

• Išlaikykite sąlygas paprastas: Venkite pernelyg sudėtingų sąlygų @when blokuose. Sudėtingą logiką išskaidykite į mažesnes, lengviau valdomas dalis.
• Pateikite atsarginius sprendimus: Visada pateikite atsarginius stilius naršyklėms, kurios nepalaiko funkcijų, kurias naudojate savo @when taisyklėse. Tai užtikrins nuoseklią patirtį skirtingose naršyklėse.
• Kruopščiai testuokite: Testuokite savo CSS įvairiose naršyklėse ir įrenginiuose, kad įsitikintumėte, jog jūsų @when taisyklės veikia kaip tikėtasi.
• Naudokite prasmingus komentarus: Pridėkite komentarus prie savo CSS, kad paaiškintumėte kiekvienos @when taisyklės tikslą ir sąlygas, kuriomis ji remiasi. Tai padarys jūsų kodą lengviau suprantamą ir prižiūrimą.
• Atsižvelkite į našumą: Venkite pernelyg dažno @when taisyklių naudojimo, nes jos gali potencialiai paveikti našumą. Optimizuokite savo CSS, kad sumažintumėte taisyklių, kurias reikia įvertinti, skaičių.

Išvada

@when taisyklė yra galingas papildymas CSS įrankių rinkiniui, siūlantis kūrėjams lankstesnį ir išraiškingesnį būdą sąlygiškai taikyti stilius. Derindami ją su medijos užklausomis, funkcijų užklausomis ir CSS pasirinktinėmis savybėmis, galite sukurti tvirtesnius, labiau pritaikomus ir lengviau prižiūrimus stilių aprašus. Nors naršyklių palaikymas vis dar tobulėja, @when yra funkcija, kurią verta tyrinėti ir įtraukti į savo modernios interneto svetainių kūrimo eigą.

Interneto pasauliui toliau tobulėjant, tokių funkcijų kaip @when įvaldymas bus būtinas norint kurti įtraukiančias, prieinamas ir našias patirtis vartotojams visame pasaulyje. Pasinaudokite sąlyginio stiliavimo galia ir atraskite naujas galimybes savo CSS kūrime.