CSS kohandatud omadused: dünaamilised teemasüsteemid ja kujundusmärgid globaalseks veebiarenduseks

Tänapäeva globaliseerunud veebis on äärmiselt oluline luua veebisaite ja rakendusi, mis on kohandatavad, hallatavad ja ligipääsetavad erinevatele kasutajatele. CSS-i kohandatud omadused, mida sageli nimetatakse CSS-i muutujateks, pakuvad selle saavutamiseks võimsa mehhanismi. See artikkel sukeldub CSS-i kohandatud omaduste maailma, uurides nende rolli dünaamiliste teemasüsteemide loomisel ja kujundusmärkide haldamisel, pakkudes ülevaateid ja praktilisi näiteid globaalseks veebiarenduseks.

Mis on CSS-i kohandatud omadused?

CSS-i kohandatud omadused on CSS-is määratletud muutujad, mis võimaldavad teil väärtusi salvestada ja taaskasutada kogu oma stiililehtedes. Erinevalt eelprotsessori muutujatest (nt Sass'is või Less'is leiduvad) on CSS-i kohandatud omadused brauseri omapärased ja neid saab dünaamiliselt värskendada JavaScripti või CSS-i meediapäringute abil. See muudab need uskumatult mitmekülgseks reageerivate, interaktiivsete ja teemastatavate veebikogemuste loomisel.

CSS-i kohandatud omaduste peamised omadused:

• Brauseri omapärane: Eelnev töötlemine pole vajalik.
• Dünaamiliselt värskendatav: Väärtusi saab käitusajal muuta.
• Kaskaadne: Nad järgivad CSS-i kaskaadi ja pärimisreegleid.
• Ulatuspõhine: Muutujaid saab määratleda globaalselt või konkreetsete elementide sees.

Süntaks:

CSS-i kohandatud omaduse määratlemiseks kasutage järgmist süntaksit:

            :root {
  --primary-color: #007bff;
  --font-family: 'Arial', sans-serif;
}

            

              
                Copy
              
            
          

CSS-i kohandatud omaduse kasutamiseks kasutage funktsiooni var():

            body {
  background-color: var(--primary-color);
  font-family: var(--font-family);
}

            

              
                Copy
              
            
          

Dünaamilise teemasüsteemi loomine CSS-i kohandatud omadustega

Dünaamiline teemasüsteem võimaldab kasutajatel kohandada veebisaidi või rakenduse välimust vastavalt oma eelistustele. CSS-i kohandatud omadused pakuvad selliste süsteemide rakendamiseks elegantse viisi. Vaatame lihtsat näidet heleda ja tumeda teema loomisest.

Näide: Heledad ja tumedad teemad

Esmalt määratlege põhilised teemamuutujad :root pseudoklassis:

            :root {
  --bg-color: #ffffff; /* Valge */
  --text-color: #000000; /* Must */
  --link-color: #007bff; /* Sinine */
  --button-bg-color: #f0f0f0;
  --button-text-color: #000000;
}

            

              
                Copy
              
            
          

Järgmisena rakendage need muutujad oma elementidele:

            body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Arial', sans-serif;
}

a {
  color: var(--link-color);
}

button {
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

            

              
                Copy
              
            
          

Nüüd määratlege tume teema, alistades põhimuutujad meediapäringus või JavaScripti kaudu rakendatud CSS-i klassis:

            /* Kasutades meediapäringut süsteemieelistuse jaoks */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212; /* Tumehall */
    --text-color: #ffffff; /* Valge */
    --link-color: #bb86fc; /* Lilla */
    --button-bg-color: #282828;
    --button-text-color: #ffffff;
  }
}

/* Või kasutades JavaScripti kaudu rakendatud CSS-i klassi */
.dark-theme {
  --bg-color: #121212; /* Tumehall */
  --text-color: #ffffff; /* Valge */
  --link-color: #bb86fc; /* Lilla */
  --button-bg-color: #282828;
  --button-text-color: #ffffff;
}

            

              
                Copy
              
            
          

Tumedate teemade rakendamiseks JavaScripti abil saate body elemendil lülitada klassi dark-theme:

            const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

themeToggle.addEventListener('click', () => {
  body.classList.toggle('dark-theme');
});

            

              
                Copy
              
            
          

Kaalutlused globaalse teemastamise jaoks:

• Värvikontrastsus: Tagage ligipääsetavuse tagamiseks piisav värvikontrastsus, järgides WCAG juhiseid (Web Content Accessibility Guidelines). See on eriti oluline nägemispuudega kasutajate jaoks erinevates kultuurides.
• Kultuurilised seosed värvidega: Värvidel võivad olla erinevates kultuurides erinevad tähendused. Näiteks sümboliseerib valge paljudes lääne kultuurides puhtust, kuid mõnes Aasia kultuuris on see seotud leinaga. Olge nende seostega teadlik, kui valite globaalsele publikule teemavärve.
• Paremalt vasakule (RTL) keeled: Kui teie veebisait toetab RTL-keeli (nt araabia, heebrea), kohandage teemat, et paigutus õigesti kajastuks. Võimalik, et peate elementide positsioone vahetama ja teksti joondamist suuna põhjal kohandama. CSS-i loogilised omadused ja väärtused võivad siin kasulikud olla (nt `margin-inline-start` asemel `margin-left`).
• Kasutaja eelistused: Lubage kasutajatel valida oma eelistatud teema, olenemata nende süsteemi seadetest. See annab neile suurema kontrolli oma sirvimiskogemuse üle.

Kujundusmärgid: Stiilide tsentraliseeritud süsteem

Kujundusmärgid on nimelised üksused, mis salvestavad visuaalseid kujundusatribuute, nagu värvid, fondid, vahed ja suurused. Need pakuvad teie kujundussüsteemile ühtset tõeallikat, tagades järjepidevuse ja hallatavuse kogu teie projektis. CSS-i kohandatud omadused sobivad ideaalselt kujundusmärkide rakendamiseks.

Kujundusmärkide kasutamise eelised:

• Järjepidevus: Tagab järjepideva välimuse ja tunde kõigis teie veebisaidi või rakenduse osades.
• Hallatavus: Lihtsustab teie kujundussüsteemi värskendusi ja muudatusi. Kui värskendate kujundusmärki, kajastuvad muudatused automaatselt kõikjal, kus seda märki kasutatakse.
• Skaleeritavus: Muudab teie kujundussüsteemi skaleerimise lihtsamaks projekti kasvades.
• Koostöö: Hõlbustab disainerite ja arendajate vahelist koostööd, pakkudes ühist keelt kujundusotsuste arutamiseks.

Näide: Kujundusmärkide rakendamine CSS-i kohandatud omadustega

            :root {
  /* Värvid */
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-white: #ffffff;
  --color-black: #000000;

  /* Tüpograafia */
  --font-family-base: 'Arial', sans-serif;
  --font-size-base: 16px;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* Vahed */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
}

            

              
                Copy
              
            
          

Nüüd saate neid märke kasutada kogu oma CSS-is:

            body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-black);
}

.button-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: var(--spacing-medium);
  border: none;
  cursor: pointer;
}

            

              
                Copy
              
            
          

Kujundusmärkide korraldamine ja haldamine

Projekti kasvades võib osutuda vajalikuks korraldada kujundusmärgid kategooriatesse ja alamkategooriatesse. Selle saavutamiseks saate kasutada CSS-i kommentaare:

            :root {
  /* =========================================================================
   * Värvid
   * ========================================================================= */

  /* Esmasvärvid */
  --color-primary: #007bff;
  --color-primary-dark: #0056b3;
  --color-primary-light: #3399ff;

  /* Teisvärvid */
  --color-secondary: #6c757d;
  --color-secondary-dark: #495057;
  --color-secondary-light: #99a3a4;

  /* =========================================================================
   * Tüpograafia
   * ========================================================================= */

  --font-family-base: 'Arial', sans-serif;
  --font-size-base: 16px;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
}

            

              
                Copy
              
            
          

Suuremate projektide puhul kaaluge spetsiaalse kujundusmärkide haldustööriista või ehitusprotsessi kasutamist, mis genereerib automaatselt CSS-i kohandatud omadused teie kujundusmärkidest. Saadaval on mitmesuguseid tööriistu, mis integreeruvad kujundustarkvaraga nagu Figma või Sketch.

Kujundusmärgid ja ligipääsetavus

Kujundusmärkide määratlemisel on oluline arvestada ligipääsetavusega. Näiteks veenduge, et teie värvimärgid vastavad WCAG värvikontrastsuse juhistele. Kontrastsussuhte kontrollimiseks kasutage selliseid tööriistu nagu WebAIMi värvikontrastsuse kontrollija.

Kaaluge ka alternatiivsete märkide pakkumist konkreetsete vajadustega kasutajatele, näiteks suure kontrastsusega teemasid vaegnägijatele.

Kujundusmärgid globaalsele publikule

• Tüpograafia Erinevad keeled nõuavad erinevaid märgistikke ja fonti renderdustehnikaid. Kujundusmärgid võivad salvestada fondispetsiifilisi reegleid, nagu rea kõrgus ja tähtede vahekaugus, et optimeerida erinevate skriptide (nt ladina, kirillitsa, araabia, hiina) jaoks.
• Paigutus Erinevad kultuurilised konventsioonid mõjutavad paigutust. Kaaluge kujundusmärkide kasutamist suuna (LTR/RTL), joondamise ja visuaalse hierarhia käsitlemiseks vastavalt lokaadile.
• Kujutised Kujundusmärgid saavad hallata pildivarade, mis kohanduvad piirkondlike eelistustega, vältides potentsiaalselt solvavat või kultuuriliselt tundlikku sisu konkreetsetes lokaatides.
• Kuupäeva/kellaaja vormingud Kasutage kujundusmärke, et tagada kuupäeva ja kellaaja vormingute järjepidevus erinevates piirkondades ja keeltes.
• Numbrite vormingud Kohandage numbrite vorminguid (kümnenderaldajad, tuhandikeraldajad, valuutasümbolid) vastavalt kasutaja lokaadile.

Täiustatud tehnikad CSS-i kohandatud omadustega

1. Funktsiooni `calc()` kasutamine CSS-i kohandatud omadustega

Funktsioon calc() võimaldab teil teha arvutusi oma CSS-is, muutes uute väärtuste tuletamise olemasolevatest CSS-i kohandatud omadustest lihtsaks. See on kasulik reageerivate paigutuste loomiseks ja väärtuste kohandamiseks vastavalt ekraani suurusele.

            :root {
  --base-size: 16px;
  --scale-factor: 1.2;
}

h1 {
  font-size: calc(var(--base-size) * var(--scale-factor) * 2);
}

p {
  font-size: calc(var(--base-size) * var(--scale-factor));
}

            

              
                Copy
              
            
          

2. CSS-i kohandatud omaduste varuväärtused

CSS-i kohandatud omaduste jaoks saate varuväärtusi pakkuda funktsiooni var() teise argumendi abil. See tagab, et teie stiilid töötavad ka siis, kui kohandatud omadus pole määratletud või brauser seda ei toeta.

            body {
  background-color: var(--bg-color, #ffffff); /* Varundamine valgele */
  color: var(--text-color, #000000); /* Varundamine mustale */
}

            

              
                Copy
              
            
          

3. CSS-i kohandatud omadused ja JavaScripti interaktsioon

JavaScripti saab kasutada CSS-i kohandatud omaduste dünaamiliseks värskendamiseks. See võimaldab teil luua interaktiivseid teemasid, kohandada stiile vastavalt kasutaja sisendile või reageerida brauseri keskkonna muudatustele. Näiteks:

            const root = document.documentElement;

function setPrimaryColor(color) {
  root.style.setProperty('--color-primary', color);
}

// Helistage funktsioonile, et muuta esmast värvi
setPrimaryColor('#ff0000'); // Muutke esmane värv punaseks

            

              
                Copy
              
            
          

4. Kohandatud omaduste ulatus

Kohandatud omadused järgivad kaskaadi, seega muudab nende määratlemine elementil `:root` need globaalselt kättesaadavaks. Kuid saate neid määratleda ka konkreetsetel elementidel, et piirata nende ulatust. See on kasulik komponendispetsiifiliste stiilide loomiseks või globaalsete väärtuste alistamiseks oma veebisaidi teatud osades.

            .my-component {
  --component-bg-color: #f0f0f0;
  background-color: var(--component-bg-color);
}

/* Järgmine kasutab endiselt globaalselt määratletud --color-primary */
.another-component {
  color: var(--color-primary);
}

            

              
                Copy
              
            
          

5. CSS-i kohandatud omaduste kasutamine eelprotsessoritega

Kuigi CSS-i kohandatud omadused on brauseri omapärased, saate neid siiski kasutada koos CSS-i eelprotsessoritega nagu Sass või Less. See võib olla kasulik CSS-i kohandatud omaduste genereerimiseks kujundusmärkidest või keerukamate arvutuste tegemiseks.

            // Sass Näide

$primary-color: #007bff;

:root {
  --color-primary: #{$primary-color};
}

.button {
  background-color: var(--color-primary);
}

            

              
                Copy
              
            
          

Parimad tavad CSS-i kohandatud omaduste kasutamiseks

• Kasutage kirjeldavaid nimesid: Valige nimed, mis selgelt näitavad kohandatud omaduse eesmärki. Näiteks kasutage --color-primary asemel --c1.
• Korraldage oma kohandatud omadused: Rühmitage seotud kohandatud omadused kokku kommentaaride abil või määratledes need konkreetsetes CSS-i plokkides.
• Pakkuda varuväärtusi: Pakkuge alati kohandatud omaduste jaoks varuväärtusi, et tagada oma stiilide toimimine ka siis, kui kohandatud omadust ei toetata või pole määratletud.
• Kasutage järjepidevaid nimetamiskonventsioone: Looge oma kohandatud omaduste jaoks järjepidev nimetamiskonventsioon, et parandada hallatavust ja loetavust.
• Dokumenteerige oma kujundusmärgid: Looge oma kujundusmärkidele dokumentatsioon, sealhulgas nende eesmärk, väärtused ja kasutusjuhised. See aitab tagada, et kõik teie meeskonnas mõistavad, kuidas neid õigesti kasutada.
• Testige oma teemasid põhjalikult: Testige oma dünaamilisi teemasid erinevates brauserites ja seadmetes, et tagada nende ootuspärane toimimine. Pöörake erilist tähelepanu ligipääsetavusele ja jõudlusele.

Järeldus

CSS-i kohandatud omadused on võimas tööriist dünaamiliste teemasüsteemide loomiseks ja kujundusmärkide haldamiseks kaasaegses veebiarenduses. Kasutades ära nende paindlikkust ja mitmekülgsust, saate luua veebisaite ja rakendusi, mis on kohandatavad, hallatavad ja globaalsele publikule ligipääsetavad. CSS-i kohandatud omaduste kasutuselevõtmine toob kaasa hallatavamad, skaleeritavamad ja kasutajasõbralikumad veebikogemused, mis vastavad kasutajate erinevatele vajadustele kogu maailmas. Kui alustate oma teekonda CSS-i kohandatud omadustega, pidage meeles globaalseid vaatenurki, ligipääsetavuse juhiseid ja ainulaadseid väljakutseid veebikogemuste loomisel tõeliselt rahvusvahelisele publikule.