CSS @when likums: Nosacījumu stila pielietojuma apgūšana

CSS pasaule pastāvīgi attīstās, piedāvājot izstrādātājiem spēcīgākus un elastīgākus veidus, kā stilizēt tīmekļa lapas. Viena no šādām funkcijām, kas gūst popularitāti, ir @when likums, kas pazīstams arī kā CSS nosacījumu likumu moduļa 1. līmenis. Šis likums ļauj jums piemērot CSS stilus nosacījumiem, pamatojoties uz konkrētu nosacījumu izpildi. Tas ir spēcīgs rīks adaptīvam dizainam, funkciju noteikšanai un robustāku un pielāgojamāku stilu lapu izveidei.

Kas ir CSS @when likums?

@when likums ir nosacījuma @-likums CSS, kas ļauj jums definēt stilus, kurus piemēro tikai tad, ja noteikti nosacījumi ir patiesi. Uztveriet to kā if priekšrakstu jūsu CSS. Atšķirībā no multivides vaicājumiem, kas galvenokārt koncentrējas uz skata laukuma raksturlielumiem (ekrāna izmērs, orientācija utt.), @when nodrošina vispārīgāku un paplašināmāku veidu, kā apstrādāt nosacījumu stilizēšanu. Tas paplašina esošos nosacījumu @-likumus, piemēram, @supports un @media.

Galvenās @when lietošanas priekšrocības

• Uzlabota koda lasāmība: Iekapsulējot nosacījumu loģiku @when blokos, jūs padarāt savu CSS vieglāk saprotamu un uzturamu. Kļūst skaidrāks nodoms, kāpēc tiek piemēroti konkrēti stili.
• Uzlabota elastība: @when var apstrādāt sarežģītākus nosacījumus nekā tradicionālie multivides vaicājumi, īpaši, ja tos apvieno ar funkciju vaicājumiem un JavaScript vadītu loģiku (izmantojot CSS pielāgotās īpašības).
• Vienkāršota funkciju noteikšana: @when nemanāmi integrējas ar @supports, ļaujot jums piemērot stilus tikai tad, kad ir pieejamas konkrētas pārlūkprogrammas funkcijas. Tas ir būtiski pakāpeniskai uzlabošanai.
• Semantiskāka stilizēšana: @when ļauj jums stilizēt elementus, pamatojoties uz to stāvokli vai kontekstu, radot semantiskāku un vieglāk uzturamu CSS. Piemēram, elementu stilizēšana, pamatojoties uz datu atribūtiem vai pielāgotām īpašībām, ko iestatījis JavaScript.

@when likuma sintakse

@when likuma pamat sintakse ir šāda:

@when <condition> {
  /* CSS likumi, ko piemērot, ja nosacījums ir patiess */
}

<condition> var būt jebkurš derīgs Būla izteiciens, kas novērtēts kā patiess vai nepatiess. Šis izteiciens bieži ietver:

• Multivides vaicājumi: Nosacījumi, kuru pamatā ir skata laukuma raksturlielumi (piemēram, ekrāna platums, ierīces orientācija).
• Funkciju vaicājumi (@supports): Nosacījumi, kuru pamatā ir pārlūkprogrammas atbalsts konkrētām CSS funkcijām.
• Būla algebra: Vairāku nosacījumu apvienošana, izmantojot loģiskos operatorus (and, or, not).

Praktiski @when lietošanas piemēri

Izpētīsim dažus praktiskus piemērus, lai ilustrētu @when likuma spēku un daudzpusību.

1. Adaptīvais dizains ar @when un multivides vaicājumiem

Visizplatītākais @when lietošanas gadījums ir adaptīvais dizains, kur jūs pielāgojat stilus, pamatojoties uz ekrāna izmēru. Lai gan multivides vaicājumi to var panākt paši, @when nodrošina strukturētāku un lasāmāku pieeju, īpaši, ja ir darīšana ar sarežģītiem nosacījumiem.

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

Šajā piemērā stili @when blokā tiek piemēroti tikai tad, kad ekrāna platums ir no 768 pikseļiem līdz 1023 pikseļiem (tipisks planšetdatora izmērs). Tas nodrošina skaidru un kodolīgu veidu, kā definēt stilus konkrētiem skata laukuma diapazoniem.

Starptautiskošanas piezīme: Adaptīvais dizains ir ļoti svarīgs globālai auditorijai. Apsveriet dažādus ekrāna izmērus dažādos reģionos. Piemēram, mobilās ierīces lietošana dažās valstīs ir lielāka, padarot mobilajām ierīcēm paredzētu dizainu vēl svarīgāku.

2. Funkciju noteikšana ar @when un @supports

@when var apvienot ar @supports, lai piemērotu stilus tikai tad, kad pārlūkprogramma atbalsta konkrētu CSS funkciju. Tas ļauj pakāpeniski uzlabot jūsu vietni, nodrošinot labāku pieredzi lietotājiem ar modernām pārlūkprogrammām, vienlaikus saglabājot saderību ar vecākām pārlūkprogrammām.

@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 {
    /* Atgriezeniskie stili pārlūkprogrammām, kas neatbalsta režģi */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Pielāgojiet platumu vecākām pārlūkprogrammām */
  }
}

Šeit mēs izmantojam @supports, lai pārbaudītu, vai pārlūkprogramma atbalsta CSS režģa izkārtojumu. Ja tā dara, mēs piemērojam režģa stilus .container. Ja nē, mēs nodrošinām atgriezeniskos stilus, izmantojot flexbox, lai nodrošinātu, ka līdzīgs izkārtojums tiek panākts vecākās pārlūkprogrammās.

Globālā pieejamības piezīme: Funkciju noteikšana ir svarīga pieejamībai. Vecākām pārlūkprogrammām var nebūt atbalsta jaunākiem ARIA atribūtiem vai semantiskiem HTML5 elementiem. Nodrošiniet atbilstošus atgriezeniskos risinājumus, lai nodrošinātu, ka saturs joprojām ir pieejams.

3. Multivides vaicājumu un funkciju vaicājumu apvienošana

@when patiesais spēks izriet no tā spējas apvienot multivides vaicājumus un funkciju vaicājumus, lai izveidotu sarežģītākus un niansētākus nosacījumu stilizēšanas likumus.

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

Šajā piemērā elementam .modal būs izpludināts fons tikai tad, ja ekrāna platums ir vismaz 768 pikseļi un pārlūkprogramma atbalsta īpašību backdrop-filter. Tas ļauj jums izveidot vizuāli pievilcīgus efektus modernās pārlūkprogrammās, vienlaikus izvairoties no iespējamām veiktspējas problēmām vai renderēšanas kļūdām vecākās pārlūkprogrammās.

4. Stilizēšana, pamatojoties uz pielāgotām īpašībām (CSS mainīgie)

@when var izmantot arī kopā ar CSS pielāgotām īpašībām (kas pazīstamas arī kā CSS mainīgie), lai izveidotu dinamisku un uz stāvokli vērstu stilizēšanu. Varat izmantot JavaScript, lai atjauninātu pielāgotas īpašības vērtību, un pēc tam izmantot @when, lai piemērotu dažādus stilus, pamatojoties uz šo vērtību.

Vispirms definējiet pielāgotu īpašību:

:root {
  --theme-color: #007bff; /* Noklusējuma motīva krāsa */
  --is-dark-mode: false;
}

Pēc tam izmantojiet @when, lai piemērotu stilus, pamatojoties uz pielāgotas īpašības vērtību:

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

Visbeidzot, izmantojiet JavaScript, lai pārslēgtu pielāgotās īpašības --is-dark-mode vērtību:

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

Tas ļauj lietotājiem pārslēgties starp gaišu un tumšu motīvu, un CSS dinamiski atjauninās, pamatojoties uz pielāgotās īpašības vērtību. Ņemiet vērā, ka CSS mainīgo tieša salīdzināšana `@when` var nebūt vispārēji atbalstīta visās pārlūkprogrammās. Tā vietā, iespējams, būs jāizmanto risinājums ar multivides vaicājumu, pārbaudot vērtību, kas nav nulle:

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

Tomēr pārliecinieties, vai pielāgotai īpašībai ir skaitliska vērtība, lai tā darbotos pareizi.

Pieejamības piezīme: Alternatīvu motīvu (piemēram, tumšā režīma) nodrošināšana ir ļoti svarīga pieejamībai. Lietotāji ar redzes traucējumiem var gūt labumu no augsta kontrasta motīviem. Pārliecinieties, vai jūsu motīva pārslēdzējs ir pieejams, izmantojot tastatūru un ekrāna lasītājus.

5. Stilizēšana, pamatojoties uz datu atribūtiem

Varat izmantot arī @when ar datu atribūtiem, lai stilizētu elementus, pamatojoties uz to datu vērtībām. Tas var būt noderīgi, lai izveidotu dinamiskas saskarnes, kur elementi maina izskatu, pamatojoties uz lietotāja mijiedarbību vai datu atjauninājumiem.

Piemēram, pieņemsim, ka jums ir uzdevumu saraksts, un katram uzdevumam ir atribūts data-status, kas norāda tā statusu (piemēram, "todo", "in-progress", "completed"). Varat izmantot @when, lai stilizētu katru uzdevumu atšķirīgi, pamatojoties uz tā statusu.

[data-status="todo"] {
  /* Noklusējuma stili todo uzdevumiem */
  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;
  }
}

Piezīme: attribute() testa nosacījuma atbalsts var būt ierobežots vai nav pilnībā ieviests visās pārlūkprogrammās pašlaik. Vienmēr rūpīgi pārbaudiet.

Pārlūkprogrammas saderība un Polyfill

Sākot ar 2024. gada beigām, pārlūkprogrammas atbalsts @when likumam joprojām attīstās. Lai gan daudzas modernas pārlūkprogrammas atbalsta pamatfunkcijas, dažas vecākas pārlūkprogrammas var neatbalstīt. Tāpēc ir ļoti svarīgi pārbaudīt saderības tabulas un vajadzības gadījumā izmantot atbilstošus atgriezeniskos risinājumus vai polyfill.

Vienmēr skatiet resursus, piemēram, Can I use..., lai pārbaudītu pašreizējo pārlūkprogrammas atbalsta statusu @when un saistītām funkcijām.

Labākā prakse @when lietošanai

• Saglabājiet vienkāršus nosacījumus: Izvairieties no pārmērīgi sarežģītiem nosacījumiem @when blokos. Sadaliet sarežģītu loģiku mazākos, vieglāk pārvaldāmos gabalos.
• Nodrošiniet atgriezeniskos risinājumus: Vienmēr nodrošiniet atgriezeniskos stilus pārlūkprogrammām, kas neatbalsta funkcijas, kuras izmantojat savos @when likumos. Tas nodrošina konsekventu pieredzi dažādās pārlūkprogrammās.
• Rūpīgi pārbaudiet: Pārbaudiet savu CSS dažādās pārlūkprogrammās un ierīcēs, lai pārliecinātos, vai jūsu @when likumi darbojas, kā paredzēts.
• Izmantojiet jēgpilnus komentārus: Pievienojiet komentārus savam CSS, lai paskaidrotu katra @when likuma mērķi un nosacījumus, uz kuriem tas ir balstīts. Tas atvieglos jūsu koda saprašanu un uzturēšanu.
• Apsveriet veiktspēju: Izvairieties no pārmērīgas @when likumu izmantošanas, jo tie var potenciāli ietekmēt veiktspēju. Optimizējiet savu CSS, lai samazinātu likumu skaitu, kas jānovērtē.

Secinājums

@when likums ir spēcīgs papildinājums CSS rīku kopumam, piedāvājot izstrādātājiem elastīgāku un izteiksmīgāku veidu, kā piemērot stilus nosacījumiem. Apvienojot to ar multivides vaicājumiem, funkciju vaicājumiem un CSS pielāgotām īpašībām, varat izveidot robustākas, pielāgojamākas un vieglāk uzturamas stilu lapas. Lai gan pārlūkprogrammas atbalsts joprojām attīstās, @when ir funkcija, kuru ir vērts izpētīt un iekļaut savā modernajā tīmekļa izstrādes darbplūsmā.

Tā kā tīmeklis turpina attīstīties, tādu funkciju kā @when apgūšana būs būtiska, lai radītu saistošu, pieejamu un veiktspējīgu pieredzi lietotājiem visā pasaulē. Izmantojiet nosacījumu stilizēšanas spēku un atveriet jaunas iespējas savā CSS izstrādē.