CSS/@-Regeln/@property

Aus SELFHTML-Wiki
< CSS‎ | @-Regeln
Wechseln zu: Navigation, Suche

Die @property-Regel ist Teil der CSS Houdini API und erlaubt Entwicklern ihre eigenen custom properties zu definieren, und dabei Syntaxregeln festzulegen, die Typabfrage, Defaultwerte und Vererbung bestimmt.

In einer @property-Regel müssen genau drei Eigenschaften gesetzt werden:

syntax
Die Beschreibung des Wertetyps, den das custom property akzeptieren soll.
inherits
Legt fest, ob dieses Custom Property vererbt wird oder nicht
initial-value
Gibt an, welchen Wert das Custom Property haben soll, wenn es verwendet wird, ohne dass ihm ein Wert zugewiesen wurde oder dass der var()-Funktion ein Argument für einen Defaultwert übergeben wurde.

Die CSS-Syntaxbeschreibung besteht aus einer oder mehreren Syntaxkomponenten. Gibt man mehrere Komponenten an, müssen sie durch ein | voneinander getrennt werden. Das entspricht der Syntaxschreibweise in der CSS Spezifikation und bedeutet, dass die eine oder die andere Syntaxkomponente verwendet werden kann.

Eine Syntaxkomponente wiederum besteht aus einem Komponentennamen, auf den ein Multiplikator folgen kann.

Der Komponentenname ist - der Name eines CSS Datentyps, der in spitze Klammern gesetzt sein muss. Beispiel: <number> - ein selbstgewähltes Schlüsselwort (das den CSS Regeln für Schlüsselwörter entsprechen muss)

Als Multiplikator können Sie - ohne Leerstelle - dem Komponentennamen ein + oder # anfügen. Beide Multiplikatoren geben an, dass diese Komponente auch mehrfach aufgeführt werden darf. Der Unterschied ist, dass + eine durch Leerzeichen getrennte Werteliste beschreibt und # zusätzlich ein Komma zwischen den Werten verlangt.

Beispiele für Syntaxangaben
Syntax Mögliche Werte
"<string>" "Ein Text"
"<length> | auto" 17px
5em

auto
"<length-percentage># | verteilt" 17px
5em, 17%, 3px

verteilt

Sie können die folgenden CSS Datentypen verwenden:

<length>
Eine Längenangabe
<integer>
Ein ganzzahliger Wert
<number>
Ein Zahlenwert mit oder ohne Nachkommastellen
<percentage>
Eine Prozentangabe
<length-percentage>
Eine gültige Längen- oder Prozentangabe. Dieser Typ ist vor allem dann wichtig, wenn eine Liste von <length-percentage>-Angaben erstellt werden soll
<color>
Ein Farbwert
<url>
Eine URL, dargestellt mit der url()-Funktion
<image>
Ein Bildwert. Dies ist entweder eine URL oder ein CSS-Farbverlauf.
<angle>
Ein Winkel. Das ist eine Zahl mit der Einheit deg, rad, grad oder turn.
<time>
Eine Zeitangabe. Das ist eine Zahl mit der Einheit s oder ms.
<resolution>
Eine Auflösung. Dies ist eine Zahl mit einer der Einheiten dpi, dpcm oder dppx bzw. x.
<transform-function>
Eine Transform-Funktion (z.B. translate() oder rotate())
<transform-list>
Eine Liste von Transform-Funktionen. Entspricht <transform-funktion>+. Die Anwendung eines Multiplikators auf <transform-list> ist nicht zulässig!
<custom-ident>
Ein beliebiger gültiger CSS-Name
Ein beliebiger CSS-Name
Dieser Name

Die Liste von CSS Datentypen tragen wir noch nach, zur Zeit finden Sie sie in der W3C-Spezifikation.


asdsakd
@property --head-fg {
   syntax: "<color>";
   inherits: true;
   initial-value: white;
}
@property --head-bg {
   syntax: "<color>";
   inherits: true;
   initial-value: #c32e04;
}

Mithilfe der @property-Regel werden zwei Custom Propertys und die dazugehörigen Syntaxregeln festgelegt, welchen sie zu folgen haben.

Damit legen wir fest, dass diese beiden Eigenschaften genau eine Farbe erwarten, dass ihr Wert an Kind-Elemente vererbt wird und welcher Wert verwendet werden soll, wenn das Property nicht explizit gesetzt wurde.

Siehe auch

Weblinks