Otključavanje CSS magije: Duboko zaronjavanje u @property i definicije tipova prilagođenih svojstava

CSS prilagođena svojstva (također poznata kao CSS varijable) revolucionirala su način na koji pišemo i održavamo CSS. Ona nude ponovnu upotrebljivost, fleksibilnost i održivost, čineći naše stilske listove dinamičnijima i upravljivijima. Međutim, do nedavno, prilagođenim svojstvima nedostajala je mogućnost definiranja njihovih očekivanih tipova podataka, što je ograničavalo njihov potencijal za napredno stiliziranje i animacije. Upoznajte @property pravilo – prekretnicu koja nam omogućuje da eksplicitno definiramo tip, sintaksu i početnu vrijednost naših prilagođenih svojstava.

Što je @property pravilo?

@property pravilo dio je CSS Houdini obitelji API-ja, koja ima za cilj izložiti unutarnje funkcioniranje CSS engine-a programerima. Konkretno, @property je dio Custom Properties and Values API-ja. Omogućuje vam registriranje prilagođenog svojstva u pregledniku, specificirajući njegovo:

• name: Naziv prilagođenog svojstva (npr., --my-color).
• syntax: Očekivani tip podataka svojstva (npr., <color>, <number>, <length>).
• inherits: Treba li svojstvo naslijediti svoju vrijednost od nadređenog elementa (true ili false).
• initial-value: Zadanu vrijednost svojstva ako nije specificirana druga vrijednost.

Definiranjem ovih karakteristika, dobivate veću kontrolu nad načinom na koji se prilagođena svojstva koriste i kako se ponašaju, posebno u animacijama i prijelazima.

Zašto koristiti @property? Prednosti

Korištenje @property nudi nekoliko značajnih prednosti:

1. Sigurnost tipa i validacija

Bez @property, CSS tretira sva prilagođena svojstva kao nizove znakova. To može dovesti do neočekivanog ponašanja kada ih pokušate koristiti u izračunima ili animacijama koje zahtijevaju određene tipove podataka. Na primjer, ako namjeravate da prilagođeno svojstvo predstavlja broj, ali mu slučajno dodijelite vrijednost niza znakova, vaše animacije mogu se prekinuti ili proizvesti netočne rezultate.

@property to rješava dopuštajući vam da specificirate očekivanu sintaksu (tip podataka) prilagođenog svojstva. Preglednik će tada validirati dodijeljenu vrijednost u odnosu na ovu sintaksu, osiguravajući da je u skladu s očekivanim tipom. Ako se vrijednost ne podudara sa sintaksom, preglednik će koristiti početnu vrijednost (ako je navedena) ili će svojstvo tretirati kao nevažeće.

2. Besprijekorne animacije i prijelazi

Prava snaga @property dolazi do izražaja kada su u pitanju animacije i prijelazi. Bez njega, animiranje prilagođenih svojstava može biti nezgodno jer preglednik ne zna kako interpolirati između različitih vrijednosti generičkog niza znakova. Možda ćete se morati poslužiti JavaScript hakovima ili koristiti ograničene CSS značajke kako biste postigli željeni učinak.

Definiranjem sintakse prilagođenog svojstva, govorite pregledniku kako da interpolira između njegovih vrijednosti tijekom animacija i prijelaza. Na primjer, ako definirate prilagođeno svojstvo sa sintaksom <color>, preglednik zna da bi trebao interpolirati između boja koristeći glatki gradijent boja. Slično tome, ako definirate svojstvo sa sintaksom <number>, preglednik zna da bi trebao interpolirati između brojeva koristeći linearnu progresiju.

3. Poboljšana čitljivost i održivost koda

@property poboljšava čitljivost i održivost vašeg CSS koda time što jasno daje do znanja koji tip podataka prilagođeno svojstvo namjerava predstavljati. To pomaže drugim programerima (i vašem budućem ja) da razumiju svrhu svojstva i kako bi ga trebalo koristiti.

Nadalje, eksplicitnim definiranjem početne vrijednosti prilagođenog svojstva, pružate jasnu rezervnu vrijednost koja će se koristiti ako nije specificirana druga vrijednost. To može spriječiti neočekivane vizualne greške i učiniti vaš kod robusnijim.

4. Poboljšane performanse

U nekim slučajevima, korištenje @property može poboljšati performanse vašeg CSS koda. Pružanjem pregledniku više informacija o očekivanim tipovima podataka vaših prilagođenih svojstava, dopuštate mu da optimizira proces renderiranja. To može dovesti do bržih animacija i prijelaza, posebno na složenim izgledima.

Sintaksa @property

@property pravilo definirano je sljedećom sintaksom:

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

              
                Copy
              
            
          

Razmotrimo svaku od ovih komponenti:

• --property-name: Ovo je naziv prilagođenog svojstva koje definirate. Mora započeti s dvije crtice (--) i može sadržavati bilo koje važeće CSS identifikatorske znakove. Na primjer: --primary-color, --font-size, --spacing-unit.
• syntax: Ovo specificira očekivani tip podataka prilagođenog svojstva. Definira se pomoću deskriptora tipa CSS vrijednosti. Neke uobičajene vrijednosti sintakse uključuju:
• <color>: Predstavlja vrijednost boje (npr., #ffffff, rgb(255, 255, 255), hsl(0, 0%, 100%), white).
• <number>: Predstavlja numeričku vrijednost (npr., 1, 3.14, -42).
• <length>: Predstavlja vrijednost duljine (npr., 10px, 2em, 50vh, 1rem).
• <percentage>: Predstavlja postotnu vrijednost (npr., 50%, 100%, 25.5%).
• <string>: Predstavlja vrijednost niza znakova (npr., "Hello", "World").
• <image>: Predstavlja vrijednost slike (npr., url("image.jpg"), linear-gradient(...)).
• <angle>: Predstavlja vrijednost kuta (npr., 45deg, 0.5rad, 1turn).
• *: Predstavlja bilo koju važeću CSS vrijednost. Koristite oprezno, jer poništava svrhu provjere tipa.
• Custom syntax: Omogućuje vam definiranje složenih sintaksi pomoću uzoraka sličnih regularnim izrazima.
• inherits: Ova booleova vrijednost određuje treba li prilagođeno svojstvo naslijediti svoju vrijednost od nadređenog elementa. Ako je postavljeno na true, svojstvo će naslijediti. Ako je postavljeno na false, svojstvo neće naslijediti i koristit će svoju početnu vrijednost ako nije eksplicitno definirano na elementu. Zadana vrijednost je false.
• initial-value: Ovo specificira zadanu vrijednost prilagođenog svojstva. Ako svojstvo nije eksplicitno postavljeno na element, koristit će ovu vrijednost. Početna vrijednost mora biti važeća vrijednost prema specificiranoj sintaksi. Ako nije navedena početna vrijednost i nije postavljena druga vrijednost, svojstvo će se tretirati kao da ima svoju nepostavljenu vrijednost.

Praktični primjeri @property u akciji

Pogledajmo neke praktične primjere kako koristiti @property u vašem CSS kodu.

Primjer 1: Animiranje boje

U ovom primjeru, stvorit ćemo prilagođeno svojstvo pod nazivom --background-color i animirati ga pomoću CSS prijelaza. Definirat ćemo sintaksu kao <color> kako bismo osigurali da preglednik ispravno interpolira između boja.

            @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
              
            
          

U ovom kodu:

• Definiramo prilagođeno svojstvo --background-color sa sintaksom <color>, postavljamo inherits na false i postavljamo initial-value na bijelu (#ffffff).
• Primjenjujemo ovo svojstvo na background-color elementa .box pomoću var(--background-color).
• Dodajemo prijelaz na svojstvo --background-color tako da se glatko animira kada se vrijednost promijeni.
• Mijenjamo vrijednost --background-color u plavu (#007bff) pri prelasku mišem, stvarajući glatki efekt prijelaza boje.

Primjer 2: Animiranje broja

U ovom primjeru, stvorit ćemo prilagođeno svojstvo pod nazivom --blur-radius i animirati ga pomoću CSS prijelaza. Definirat ćemo sintaksu kao <length> kako bismo osigurali da preglednik ispravno interpolira između vrijednosti duljine. Ovaj primjer također prikazuje popularan slučaj upotrebe duljina: vrijednosti piksela. To se lako može prevesti i na druge vrste jedinica. Također je važno napomenuti da je postavljanje početne vrijednosti na `0px` ključno, jer pregledniku treba osnovna jedinica za ispravno izvođenje prijelaza.

            @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
              
            
          

U ovom kodu:

• Definiramo prilagođeno svojstvo --blur-radius sa sintaksom <length>, postavljamo inherits na false i postavljamo initial-value na 0px.
• Primjenjujemo ovo svojstvo na funkciju filter: blur() elementa .image pomoću var(--blur-radius).
• Dodajemo prijelaz na svojstvo --blur-radius tako da se glatko animira kada se vrijednost promijeni.
• Mijenjamo vrijednost --blur-radius na 5px pri prelasku mišem, stvarajući glatki efekt zamućenja.

Primjer 3: Stvaranje tematskog korisničkog sučelja s naslijeđenim svojstvima

U ovom primjeru, stvorit ćemo jednostavno tematsko korisničko sučelje koristeći naslijeđena prilagođena svojstva. Definirat ćemo prilagođeno svojstvo pod nazivom --theme-color i postaviti ga na elementu :root. To će omogućiti svim podređenim elementima da naslijede boju teme.

            @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
              
            
          

U ovom kodu:

• Definiramo prilagođeno svojstvo --theme-color sa sintaksom <color>, postavljamo inherits na true i postavljamo initial-value na zelenu (#4caf50).
• Postavljamo vrijednost --theme-color na elementu :root, čineći ga dostupnim svim elementima u dokumentu.
• Koristimo ovo svojstvo za postavljanje background-color elementa .button.
• Mijenjamo vrijednost --theme-color u tamniju zelenu (#388e3c) pri prelasku mišem, demonstrirajući kako se naslijeđena svojstva mogu lako ažurirati kako bi se promijenila tema korisničkog sučelja.

Primjer 4: Definiranje prilagođene sintakse

Svojstvo syntax također može prihvatiti niz za definiranje specifičnijeg uzorka, što je posebno korisno za validaciju složenijih vrijednosti. Sintaksa koristi sustav sličan regularnim izrazima, dokumentiran na MDN-u (Mozilla Developer Network). Ovaj primjer ilustrira kako definirati i koristiti prilagođenu sintaksu za poziciju pozadine koja prihvaća opcije ključnih riječi `top`, `bottom`, `left` i `right` kao važeće vrijednosti.

            @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
              
            
          

Ovdje je `syntax` specificirana pomoću niza koji predstavlja važeće ključne riječi. Notacija `[ ]` definira skup opcija, simbol `|` ih razdvaja, a `{1,2}` ograničava broj dopuštenih vrijednosti na jednu ili dvije ključne riječi. Ako se koristi nevažeća vrijednost poput `center`, preglednik će se vratiti na `initial-value` od `top left`.

Podrška preglednika

Podrška preglednika za @property općenito je dobra u modernim preglednicima, uključujući:

• Chrome (verzija 64 i novije)
• Edge (verzija 79 i novije - temeljen na Chromiumu)
• Firefox (verzija 72 i novije)
• Safari (verzija 14.1 i novije)

Međutim, uvijek je dobra ideja provjeriti najnovije tablice kompatibilnosti preglednika na web stranicama kao što je Can I use... kako biste bili sigurni da su značajke koje koristite podržane u preglednicima koje vaši korisnici vjerojatno koriste.

Za starije preglednike koji ne podržavaju @property, preglednik će zanemariti @property pravilo i jednostavno tretirati prilagođeno svojstvo kao regularnu CSS varijablu. To znači da animacije i prijelazi možda neće raditi kako se očekuje, ali će kod i dalje biti funkcionalan.

Najbolje prakse za korištenje @property

Evo nekoliko najboljih praksi koje treba imati na umu prilikom korištenja @property:

• Uvijek definirajte sintaksu: Obavezno uvijek definirajte syntax vaših prilagođenih svojstava kako biste osigurali sigurnost tipa i omogućili besprijekorne animacije i prijelaze.
• Postavite početnu vrijednost: Osigurajte initial-value kako biste osigurali zadanu vrijednost i spriječili neočekivane vizualne greške.
• Koristite opisne nazive: Odaberite opisne nazive za vaša prilagođena svojstva koji jasno ukazuju na njihovu svrhu i tip podataka. Na primjer, koristite --button-background-color umjesto --color.
• Razmotrite nasljeđivanje: Odlučite trebaju li vaša prilagođena svojstva naslijediti od svojih nadređenih elemenata ili ne. Koristite inherits: true za svojstva koja bi trebala biti podijeljena kroz korisničko sučelje, kao što su boje teme ili veličine fonta.
• Temeljito testirajte: Testirajte svoj kod u različitim preglednicima kako biste bili sigurni da radi kako se očekuje. Koristite mehanizme povratka za starije preglednike koji ne podržavaju @property.
• Dokumentirajte svoja prilagođena svojstva: Dodajte komentare svom CSS kodu kako biste objasnili svrhu i upotrebu vaših prilagođenih svojstava. To će drugim programerima (i vašem budućem ja) olakšati razumijevanje vašeg koda. Alati poput Stylelint-a također se mogu konfigurirati za provedbu ovih najboljih praksi.

@property i CSS Houdini

Kao što je ranije spomenuto, @property je dio CSS Houdini obitelji API-ja. CSS Houdini je zbirka API-ja niske razine koji izlažu unutarnje funkcioniranje CSS engine-a programerima, omogućujući im da prošire CSS s prilagođenim značajkama i ponašanjima.

Ostali Houdini API-ji uključuju:

• Paint API: Omogućuje vam definiranje prilagođenih pozadinskih slika, obruba i maski pomoću JavaScripta.
• Animation Worklet API: Omogućuje vam stvaranje animacija visokih performansi pomoću JavaScripta.
• Layout API: Omogućuje vam definiranje prilagođenih algoritama izgleda za elemente, kao što su sustavi rešetki ili rasporedi zida.
• Parser API: Omogućuje vam parsiranje i manipuliranje CSS kodom pomoću JavaScripta.

Kombiniranjem @property s drugim Houdini API-jima, možete stvoriti uistinu moćna i prilagodljiva CSS rješenja.

Zaključak

@property pravilo je moćan dodatak CSS-u koji vam omogućuje definiranje tipova prilagođenih svojstava, omogućujući napredno stiliziranje, animacije i prijelaze. Korištenjem @property, možete poboljšati sigurnost tipa, čitljivost, održivost i performanse vašeg CSS koda.

Iako je podrška preglednika općenito dobra, važno je testirati svoj kod u različitim preglednicima i osigurati mehanizme povratka za starije preglednike koji ne podržavaju @property.

Slijedeći najbolje prakse navedene u ovom članku, možete iskoristiti snagu @property za stvaranje uistinu nevjerojatnih web iskustava.

Daljnje istraživanje

• MDN Web Docs: @property
• Houdini.how: Vodič za CSS Houdini
• Can I use @property