CSS-i kohandatud atribuudi arvutatud väärtus: CSS-i muutujate väärtuste arvutamise mõistmine

CSS-i kohandatud atribuudid, mida sageli nimetatakse CSS-i muutujateks, on muutnud pöördeliselt viisi, kuidas me CSS-i kirjutame ja hooldame. Need võimaldavad meil määratleda korduvkasutatavaid väärtusi, luua dünaamilisi teemasid ja lihtsustada keerulisi stiile. Siiski on nende täieliku potentsiaali ärakasutamiseks ülioluline mõista, kuidas nende arvutatud väärtusi arvutatakse, kaskaaditakse ja päritakse. See põhjalik juhend juhatab teid läbi CSS-i kohandatud atribuutide väärtuste arvutamise keerukuste, andes teile võimaluse kirjutada tõhusamat, hooldatavamat ja dünaamilisemat CSS-i.

Mis on CSS-i kohandatud atribuudid?

CSS-i kohandatud atribuudid on CSS-i autorite määratletud olemid, mis sisaldavad konkreetseid väärtusi, mida dokumendis taaskasutada. Need deklareeritakse kasutades --* süntaksit (nt --primary-color: #007bff;) ja neile pääseb juurde var() funktsiooni abil (nt color: var(--primary-color);). Erinevalt eelprotsessori muutujatest on CSS-i kohandatud atribuudid osa kaskaadist, mis võimaldab neid ümber määratleda vastavalt CSS-i reeglitele ja meediumipäringutele.

CSS-i kohandatud atribuutide kasutamise eelised

• Taaskasutatavus: Määratlege väärtus üks kord ja kasutage seda uuesti kogu oma stiililehel.
• Hooldatavus: Uuendage ühte muutujat, et muuta mitut stiili kogu oma projektis.
• Teemad: Looge ja vahetage hõlpsalt erinevate teemade vahel, muutes kohandatud atribuutide väärtusi.
• Dünaamiline stiilimine: Muutke kohandatud atribuutide väärtusi JavaScripti abil interaktiivsete ja reageerivate disainide jaoks.
• Loetavus: Parandage oma CSS-i loetavust, kasutades tähendusrikkaid muutujate nimesid.

Arvutatud väärtuste mõistmine

CSS-i atribuudi arvutatud väärtus on lõplik väärtus, mida brauser kasutab elemendi renderdamiseks. See väärtus määratakse pärast kõigi sõltuvuste lahendamist, sealhulgas arvutused, mis hõlmavad protsente, märksõnu ja, mis on oluline, CSS-i kohandatud atribuute. Protsess koosneb mitmest etapist:

1. Deklareerimine: CSS-i kohandatud atribuut deklareeritakse kindla väärtusega.
2. Kaskaad: Väärtust mõjutab CSS-kaskaad, mis määrab, milline deklaratsioon on eelistatud lähtuvalt päritolust, spetsiifilisusest ja järjekorrast.
3. Pärimine: Kui atribuut on päritav ja elemendil pole seda selgesõnaliselt määratud, pärib see väärtuse oma vanemalt.
4. Arvutamine: Lõplik arvutatud väärtus arvutatakse deklareeritud, kaskaaditud ja päritud väärtuste põhjal.

Kaskaad ja kohandatud atribuudid

Kaskaad mängib CSS-i kohandatud atribuudi lõpliku väärtuse määramisel otsustavat rolli. Kaskaadi mõistmine on hädavajalik, et ennustada, kuidas kohandatud atribuudid erinevates kontekstides käituvad.

Kaskaad arvestab järgmiste teguritega tähtsuse järjekorras:

1. Päritolu: Stiilireegli päritolu (nt brauseri stiilileht, kasutaja stiilileht, autori stiilileht).
2. Spetsiifilisus: Valija spetsiifilisus. Spetsiifilisemad valijad kirjutavad üle vähem spetsiifilised.
3. Järjekord: Järjekord, milles stiilireeglid stiililehel ilmuvad. Hilisemad reeglid kirjutavad üle varasemad.

Näide:

            
:root {
  --primary-color: blue;
}

.container {
  --primary-color: red;
  color: var(--primary-color);
}

.container p {
  color: var(--primary-color);
}


            

              
                Copy
              
            
          

Selles näites on --primary-color esmalt määratletud :root valijas väärtusega blue. Kuid .container sees on --primary-color ümber määratletud väärtuseks red. Seetõttu on tekst .container sees, sealhulgas <p> element, punane. See näitab, kuidas kaskaad võimaldab teil kohandatud atribuutide väärtusi konteksti põhjal üle kirjutada.

Spetsiifilisus ja kohandatud atribuudid

Spetsiifilisus on mõõt, kui täpne on CSS-valija. Spetsiifilisemad valijad kirjutavad üle vähem spetsiifilised. Kohandatud atribuutidega tegelemisel on oluline mõista, kuidas spetsiifilisus nende väärtusi mõjutab.

Näide:

            
:root {
  --font-size: 16px;
}

div {
  font-size: var(--font-size);
}

body div#content {
  --font-size: 18px;
}


            

              
                Copy
              
            
          

Selles näites on --font-size algselt määratud väärtuseks 16px :root valijas. Kuid body div#content valija on spetsiifilisem kui :root valija. Seetõttu on <div id="content"> elemendi font-size 18px, samas kui teistel <div> elementidel on font-size 16px.

Pärimine ja kohandatud atribuudid

Mõned CSS-i atribuudid on päritavad, mis tähendab, et kui neid pole elemendil selgesõnaliselt määratud, pärivad nad väärtuse oma vanemalt. Kohandatud atribuudid ise ei ole päritavad. Kuid väärtus, mis on atribuudile määratud *kasutades* kohandatud atribuuti, *on* päritav, kui aluseks olev atribuut ise on päritav (nagu `color` või `font-size`).

Näide:

            
:root {
  --text-color: green;
}

body {
  color: var(--text-color);
}


            

              
                Copy
              
            
          

Selles näites on --text-color määratud väärtuseks green :root valijas. Seejärel kasutab body element seda muutujat oma color atribuudi määramiseks. Kuna color atribuut on päritav, pärivad kõik body lapselemendid green värvi, välja arvatud juhul, kui neil on oma color väärtus määratletud.

var() funktsiooni kasutamine

Funktsiooni var() kasutatakse CSS-i kohandatud atribuudi väärtusele juurdepääsemiseks. See võtab ühe või mitu argumenti:

• Esimene argument: Kohandatud atribuudi nimi (nt --primary-color).
• Teine argument (valikuline): Varuväärtus, mida kasutada, kui kohandatud atribuut pole määratletud.

Süntaks:

            
property: var(--custom-property-name, fallback-value);

            

              
                Copy
              
            
          

Varuväärtused

Varuväärtused on olulised tagamaks, et teie stiilid jäävad funktsionaalseks ka siis, kui kohandatud atribuut pole määratletud või sellel on kehtetu väärtus. Varuväärtust kasutatakse ainult siis, kui kohandatud atribuut on arvutatud väärtuse ajal kehtetu. Esialgses näites, kui brauser ei suuda kohandatud atribuuti lahendada, kasutab see pakutud varuväärtust. Heaks tavaks peetakse alati varuväärtuse pakkumist var() kasutamisel.

Näide:

            
color: var(--text-color, black);

            

              
                Copy
              
            
          

Selles näites, kui --text-color pole määratletud, määratakse color väärtuseks black.

var() funktsioonide pesastamine

Saate pesastada var() funktsioone, et luua keerukamaid ja dünaamilisemaid stiile. See võimaldab teil kasutada ühte kohandatud atribuuti teise väärtuse määramiseks.

Näide:

            
:root {
  --base-font-size: 16px;
  --heading-font-size: calc(var(--base-font-size) * 1.5);
}

h1 {
  font-size: var(--heading-font-size);
}

            

              
                Copy
              
            
          

Selles näites arvutatakse --heading-font-size --base-font-size väärtuse põhjal. See teeb kõigi pealkirjade fondisuuruste kohandamise lihtsaks, muutes lihtsalt --base-font-size väärtust.

Väärtuste arvutamine calc() abil

Funktsioon calc() võimaldab teil oma CSS-is arvutusi teha. Seda saab kasutada koos kohandatud atribuutidega dünaamiliste ja reageerivate stiilide loomiseks. Saate calc() abil väärtusi liita, lahutada, korrutada ja jagada.

Näide:

            
:root {
  --container-width: 960px;
  --gutter-width: 20px;
}

.item {
  width: calc((var(--container-width) - (2 * var(--gutter-width))) / 3);
}

            

              
                Copy
              
            
          

Selles näites arvutatakse .item laius --container-width ja --gutter-width põhjal. See tagab, et elemendid on konteineris ühtlaselt paigutatud, isegi kui konteineri laius muutub.

Praktilised näited ja kasutusjuhud

Teemade loomine

CSS-i kohandatud atribuudid sobivad ideaalselt teemadega veebisaitide ja rakenduste loomiseks. Saate määratleda iga teema jaoks erinevad kohandatud atribuutide väärtuste komplektid ja hõlpsalt nende vahel vahetada CSS-klasside või JavaScripti abil.

Näide:

            
/* Hele teema */
:root {
  --bg-color: #fff;
  --text-color: #000;
  --primary-color: #007bff;
}

/* Tume teema */
.dark-theme {
  --bg-color: #333;
  --text-color: #fff;
  --primary-color: #00aaff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

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

            

              
                Copy
              
            
          

Selles näites määratleb :root valija heleda teema vaikeväärtused. Klass .dark-theme kirjutab need väärtused üle tumeda teema jaoks. Lisades või eemaldades klassi .dark-theme <body> elemendilt, saate hõlpsalt kahe teema vahel vahetada.

Reageeriv disain

CSS-i kohandatud atribuute saab kasutada reageerivate disainide loomiseks, mis kohanduvad erinevate ekraanisuuruste ja seadmetega. Saate kasutada meediumipäringuid kohandatud atribuutide väärtuste ümbermääratlemiseks ekraani laiuse põhjal.

Näide:

            
:root {
  --font-size: 16px;
}

body {
  font-size: var(--font-size);
}

@media (max-width: 768px) {
  :root {
    --font-size: 14px;
  }
}

            

              
                Copy
              
            
          

Selles näites on --font-size algselt määratud väärtuseks 16px. Kuid kui ekraani laius on alla 768 piksli, määratletakse --font-size ümber väärtuseks 14px. See tagab, et tekst on väiksematel ekraanidel loetav.

Komponentide stiilimine

CSS-i kohandatud atribuute saab kasutada üksikute komponentide modulaarsel ja korduvkasutataval viisil stiilimiseks. Saate määratleda kohandatud atribuudid komponendi skoobis ja kasutada neid komponendi välimuse kohandamiseks.

Näide:

            
.card {
  --card-bg-color: #fff;
  --card-text-color: #000;
  background-color: var(--card-bg-color);
  color: var(--card-text-color);
  border: 1px solid #ccc;
  padding: 1rem;
}

.card.dark {
  --card-bg-color: #333;
  --card-text-color: #fff;
}

            

              
                Copy
              
            
          

Selles näites määratleb .card komponent oma kohandatud atribuudid taustavärvi ja tekstivärvi jaoks. Klass .card.dark kirjutab need väärtused üle, et luua tumedateemaline kaart.

Levinud probleemide tõrkeotsing

Kohandatud atribuuti ei leitud

Kui kohandatud atribuut on määratlemata või valesti kirjutatud, tagastab var() funktsioon varuväärtuse (kui see on olemas) või atribuudi algväärtuse. Kontrollige oma kohandatud atribuutide nimede õigekirja ja veenduge, et need on määratletud õiges skoobis.

Ootamatu väärtus

Kui saate kohandatud atribuudile ootamatu väärtuse, võib see olla tingitud kaskaadist, spetsiifilisusest või pärimisest. Kasutage brauseri arendajatööriistu, et uurida atribuudi arvutatud väärtust ja jälitada selle päritolu. Pöörake erilist tähelepanu oma stiilireeglite järjekorrale ja valijate spetsiifilisusele.

Kehtetu CSS-süntaks

Veenduge, et teie CSS-süntaks on kehtiv. Kehtetu süntaks võib takistada kohandatud atribuutide korrektset parsimist. Kasutage koodi vigade kontrollimiseks CSS-validaatorit.

CSS-i kohandatud atribuutide kasutamise parimad tavad

• Kasutage tähendusrikkaid nimesid: Valige oma kohandatud atribuutidele kirjeldavad nimed, mis selgelt näitavad nende eesmärki.
• Pakkuge varuväärtusi: Pakkuge alati oma kohandatud atribuutidele varuväärtusi, et tagada teie stiilide funktsionaalsus ka siis, kui kohandatud atribuut pole määratletud.
• Organiseerige oma kohandatud atribuute: Grupeerige seotud kohandatud atribuudid loogilistesse plokkidesse.
• Kasutage :root valijat: Määratlege globaalsed kohandatud atribuudid :root valijas, et muuta need kogu stiililehel kättesaadavaks.
• Dokumenteerige oma kohandatud atribuute: Dokumenteerige oma kohandatud atribuutide eesmärk ja kasutus, et neid oleks lihtsam mõista ja hooldada.
• Testige põhjalikult: Testige oma CSS-i kohandatud atribuute erinevates brauserites ja seadmetes, et tagada nende ootuspärane toimimine.

Juurdepääsetavuse kaalutlused

CSS-i kohandatud atribuutide kasutamisel on oluline arvestada juurdepääsetavusega. Veenduge, et teie stiilid oleksid endiselt juurdepääsetavad puuetega kasutajatele, isegi kui nad kasutavad abistavaid tehnoloogiaid. Näiteks tagage piisav värvikontrastsus teksti ja taustavärvide vahel, isegi kui kasutate nende värvide määramiseks kohandatud atribuute.

Jõudluse mõjud

CSS-i kohandatud atribuutidel on üldiselt tühine mõju jõudlusele. Kuid keerulised arvutused, mis hõlmavad kohandatud atribuute, võivad potentsiaalselt renderdamist aeglustada. Optimeerige oma CSS-i, et minimeerida mittevajalikke arvutusi ja vältida liiga keeruliste sõltuvuste loomist kohandatud atribuutide vahel.

Brauseriülene ühilduvus

CSS-i kohandatud atribuudid on kaasaegsete brauserite poolt laialdaselt toetatud. Vanemad brauserid ei pruugi neid siiski toetada. Kaaluge polüfiili kasutamist vanematele brauseritele toe pakkumiseks. CSS Custom Properties Polyfill on populaarne valik.

Kokkuvõte

CSS-i kohandatud atribuudid on võimas tööriist tõhusa, hooldatava ja dünaamilise CSS-i kirjutamiseks. Mõistes, kuidas nende arvutatud väärtusi arvutatakse, kaskaaditakse ja päritakse, saate ära kasutada nende täielikku potentsiaali, et luua vapustavaid ja reageerivaid veebidisaine. Võtke omaks CSS-i kohandatud atribuudid ja muutke oma CSS-i töövoogu pöördeliselt!

Lisamaterjalid

• MDN Web Docs: CSS-i kohandatud atribuudid
• W3C: CSS Custom Properties for Cascading Variables Module Level 1
• CSS-Tricks: Täielik juhend CSS-i kohandatud atribuutide kohta