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;
}

Kokeile itse

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;
}

Kokeile itse

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ö