CSS @when -sääntö: Ehdollisen tyylittelyn hallinta

CSS:n maailma kehittyy jatkuvasti tarjoten kehittäjille yhä tehokkaampia ja joustavampia tapoja verkkosivujen tyylittelyyn. Yksi tällainen suosiotaan kasvattava ominaisuus on @when-sääntö, joka tunnetaan myös nimellä CSS Conditional Rules Module Level 1. Tämän säännön avulla voit soveltaa CSS-tyylejä ehdollisesti tiettyjen ehtojen täyttyessä. Se on tehokas työkalu responsiiviseen suunnitteluun, ominaisuuksien tunnistamiseen ja vankempien sekä mukautuvampien tyylisivujen luomiseen.

Mikä on CSS @when -sääntö?

@when-sääntö on CSS:n ehdollinen at-sääntö, joka mahdollistaa sellaisten tyylien määrittämisen, joita sovelletaan vain, jos tietyt ehdot ovat totta. Ajattele sitä CSS:n if-lausekkeena. Toisin kuin mediakyselyt, jotka keskittyvät pääasiassa näkymän ominaisuuksiin (näytön koko, suunta jne.), @when tarjoaa yleisemmän ja laajennettavamman tavan käsitellä ehdollista tyylittelyä. Se laajentaa olemassa olevia ehdollisia at-sääntöjä, kuten @supports ja @media.

Tärkeimmät edut @when-säännön käytössä

• Parannettu koodin luettavuus: Kapseloimalla ehdollisen logiikan @when-lohkoihin teet CSS-koodistasi helpommin ymmärrettävää ja ylläpidettävää. Tiettyjen tyylisovellusten tarkoitus selkeytyy.
• Lisääntynyt joustavuus: @when pystyy käsittelemään monimutkaisempia ehtoja kuin perinteiset mediakyselyt, erityisesti yhdistettynä ominaisuuskyselyihin ja JavaScript-pohjaiseen logiikkaan (käyttäen CSS-mukautettuja ominaisuuksia).
• Yksinkertaistettu ominaisuuksien tunnistus: @when integroituu saumattomasti @supports-sääntöön, mikä mahdollistaa tyylien soveltamisen vain, kun tietyt selainominaisuudet ovat käytettävissä. Tämä on ratkaisevan tärkeää progressiivisessa parantamisessa.
• Semanttisempi tyylittely: @when antaa sinun tyylitellä elementtejä niiden tilan tai kontekstin perusteella, mikä johtaa semanttisempaan ja ylläpidettävämpään CSS:ään. Esimerkiksi elementtien tyylittely data-attribuuttien tai JavaScriptin asettamien mukautettujen ominaisuuksien perusteella.

@when-säännön syntaksi

@when-säännön perussyntaksi on seuraava:

@when <condition> {
  /* CSS-säännöt, joita sovelletaan, kun ehto on tosi */
}

<condition> voi olla mikä tahansa validi totuusarvoinen lauseke, joka evaluoituu todeksi tai epätodeksi. Tämä lauseke sisältää usein:

• Mediakyselyt: Ehdot, jotka perustuvat näkymän ominaisuuksiin (esim. näytön leveys, laitteen suunta).
• Ominaisuuskyselyt (@supports): Ehdot, jotka perustuvat selaimen tukeen tietyille CSS-ominaisuuksille.
• Boolen algebra: Useiden ehtojen yhdistäminen loogisilla operaattoreilla (and, or, not).

Käytännön esimerkkejä @when-säännön toiminnasta

Tutustutaan muutamiin käytännön esimerkkeihin havainnollistamaan @when-säännön voimaa ja monipuolisuutta.

1. Responsiivinen suunnittelu @when-säännön ja mediakyselyjen avulla

Yleisin käyttötapaus @when-säännölle on responsiivinen suunnittelu, jossa tyylejä muokataan näytön koon mukaan. Vaikka mediakyselyt voivat saavuttaa tämän yksinään, @when tarjoaa jäsennellymmän ja luettavamman lähestymistavan, erityisesti monimutkaisten ehtojen käsittelyssä.

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

Tässä esimerkissä @when-lohkon sisällä olevia tyylejä sovelletaan vain, kun näytön leveys on 768px ja 1023px välillä (tyypillinen tabletin koko). Tämä tarjoaa selkeän ja ytimekkään tavan määrittää tyylejä tietyille näkymäalueille.

Kansainvälistämishuomio: Responsiivinen suunnittelu on kriittistä globaalille yleisölle. Ota huomioon vaihtelevat näyttökoot eri alueilla. Esimerkiksi mobiilikäyttö on joissakin maissa yleisempää, mikä tekee mobiili ensin -suunnittelusta entistäkin tärkeämpää.

2. Ominaisuuksien tunnistus @when- ja @supports-sääntöjen avulla

@when voidaan yhdistää @supports-sääntöön soveltamaan tyylejä vain, kun selain tukee tiettyä CSS-ominaisuutta. Tämä mahdollistaa verkkosivustosi progressiivisen parantamisen, tarjoten paremman kokemuksen moderneilla selaimilla käyttäjille samalla säilyttäen yhteensopivuuden vanhempien selainten kanssa.

@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 {
    /* Varaketyylit selaimille, jotka eivät tue gridiä */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Leveyden säätö vanhemmille selaimille */
  }
}

Tässä käytämme @supports-sääntöä tarkistaaksemme, tukeeko selain CSS Grid Layoutia. Jos se tukee, sovellamme grid-pohjaisia tyylejä .container-elementtiin. Jos ei, tarjoamme varatyylejä flexboxin avulla varmistaaksemme, että samankaltainen asettelu saavutetaan vanhemmissa selaimissa.

Globaali saavutettavuushuomio: Ominaisuuksien tunnistus on tärkeää saavutettavuuden kannalta. Vanhemmista selaimista saattaa puuttua tuki uudemmille ARIA-attribuuteille tai semanttisille HTML5-elementeille. Tarjoa asianmukaiset vararatkaisut varmistaaksesi, että sisältö pysyy saavutettavana.

3. Mediakyselyjen ja ominaisuuskyselyjen yhdistäminen

@when-säännön todellinen voima tulee sen kyvystä yhdistää mediakyselyjä ja ominaisuuskyselyjä luodakseen monimutkaisempia ja vivahteikkaampia ehdollisia tyylisääntöjä.

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

Tässä esimerkissä .modal-elementillä on sumennettu tausta vain, kun näytön leveys on vähintään 768px ja selain tukee backdrop-filter-ominaisuutta. Tämä mahdollistaa visuaalisesti miellyttävien tehosteiden luomisen moderneilla selaimilla välttäen samalla mahdollisia suorituskykyongelmia tai renderöintivirheitä vanhemmissa selaimissa.

4. Tyylittely mukautettujen ominaisuuksien (CSS-muuttujien) perusteella

@when-sääntöä voidaan käyttää myös yhdessä CSS-mukautettujen ominaisuuksien (tunnetaan myös CSS-muuttujina) kanssa dynaamisen ja tilapohjaisen tyylittelyn luomiseksi. Voit käyttää JavaScriptiä päivittämään mukautetun ominaisuuden arvoa ja sitten käyttää @when-sääntöä soveltamaan eri tyylejä tuon arvon perusteella.

Määritä ensin mukautettu ominaisuus:

:root {
  --theme-color: #007bff; /* Oletusteeman väri */
  --is-dark-mode: false;
}

Käytä sitten @when-sääntöä soveltamaan tyylejä mukautetun ominaisuuden arvon perusteella:

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

Lopuksi, käytä JavaScriptiä vaihtaaksesi --is-dark-mode-mukautetun ominaisuuden arvoa:

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

Tämä antaa käyttäjille mahdollisuuden vaihtaa vaalean ja tumman teeman välillä, ja CSS päivittyy dynaamisesti mukautetun ominaisuuden arvon perusteella. Huomaa, että CSS-muuttujien suora vertailu @when-säännössä ei välttämättä ole yleisesti tuettu kaikissa selaimissa. Sen sijaan saatat joutua käyttämään kiertotietä mediakyselyn kanssa, joka tarkistaa nollasta poikkeavan arvon:

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

Varmista kuitenkin, että mukautetulla ominaisuudella on numeerinen arvo, jotta tämä toimii oikein.

Saavutettavuushuomio: Vaihtoehtoisten teemojen (esim. tumma tila) tarjoaminen on ratkaisevan tärkeää saavutettavuuden kannalta. Näkövammaiset käyttäjät voivat hyötyä suurikontrastisista teemoista. Varmista, että teeman vaihtaja on käytettävissä näppäimistöllä ja ruudunlukijoilla.

5. Tyylittely data-attribuuttien perusteella

Voit myös käyttää @when-sääntöä data-attribuuttien kanssa tyylitelläksesi elementtejä niiden data-arvojen perusteella. Tämä voi olla hyödyllistä dynaamisten käyttöliittymien luomisessa, joissa elementtien ulkonäkö muuttuu käyttäjän vuorovaikutuksen tai datan päivitysten perusteella.

Oletetaan esimerkiksi, että sinulla on lista tehtävistä, ja jokaisella tehtävällä on data-status-attribuutti, joka ilmaisee sen tilan (esim. "todo", "in-progress", "completed"). Voit käyttää @when-sääntöä tyylitelläksesi kunkin tehtävän eri tavalla sen tilan perusteella.

[data-status="todo"] {
  /* Oletustyylit todo-tehtäville */
  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;
  }
}

Huomaa: tuki attribute()-testiehdolle saattaa olla rajoitettua tai sitä ei ole vielä täysin toteutettu kaikissa selaimissa. Testaa aina perusteellisesti.

Selainyhteensopivuus ja polyfillit

Vuoden 2024 loppupuolella @when-säännön selaintuki on vielä kehittymässä. Vaikka monet modernit selaimet tukevat perustoiminnallisuutta, jotkut vanhemmat selaimet eivät sitä välttämättä tee. Siksi on ratkaisevan tärkeää tarkistaa yhteensopivuustaulukot ja käyttää tarvittaessa asianmukaisia vararatkaisuja tai polyfillejä.

Tarkista aina resursseista, kuten Can I use..., @when-säännön ja siihen liittyvien ominaisuuksien nykyinen selaintukitilanne.

Parhaat käytännöt @when-säännön käyttöön

• Pidä ehdot yksinkertaisina: Vältä liian monimutkaisia ehtoja @when-lohkoissa. Pilko monimutkainen logiikka pienempiin, hallittavampiin osiin.
• Tarjoa vararatkaisut: Tarjoa aina varatyylit selaimille, jotka eivät tue ominaisuuksia, joita käytät @when-säännöissäsi. Tämä varmistaa yhtenäisen kokemuksen eri selaimilla.
• Testaa perusteellisesti: Testaa CSS-koodisi useilla eri selaimilla ja laitteilla varmistaaksesi, että @when-sääntösi toimivat odotetusti.
• Käytä merkityksellisiä kommentteja: Lisää CSS-koodiisi kommentteja selittämään kunkin @when-säännön tarkoitusta ja ehtoja, joihin se perustuu. Tämä tekee koodistasi helpommin ymmärrettävää ja ylläpidettävää.
• Ota huomioon suorituskyky: Vältä @when-sääntöjen liiallista käyttöä, sillä ne voivat mahdollisesti vaikuttaa suorituskykyyn. Optimoi CSS-koodisi minimoimaan arvioitavien sääntöjen määrä.

Yhteenveto

@when-sääntö on tehokas lisä CSS-työkalupakkiin, tarjoten kehittäjille joustavamman ja ilmaisukykyisemmän tavan soveltaa tyylejä ehdollisesti. Yhdistämällä sen mediakyselyihin, ominaisuuskyselyihin ja CSS-mukautettuihin ominaisuuksiin voit luoda vankempia, mukautuvampia ja ylläpidettävämpiä tyylisivuja. Vaikka selaintuki on vielä kehittymässä, @when on ominaisuus, johon kannattaa tutustua ja sisällyttää osaksi modernia web-kehityksen työnkulkua.

Verkon kehittyessä jatkuvasti @when-säännön kaltaisten ominaisuuksien hallitseminen on olennaista mukaansatempaavien, saavutettavien ja suorituskykyisten käyttäjäkokemusten luomiseksi ympäri maailmaa. Hyödynnä ehdollisen tyylittelyn voima ja avaa uusia mahdollisuuksia CSS-kehityksessäsi.