CSS @property sääntö

CSS @property sääntö

@property Säännöt käytetään suoraan määrittämään mukautetut CSS-ominaisuudet ilman JavaScriptin suorittamista.

@property Säännöt sisältävät tietotyyppitarkistuksen ja rajoitukset, asettavat oletusarvon ja määrittelevät, voidaanko arvoa periä.

Määritä mukautetun ominaisuuden esimerkki:

@property --myColor {
  syntax: "<color>";
  perii: true;
  initial-value: valkoinen;
}

Yllä oleva määrittely tarkoittaa --myColor Se on väriominaisuus, joka voi periä isovanhemman arvon, ja sen oletusarvo on lightgray.

Jos haluat käyttää mukautettuja ominaisuuksia CSS:ssa, käytämme var() Funktio:

body {
  background-color: var(--myColor);
}

Käyttää @property Edut:

• Tyyppitarkistus：On määritettävä mukautetun ominaisuuden tietotyyppi, kuten <number>、<color>、<length>。 Se estää virheet ja varmistaa mukautetun ominaisuuden oikean käytön.
• Aseta oletusarvo：Voit asettaa mukautetulle ominaisuudelle oletusarvon. Tämä varmistaa, että jos myöhemmin annetaan epäsyöttöä, selain käyttää määritettyä vaihtoehtoista arvoa.
• Aseta perintäkäytös：On määritettävä, voidaanko mukautetut ominaisuudet periväät vanhemmalta elementiltä.

Selaimen tuki

Taulukossa olevat numerot ilmaisevat ensimmäisen selaimen version, joka tukee tätä sääntöä täysin.

yksinkertainen @property -esimerkki

Tässä esimerkissä määritellään kaksi mukautettua ominaisuutta:--my-bg-color ja --my-txt-color. Sitten, div taustaväri ja väri mukautettuja ominaisuuksia:

Esimerkki

@property --my-bg-color {
  syntax: "<color>";
  perii: true;
  initial-value: valkoinen;
}
@property --my-txt-color {
  syntax: "<color>";
  perii: true;
  alkuperäinen-arvo: tummasininen;
}
div {
  leveys: 300px;
  korkeus: 150px;
  alaviiva: 15px;
  taustaväri: var(--my-bg-color);
  väri: var(--my-txt-color);
}

Kokeile itse

toista @property -esimerkkiä

Tässä esimerkissä käytämme oletusarvoisia mukautettuja ominaisuuksia <div> -elementillä. Sitten käytämme .tuore ja .luonto Luokassa määritellyt mukautetut ominaisuudet korvaavat mukautetut ominaisuudet (muilla väreillä), mikä on erittäin hyvä:

Esimerkki

@property --my-bg-color {
  syntax: "<color>";
  perii: true;
  initial-value: valkoinen;
}
div {
  leveys: 300px;
  korkeus: 150px;
  alaviiva: 15px;
  taustaväri: var(--my-bg-color);
}
.tuore {
  --my-bg-color: #ff6347;
}
.luonto {
  --my-bg-color: rgb(120, 180, 30);
}

Kokeile itse

tyyppitarkistuksen ja vaihtoehtoisten arvojen avulla vältetään virheet

Tässä esimerkissä käytämme: .luonto Luokassa määritellyt mukautetut ominaisuudet ovat kokonaislukuja. Tämä on epäsyöttö, selain käyttää: alkuperäinen-arvo Ominaisuudessa määritellyt vaihtoehtoiset värit (valkoinen):

Esimerkki

@property --my-bg-color {
  syntax: "<color>";
  perii: true;
  initial-value: valkoinen;
}
div {
  leveys: 300px;
  korkeus: 150px;
  alaviiva: 15px;
  taustaväri: var(--my-bg-color);
}
.tuore {
  --my-bg-color: #ff6347;
}
.luonto {
  --my-bg-color: 2;
}

Kokeile itse

perii arvoa

Tässä esimerkissä käytämme: perii Asetettu arvo: falseTämä tarkoittaa, että mukautetut ominaisuudet eivät perivät arvoja vanhemmalta elementiltä. Katso tulokset:

Esimerkki

@property --my-bg-color {
  syntax: "<color>";
  inherits: false;
  initial-value: valkoinen;
}

Kokeile itse

Seuraavassa esimerkissä käytämme: perii Asetettu arvo: trueTämä tarkoittaa, että mukautetut ominaisuudet perivät arvonsa vanhemmalta elementiltä. Katso tulokset:

Esimerkki

@property --my-bg-color {
  syntax: "<color>";
  perii: true;
  initial-value: valkoinen;
}

Kokeile itse

Luo pehmeä animaatio @propertyn avulla

Käyttää @property Uudet mahdollisuudet, joita säännöt voivat toteuttaa, on animoida sisältöä, jota ei voitu animoida aiemmin: gradientit. Katso seuraava esimerkki:

Esimerkki

Määritä kaksi mukautettua ominaisuutta gradientille:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

Kokeile itse

CSS @property sääntö