CSS reguła @property

CSS reguła @property

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

@property Reguły mają sprawdzanie typu danych i ograniczenia, ustawiają wartość domyślną i definiują, czy wartość może być dziedziczona.

Definicja instancji atrybutu niestandardowego:

@property --myColor {
  syntax: ",<color>";
  inherits: true;
  initial-value: lightgray;
}

Definicja powyżej oznacza --myColor jest to atrybut koloru, który może dziedziczyć wartość elementu nadrzędnego, jego wartość domyślna to lightgray.

Aby używać niestandardowych atrybutów w CSS, używamy var() Funkcja:

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

Użycie @property zalety:

• Typowanie typów：Wymagane jest określenie typu danych własnych atrybutów, takich jak <number>, <color>, <length>. Zapobiega to błędom i zapewnia poprawne użycie własnych atrybutów
• Ustawienie wartości domyślnej：Można ustawić domyślną wartość dla własnych atrybutów. To zapewnia, że jeśli przydzielona zostanie niewłaściwa wartość, przeglądarka użyje zdefiniowanej wartości zastępczej.
• Ustawienie zachowania dziedziczenia：Wymagane jest określenie, czy własne atrybuty mogą dziedziczyć wartości od elementu nadrzędnego.

Wsparcie przeglądarki

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje to regułę.

Prosty przykład @property

W tym przykładzie zdefiniowano dwa własne atrybuty:--my-bg-color i --my-txt-color. Następnie, div w background-color i color Używając własnych atrybutów w:

Przykład

@property --my-bg-color {
  syntax: ",<color>";
  inherits: true;
  initial-value: lightgray;
}
@property --my-txt-color {
  syntax: ",<color>";
  inherits: true;
  initial-value: darkblue;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
  color: var(--my-txt-color);
}

Spróbuj sam

innej instancji @property

W tym przykładzie użyjemy domyślnych własnych atrybutów w elemencie <div>. Następnie użyjemy .fresh i .nature Dobrze działa, gdy nadpisujemy własne atrybuty (ustawiając inne kolory):

Przykład

@property --my-bg-color {
  syntax: ",<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: rgb(120, 180, 30);
}

Spróbuj sam

Unikaj błędów poprzez sprawdzanie typu i wartości zastępczych

W następnym przykładzie, ustawimy .nature Wartości własnych atrybutów w klasach są ustawione na liczbę całkowitą. To jest niewłaściwe, przeglądarka użyje wartości zdefiniowanej w initial-value Zastępcze kolory zdefiniowane w atrybutach (lightgray):

Przykład

@property --my-bg-color {
  syntax: ",<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: 2;
}

Spróbuj sam

używając wartości inherits

W następnym przykładzie, ustawimy inherits wartość ustawiona na falseTo oznacza, że własne atrybuty nie dziedziczą wartości od elementu nadrzędnego. Zobacz wynik:

Przykład

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

Spróbuj sam

Następny przykład będzie inherits wartość ustawiona na trueTo oznacza, że własne atrybuty dziedziczą wartości od elementu nadrzędnego. Zobacz wynik:

Przykład

@property --my-bg-color {
  syntax: ",<color>";
  inherits: true;
  initial-value: lightgray;
}

Spróbuj sam

Użycie @property do tworzenia gładkich animacji

Użycie @property Nowe możliwości, które reguły mogą zaoferować, to animacja treści, które wcześniej nie były animowane: gradienty. Zobacz poniższy przykład:

Przykład

Określ dwie niestandardowe właściwości dla gradientu:

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

Spróbuj sam

CSS reguła @property