CSS-i maagia avamine: Sügav sukeldumine @property ja kohandatud omaduste tüübidefinitsioonidesse

CSS-i kohandatud omadused (tuntud ka kui CSS-i muutujad) on muutnud revolutsiooniliselt seda, kuidas me CSS-i kirjutame ja hooldame. Need pakuvad taaskasutatavust, paindlikkust ja hooldatavust, muutes meie laadistikud dünaamilisemaks ja hallatavamaks. Kuid kuni viimase ajani puudus kohandatud omadustel võimalus määratleda nende oodatavaid andmetüüpe, mis piiras nende potentsiaali täiustatud stiilimisel ja animatsioonides. Sisenege @property reeglisse – see on mängumuutja, mis võimaldab meil selgesõnaliselt määratleda meie kohandatud omaduste tüübi, süntaksi ja algväärtuse.

Mis on @property reegel?

@property reegel on osa CSS Houdini API-de perekonnast, mille eesmärk on avada CSS-mootori sisemine toimimine arendajatele. Täpsemalt on @property osa Custom Properties and Values API-st. See võimaldab teil registreerida brauseris kohandatud omaduse, määrates selle:

• nimi: Kohandatud omaduse nimi (nt --my-color).
• süntaks: Omaduse oodatav andmetüüp (nt <color>, <number>, <length>).
• pärib: Kas omadus peaks pärima oma väärtuse vanem-elemendilt (true või false).
• algväärtus: Omaduse vaikeväärtus, kui muud väärtust pole määratud.

Nende omaduste määratlemisega saate suurema kontrolli selle üle, kuidas kohandatud omadusi kasutatakse ja kuidas need käituvad, eriti animatsioonides ja üleminekutes.

Miks kasutada @property? Kasulikud omadused

@property kasutamine pakub mitmeid olulisi eeliseid:

1. Tüübiohutus ja valideerimine

Ilma @property reeglita käsitleb CSS kõiki kohandatud omadusi stringidena. See võib põhjustada ootamatut käitumist, kui proovite neid kasutada arvutustes või animatsioonides, mis nõuavad konkreetseid andmetüüpe. Näiteks, kui kavatsete kohandatud omadust kasutada arvuna, kuid määrate sellele kogemata stringväärtuse, võivad teie animatsioonid katkeda või anda valesid tulemusi.

@property lahendab selle, võimaldades teil määrata kohandatud omaduse oodatava süntaksi (andmetüübi). Seejärel valideerib brauser määratud väärtuse selle süntaksi suhtes, tagades, et see vastab oodatud tüübile. Kui väärtus ei vasta süntaksile, kasutab brauser algväärtust (kui see on olemas) või käsitleb omadust kehtetuna.

2. Sujuvad animatsioonid ja üleminekud

@property tõeline võimsus tuleb esile animatsioonide ja üleminekute puhul. Ilma selleta võib kohandatud omaduste animeerimine olla keeruline, sest brauser ei tea, kuidas interpoleerida üldise stringi erinevate väärtuste vahel. Soovitud efekti saavutamiseks peate võib-olla kasutama JavaScripti häkke või piiratud CSS-i funktsioone.

Kohandatud omaduse süntaksi määratlemisega annate brauserile teada, kuidas selle väärtusi animatsioonide ja üleminekute ajal interpoleerida. Näiteks kui määratlete kohandatud omaduse süntaksiga <color>, teab brauser, et see peaks värvide vahel interpoleerima sujuva värvigradiendiga. Samamoodi, kui määratlete omaduse süntaksiga <number>, teab brauser, et see peaks numbrite vahel interpoleerima lineaarse progressiooniga.

3. Parem koodi loetavus ja hooldatavus

@property parandab teie CSS-koodi loetavust ja hooldatavust, tehes selgeks, millist andmetüüpi kohandatud omadus esindama peab. See aitab teistel arendajatel (ja teie tulevasel minal) mõista omaduse eesmärki ja seda, kuidas seda tuleks kasutada.

Lisaks, määratledes selgesõnaliselt kohandatud omaduse algväärtuse, pakute selge varuväärtuse, mida kasutatakse, kui muud väärtust pole määratud. See aitab vältida ootamatuid visuaalseid tõrkeid ja muudab teie koodi robustsemaks.

4. Parem jõudlus

Mõnel juhul võib @property kasutamine parandada teie CSS-koodi jõudlust. Andes brauserile rohkem teavet teie kohandatud omaduste oodatavate andmetüüpide kohta, võimaldate tal renderdamisprotsessi optimeerida. See võib viia kiiremate animatsioonide ja üleminekuteni, eriti keerukate paigutuste puhul.

@property süntaks

@property reegel on defineeritud järgmise süntaksiga:

            @property --property-name {
 syntax: <type>;
 inherits: true | false;
 initial-value: <value>;
}
            

              
                Copy
              
            
          

Vaatame iga komponenti lähemalt:

• --property-name: See on kohandatud omaduse nimi, mida te defineerite. See peab algama kahe sidekriipsuga (--) ja võib sisaldada mis tahes kehtivaid CSS-i identifikaatori märke. Näiteks: --primary-color, --font-size, --spacing-unit.
• syntax: See määrab kohandatud omaduse oodatava andmetüübi. See on määratletud CSS-i väärtustüübi deskriptoriga. Mõned levinumad süntaksi väärtused on:
• <color>: Esindab värvi väärtust (nt #ffffff, rgb(255, 255, 255), hsl(0, 0%, 100%), white).
• <number>: Esindab arvväärtust (nt 1, 3.14, -42).
• <length>: Esindab pikkuse väärtust (nt 10px, 2em, 50vh, 1rem).
• <percentage>: Esindab protsentuaalset väärtust (nt 50%, 100%, 25.5%).
• <string>: Esindab stringväärtust (nt "Hello", "World").
• <image>: Esindab pildi väärtust (nt url("image.jpg"), linear-gradient(...)).
• <angle>: Esindab nurga väärtust (nt 45deg, 0.5rad, 1turn).
• *: Esindab mis tahes kehtivat CSS-i väärtust. Kasutage ettevaatlikult, kuna see nullib tüübikontrolli eesmärgi.
• Kohandatud süntaks: Võimaldab teil defineerida keerukaid süntakseid, kasutades regulaaravaldistega sarnaseid mustreid.
• inherits: See kahendmuutuja määrab, kas kohandatud omadus peaks pärima oma väärtuse vanem-elemendilt. Kui see on seatud väärtusele true, siis omadus pärib. Kui see on false, siis omadus ei päri ja kasutab oma algväärtust, kui see pole elemendil selgesõnaliselt määratletud. Vaikeväärtus on false.
• initial-value: See määrab kohandatud omaduse vaikeväärtuse. Kui omadust pole elemendil selgesõnaliselt määratud, kasutab see seda väärtust. Algväärtus peab olema kehtiv väärtus vastavalt määratud süntaksile. Kui algväärtust pole antud ja muud väärtust pole seatud, käsitletakse omadust nii, nagu sellel oleks määramata väärtus.

Praktilised näited @property kasutamisest

Vaatame mõningaid praktilisi näiteid, kuidas @property oma CSS-koodis kasutada.

Näide 1: Värvi animeerimine

Selles näites loome kohandatud omaduse nimega --background-color ja animeerime seda CSS-i üleminekute abil. Määratleme süntaksiks <color>, et tagada brauseri korrektne interpoleerimine värvide vahel.

            @property --background-color {
 syntax: <color>;
 inherits: false;
 initial-value: #ffffff; /* White */
}

.box {
 width: 200px;
 height: 200px;
 background-color: var(--background-color);
 transition: --background-color 0.5s ease-in-out;
}

.box:hover {
 --background-color: #007bff; /* Blue */
}
            

              
                Copy
              
            
          

Selles koodis:

• Määratleme kohandatud omaduse --background-color süntaksiga <color>, seame inherits väärtuseks false ja algväärtuseks valge (#ffffff).
• Rakendame selle omaduse .box elemendi background-color väärtusele, kasutades var(--background-color).
• Lisame --background-color omadusele ülemineku, et see animeeruks sujuvalt, kui väärtus muutub.
• Muudame --background-color väärtuse hiirega üle libistamisel siniseks (#007bff), luues sujuva värviülemineku efekti.

Näide 2: Arvu animeerimine

Selles näites loome kohandatud omaduse nimega --blur-radius ja animeerime seda CSS-i üleminekute abil. Määratleme süntaksiks <length>, et tagada brauseri korrektne interpoleerimine pikkuse väärtuste vahel. See näide demonstreerib ka populaarset kasutusjuhtu pikkuste kasutamisel: piksliväärtused. See võiks hõlpsasti laieneda ka teistele ühikutüüpidele. Samuti on oluline märkida, et algväärtuse seadmine väärtusele `0px` on ülioluline, kuna brauser vajab üleminekute korrektseks teostamiseks baasühikut.

            @property --blur-radius {
 syntax: <length>;
 inherits: false;
 initial-value: 0px;
}

.image {
 width: 300px;
 height: 200px;
 background-image: url("image.jpg");
 filter: blur(var(--blur-radius));
 transition: --blur-radius 0.3s ease-in-out;
}

.image:hover {
 --blur-radius: 5px;
}
            

              
                Copy
              
            
          

Selles koodis:

• Määratleme kohandatud omaduse --blur-radius süntaksiga <length>, seame inherits väärtuseks false ja algväärtuseks 0px.
• Rakendame selle omaduse .image elemendi filter: blur() funktsioonile, kasutades var(--blur-radius).
• Lisame --blur-radius omadusele ülemineku, et see animeeruks sujuvalt, kui väärtus muutub.
• Muudame --blur-radius väärtuse hiirega üle libistamisel väärtuseks 5px, luues sujuva hägususe efekti.

Näide 3: Teemastatud kasutajaliidese loomine päritud omadustega

Selles näites loome lihtsa teemastatud kasutajaliidese, kasutades päritud kohandatud omadusi. Määratleme kohandatud omaduse nimega --theme-color ja seame selle :root elemendile. See võimaldab kõigil alam-elementidel teemavärvi pärida.

            @property --theme-color {
 syntax: <color>;
 inherits: true;
 initial-value: #4caf50; /* Green */
}

:root {
 --theme-color: #4caf50;
}

.button {
 background-color: var(--theme-color);
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}

.button:hover {
 --theme-color: #388e3c; /* Darker Green */
}
            

              
                Copy
              
            
          

Selles koodis:

• Määratleme kohandatud omaduse --theme-color süntaksiga <color>, seame inherits väärtuseks true ja algväärtuseks rohelise (#4caf50).
• Seame --theme-color väärtuse :root elemendile, muutes selle kättesaadavaks kõigile dokumenti elementidele.
• Kasutame seda omadust .button elemendi background-color määramiseks.
• Muudame --theme-color väärtuse hiirega üle libistamisel tumedamaks roheliseks (#388e3c), demonstreerides, kuidas päritud omadusi saab hõlpsasti uuendada, et muuta kasutajaliidese teemat.

Näide 4: Kohandatud süntaksi defineerimine

syntax omadus võib aktsepteerida ka stringi, et defineerida spetsiifilisem muster, mis on eriti kasulik keerukamate väärtuste valideerimiseks. Süntaks kasutab regulaaravaldistega sarnast süsteemi, mis on dokumenteeritud MDN-is (Mozilla Developer Network). See näide illustreerib, kuidas defineerida ja kasutada kohandatud süntaksit taustapositsiooni jaoks, mis aktsepteerib kehtivate väärtustena nii top, bottom, left kui ka right märksõnade valikuid.

            @property --background-position {
 syntax: "[ top | bottom | left | right ]{1,2}";
 inherits: false;
 initial-value: top left;
}

.container {
 width: 300px;
 height: 300px;
 background-image: url('image.jpg');
 background-position: var(--background-position);
}

/* Valid positions */
.container.top-right {
 --background-position: top right;
}

.container.bottom-left {
 --background-position: bottom left;
}

/* Invalid position (will fallback to initial-value) */
.container.invalid {
 --background-position: center;
}
            

              
                Copy
              
            
          

Siin on syntax määratud kehtivate märksõnade stringiesitusega. [ ] notatsioon defineerib valikute hulga, | sümbol eraldab neid ja {1,2} piirab lubatud väärtuste arvu ühe või kahe märksõnaga. Kui kasutatakse kehtetut väärtust nagu center, naaseb brauser algväärtuse top left juurde.

Brauseri tugi

Brauseri tugi @property reeglile on tänapäevastes brauserites üldiselt hea, sealhulgas:

• Chrome (versioon 64 ja uuemad)
• Edge (versioon 79 ja uuemad - põhineb Chromiumil)
• Firefox (versioon 72 ja uuemad)
• Safari (versioon 14.1 ja uuemad)

Siiski on alati hea mõte kontrollida uusimaid brauserite ühilduvustabeleid veebisaitidel nagu Can I use..., et tagada, et teie kasutatavad funktsioonid on toetatud brauserites, mida teie kasutajad tõenäoliselt kasutavad.

Vanemate brauserite puhul, mis ei toeta @property reeglit, ignoreerib brauser @property reeglit ja käsitleb kohandatud omadust lihtsalt tavalise CSS-muutujana. See tähendab, et animatsioonid ja üleminekud ei pruugi ootuspäraselt töötada, kuid kood on endiselt funktsionaalne.

Parimad praktikad @property kasutamisel

Siin on mõned parimad praktikad, mida @property kasutamisel meeles pidada:

• Defineerige alati süntaks: Veenduge, et defineerite alati oma kohandatud omaduste syntax, et tagada tüübiohutus ning võimaldada sujuvaid animatsioone ja üleminekuid.
• Määrake algväärtus: Pakkuge initial-value, et anda vaikeväärtus ja vältida ootamatuid visuaalseid tõrkeid.
• Kasutage kirjeldavaid nimesid: Valige oma kohandatud omadustele kirjeldavad nimed, mis näitavad selgelt nende eesmärki ja andmetüüpi. Näiteks kasutage --button-background-color asemel --color.
• Kaaluge pärimist: Otsustage, kas teie kohandatud omadused peaksid pärima oma vanem-elementidelt või mitte. Kasutage inherits: true omaduste jaoks, mida tuleks jagada üle kogu kasutajaliidese, näiteks teemavärvid või fondisuurused.
• Testige põhjalikult: Testige oma koodi erinevates brauserites, et tagada selle ootuspärane toimimine. Kasutage varumehhanisme vanemate brauserite jaoks, mis ei toeta @property.
• Dokumenteerige oma kohandatud omadused: Lisage oma CSS-koodile kommentaare, et selgitada oma kohandatud omaduste eesmärki ja kasutust. See muudab teistel arendajatel (ja teie tulevasel minal) teie koodi mõistmise lihtsamaks. Tööriistu nagu Stylelint saab samuti konfigureerida nende parimate tavade jõustamiseks.

@property ja CSS Houdini

Nagu varem mainitud, on @property osa CSS Houdini API-de perekonnast. CSS Houdini on madala taseme API-de kogum, mis avab CSS-mootori sisemise toimimise arendajatele, võimaldades neil laiendada CSS-i kohandatud funktsioonide ja käitumisviisidega.

Teised Houdini API-d hõlmavad:

• Paint API: Võimaldab teil defineerida kohandatud taustapilte, ääriseid ja maske, kasutades JavaScripti.
• Animation Worklet API: Võimaldab teil luua suure jõudlusega animatsioone, kasutades JavaScripti.
• Layout API: Võimaldab teil defineerida elementidele kohandatud paigutusalgoritme, näiteks ruudustikusüsteeme või müüritispaigutusi.
• Parser API: Võimaldab teil parsida ja manipuleerida CSS-koodi, kasutades JavaScripti.

Kombineerides @property teiste Houdini API-dega, saate luua tõeliselt võimsaid ja kohandatavaid CSS-lahendusi.

Kokkuvõte

@property reegel on võimas lisandus CSS-ile, mis võimaldab teil defineerida kohandatud omaduste tüüpe, võimaldades täiustatud stiilimist, animatsioone ja üleminekuid. Kasutades @property, saate parandada oma CSS-koodi tüübiohutust, loetavust, hooldatavust ja jõudlust.

Kuigi brauseri tugi on üldiselt hea, on oluline oma koodi erinevates brauserites testida ja pakkuda varumehhanisme vanematele brauseritele, mis ei toeta @property.

Järgides selles artiklis kirjeldatud parimaid praktikaid, saate rakendada @property võimsust, et luua tõeliselt hämmastavaid veebikogemusi.

Lisalugemist

• MDN Web Docs: @property
• Houdini.how: Juhend CSS Houdini kohta
• Can I use @property