CSS @property sääntö
Määrittely ja käyttö
CSS @property
Säännöt käytetään mukautettujen CSS-ominaisuuksien suoraan määrittämiseen tyyleissä ilman minkäänlaisen JavaScriptin suorittamista.
@property
Säännöt sisältävät tyyppitarkistuksen ja rajoitusten toiminnallisuuden, voivat asettaa oletusarvon ja määritellä, voidaanko ominaisuus periä.
Käytä @property
Edut:
- Tyyppitarkistus ja rajoitukset: On määritettävä mukautetun ominaisuuden tietotyyppi, esimerkiksi <number>, <color>, <length> jne. Tämä estää virheitä ja varmistaa oikean mukautetun ominaisuuden käytön.
- Aseta oletusarvo: voidaan asettaa mukautetulle ominaisuudelle oletusarvo. Tämä varmistaa, että jos myöhemmin määritetään virheellinen arvo, selain käyttää määritettyä varmuusarvoa.
- Aseta perimisasetus: On määritettävä, voidaanko mukautettu ominaisuus periä isovarjeltavasta elementistä.
Esimerkki: määritä mukautettu ominaisuus
@property --my-color { syntax: "<color>"; inherits: true; initial-value: lightgray; }
Yllä oleva määrittely tarkoittaa, että --my-color on väriominaisuus, joka voi peri arvon isovarjeltavasta elementistä ja sen oletusarvo on lightgray.
Käytä CSS:ssä mukautettuja ominaisuuksia:
body {}} backgound-color: var(--my-color); }
Esimerkki
Esimerkki 1
Määritä kaksi mukautettua ominaisuutta - ja käytä niitä animoimaan väripaletti:
@property --startColor { syntax: "<color>"; initial-value: #EADEDB; inherits: false; } @property --endColor { syntax: "<color>"; initial-value: #BC70A4; inherits: false; }
Esimerkki 2
Määritä kaksi mukautettua ominaisuutta: yksi kohteiden koosta ja toinen kohteiden väristä:
@property --item-size { syntax: "<percentage>"; inherits: true; initial-value: 50%; } @property --item-color { syntax: "<color>"; inherits: false; initial-value: lightgray; }
CSS-grammatiikka
@property --propertyname { syntax: "<color>"; initial-value: red; inherits: false; }
ominaisuusarvo
arvo | kuvaus |
---|---|
--propertyname | Välttämätön. Mukautetun ominaisuuden nimi. |
syntax |
Voivat olla <length>, <number>, <percentage>, <length-percentage>, <color>, <image>, <url>, <integer>, <angle>, <time>, <resolution>, <transform-function> tai <custom-ident>, tai tietotyyppien ja avainsanojen arvojen lista. + (tyhjää erottava) ja # (pilkkuerottava) kertolajit merkitsevät arvolistan odottamista, esimerkiksi <color># merkitsee, että odotettava syntaksi on pilkkuerottama <color>-arvojen lista. Pystysuuntainen viiva (|) voi luoda odotetun syntaksin "tai"-ehdon, esimerkiksi <length> | auto hyväksyy <length> tai auto, ja <color># | <integer># odottaa pilkkuerottamaa <color>-arvojen lista tai pilkkuerottamaa <integer>-arvojen lista. |
initial-value | Aseta ominaisuuden alkuperäinen arvo. |
inherits | true tai false. Kontrolloi @property määrittämän mukautetun ominaisuuden rekisteröinnin oletusarvoista perintää. |
Selaimen tuki
Taulukon numerot ilmaisevat ensimmäisen täysin tukevan @ säännön selaimen version.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
85 | 85 | 128 | 16.4 | 71 |
Liittyvät sivut
Ohje:CSS @property sääntö