Reguła @property w CSS

Definicja i użycie

CSS @property Reguły są używane do bezpośredniego definiowania niestandardowych atrybutów CSS w tabeli stylów, bez uruchamiania jakiegokolwiek JavaScript.

@property Reguły mają funkcje sprawdzania typu danych i ograniczeń, pozwalają ustawić wartość domyślną oraz zdefiniować, czy atrybut może dziedziczyć wartość.

Użycie @property Zalety:

• Sprawdzenie typu i ograniczenia: musisz określić typ danych niestandardowego atrybutu, na przykład <number>, <color>, <length> itp. To zapobiega błędom i zapewnia poprawne użycie niestandardowych atrybutów.
• Ustawienie wartości domyślnej: możesz ustawić wartość domyślną dla niestandardowego atrybutu. To zapewnia, że jeśli przypisano niewłaściwą wartość, przeglądarka użyje zdefiniowanej wartości awaryjnej.
• Ustawienie zachowania dziedziczenia: musisz określić, czy niestandardowy atrybut może dziedziczyć wartość od elementu nadrzędnego.

Przykład: zdefiniowanie niestandardowego atrybutu

@property --my-color {
  syntax: '<color>';
  dziedziczy: true;
  initial-value: lightgray;
}

Powyższe definicje oznaczają, że --my-color to atrybut koloru, który może dziedziczyć wartość od elementu nadrzędnego i ma wartość domyślną lightgray.

Użycie niestandardowych atrybutów w CSS:

body {}}
  backgound-color: var(--my-color);
}

Przykład

Przykład 1

Określ dwie własne właściwości dla gradientu - i użyj ich do animacji gradientu:

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

Spróbuj sam

Przykład 2

Określ dwie własne właściwości: jedną dla rozmiaru elementu, drugą dla koloru elementu:

@property --item-size {
  syntax: '<percentage>';
  dziedziczy: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: '<color>';
  dziedziczy: false;
  initial-value: lightgray;
}

Spróbuj sam

Gramatyka CSS

@property --propertyname {
  syntax: '<color>';
  initial-value: red;
  dziedziczy: false;
}

Wartość właściwości

Obsługa przeglądarki

Liczby w tabeli oznaczają wersje przeglądarek, które w pełni obsługują tę @ zasadę.

Strony związane

Tutorial:Reguła @property w CSS