CSS @property-regel

CSS @property-regel

@property Regeln används för att direkt definiera anpassade CSS-egenskaper i stiltabellen utan att köra någon JavaScript.

@property Regeln har data typkoll och restriktioner, anger standardvärde och definierar om egenskapen kan ärva värden.

Definiera ett exempel på en anpassad egenskap:

@property --myColor {
  syntax: "<color>";
  arver: sant;
  initial-value: ljusgrå;
}

Ovanstående definition betyder --myColor Det är en färgegenskap som kan ärva värden från föräldrelementet, med standardvärdet lightgray.

För att använda anpassade egenskaper i CSS använder vi var() Funktion:

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

Använd @property Fördelarna:

• Typkoll：Det måste anges vilket datatyp som används för den anpassade egenskapen, t.ex. <number>, <color>, <length>. Detta förhindrar fel och säkerställer korrekt användning av anpassade egenskaper
• Ställ in standardvärde：Det är möjligt att sätta en standardvärde för en anpassad egenskap. Detta säkerställer att om ett ogiltigt värde tilldelas senare, kommer webbläsaren att använda det definierade reservvärdet.
• Ställ in arvshandling：Det måste anges om en anpassad egenskap kan arbeta från sitt föräldrelementets värde.

Webbläsarstöd

Tal i tabellen representerar den första webbläsarversionen som helt stöder denna regel.

En enkel @property-exempel

I detta exempel definieras två anpassade egenskaper:--minne-färg och --minne-textfärgr. Därefter kommer div att använda bakgrundsfärg och färg Använd anpassade egenskaper:

Exempel

@property --minne-färg {
  syntax: "<color>";
  arver: sant;
  initial-value: ljusgrå;
}
@property --minne-textfärg {
  syntax: "<color>";
  arver: sant;
  initial-value: mörkblå;
}
div {
  bredd: 300px;
  höjd: 150px;
  marginal: 15px;
  bakgrundsfärg: var(--minne-färg);
  färg: var(--minne-textfärg);
}

Prova själv

en annan @property-instans

I detta exempel använder vi standardanpassade egenskaper på <div>-elementet. Sedan använder vi .färsk och .naturlig Klasser som överskrider anpassade egenskaper (genom att sätta andra färger), fungerar mycket bra:

Exempel

@property --minne-färg {
  syntax: "<color>";
  arver: sant;
  initial-value: ljusgrå;
}
div {
  bredd: 300px;
  höjd: 150px;
  marginal: 15px;
  bakgrundsfärg: var(--minne-färg);
}
.färsk {
  --minne-färg: #ff6347;
}
.naturlig {
  --minne-färg: rgb(120, 180, 30);
}

Prova själv

Genom typkontroll och reservvärden undviks fel

I detta exempel kommer vi att .naturlig Anpassade egenskaper i klassen sätts till heltal. Detta är ogiltigt, webbläsaren kommer att använda i initial-value Reservfärger definierade i egenskapen (ljusgrå):

Exempel

@property --minne-färg {
  syntax: "<color>";
  arver: sant;
  initial-value: ljusgrå;
}
div {
  bredd: 300px;
  höjd: 150px;
  marginal: 15px;
  bakgrundsfärg: var(--minne-färg);
}
.färsk {
  --minne-färg: #ff6347;
}
.naturlig {
  --minne-färg: 2;
}

Prova själv

använda arver-värdet

I detta exempel kommer vi att arver värdet sätts till falsktDetta innebär att anpassade egenskaper inte kommer att arbeta från sitt föräldrelement. Visa resultat:

Exempel

@property --minne-färg {
  syntax: "<color>";
  inherits: false;
  initial-value: ljusgrå;
}

Prova själv

Nästa exempel kommer att arver värdet sätts till santDetta innebär att anpassade egenskaper kommer att arbeta från dess föräldrelement. Visa resultat:

Exempel

@property --minne-färg {
  syntax: "<color>";
  arver: sant;
  initial-value: ljusgrå;
}

Prova själv

Använd @property för att skapa en smidig animation

Använd @property Nya möjligheter som reglerna kan realisera är animation av innehåll som tidigare inte kunde animeras: gradienter. Se följande exempel:

Exempel

Ange två anpassade egenskaper för gradienten:

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

Prova själv

CSS @property-regel