Właściwości niestandardowe

Załóżmy, że tworzysz wstępne style dla swojej witryny i zauważasz, że niektóre wartości w CSS się powtarzają. Używasz koloru dodgerblue jako głównego i dodajesz go do obramowań przycisków, tekstu linków i tła nagłówków. Za pomocą narzędzia do projektowania wybierasz też niektóre warianty tego niebieskiego koloru dla innych elementów witryny. Następnie otrzymasz przewodnik po stylu, a kolor podstawowy zmieni się na oklch(70% 0.15 270).

Właściwości niestandardowe, czyli zmienne CSS, umożliwiają porządkowanie i ponowne wykorzystywanie wartości w arkuszu CSS, dzięki czemu style są bardziej elastyczne i łatwiejsze do zrozumienia.

Tworzenie usług

Najprostszym sposobem utworzenia usługi jest ustawienie wartości w nowej usłudze o zdefiniowanej przez Ciebie nazwie.

.card {
  --base-size: 1em;
}

Wszystkie nazwy właściwości muszą zaczynać się od dwóch myślników. Dzięki temu nie możesz użyć istniejącej nazwy właściwości CSS dla wartości niestandardowej. Specyfikacja CSS nigdy nie doda właściwości, która zaczyna się od dwóch myślników.

Dostęp do tej właściwości można uzyskać za pomocą funkcji var(). W tym przykładzie rozmiar czcionki w zakresie .card-title jest dwukrotnie większy od wartości --base-size.

.card .card-title {
  font-size: calc(2 * var(--base-size));
}

za pomocą właściwości niestandardowej.

Jak już wiesz, możesz użyć wartości właściwości niestandardowej z funkcją var(). Funkcji var() możesz używać w wartościach, ale nie w zapytaniach o media. Są one szczególnie przydatne jako argumenty innych funkcji CSS.

Wartości zastępcze

Co się stanie, jeśli spróbujesz użyć właściwości niestandardowej, która nie ma ustawionej wartości? Funkcja var() przyjmuje drugą wartość, która będzie używana jako wartość domyślna. Wartością domyślną może być nawet inna właściwość niestandardowa z zagnieżdżoną właściwością var().

#my-element {
  background: var(
    --alert-variant-background,
    var(--alert-primary-background)
  );
}

Nieprawidłowe wartości

Jeśli właściwość niestandardowa przyjmuje nieprawidłową wartość, np. wartość 1em dla właściwości background-color, inne prawidłowe deklaracje dotyczące tego elementu dla tej właściwości nie będą używane. Dzieje się tak, ponieważ przeglądarka nie może wiedzieć, czy wartość jest nieprawidłowa, dopóki nie odrzuci innych deklaracji podczas obliczania wartości. Zamiast tego użyta wartość będzie wartością dziedziczoną lub początkową.

.content {
  background-color: blue;
}

.content.invalid {
  --length: 2rem;
  background-color: var(--length);
}

W powyższym przykładzie element .invalid nie będzie miał niebieskiego tła. Ponieważ background-color nie dziedziczy, wartość będzie wynosić transparent, czyli wartość początkową.

Zastępowanie i dziedziczenie

Najczęściej chcesz, aby właściwości niestandardowe miały domyślne działanie, czyli dziedziczenie wartości. Gdy ustawisz nową wartość właściwości, ten element i wszystkie jego elementy podrzędne będą miały tę wartość, dopóki nie zostanie ona zastąpiona inną wartością.

Właściwości niestandardowe są określane przez kaskadowość, więc mogą być też zastępowane przez bardziej szczegółowy selektor.

Większa kontrola dzięki @property

Właściwość niestandardowa utworzona przez ustawienie wartości może być dowolnego typu i jest dziedziczona. Aby mieć większą kontrolę nad właściwością niestandardową, możesz użyć reguły @property.

Nasza --base-size usługa utworzona wcześniej byłaby odpowiednikiem tej deklaracji @property.

@property --base-size {
  syntax: "*";
  inherits: true;
  initial-value: 18px;
}

Wartość syntax określa typy wartości CSS, które są prawidłowe dla właściwości. Jeśli ustawisz w tej właściwości inny typ, będzie on nieprawidłowy i zostanie zastąpiony wartością początkową lub odziedziczoną wartością ustawioną wyżej w kaskadzie.

Gdy tworzysz właściwość niestandardową za pomocą @property, możesz wyłączyć dziedziczenie za pomocą inherit: false. Zastąpienie wartości właściwości niestandardowej przy wyłączonym dziedziczeniu powoduje zmianę tej wartości w przypadku wybranego elementu, ale nie jego elementów podrzędnych. Jest to często przydatne, gdy wiele selektorów kieruje na ten sam element.

initial-value ustawia wartość właściwości, chyba że zostanie ona później zmieniona. O ile składnia nie jest *, czyli dowolnym typem CSS, @property musi mieć ustawioną wartość initial-value. Dzięki temu właściwość zawsze będzie miała wartość zgodną z określoną składnią i nigdy nie będzie niezdefiniowana.

Aktualizowanie właściwości niestandardowych za pomocą JavaScriptu

Wartość właściwości niestandardowej elementu można aktualizować za pomocą JavaScriptu, co pozwala dynamicznie aktualizować style witryny.

const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);

W tym przykładzie tag stylu w elemencie #my-button jest aktualizowany, a sprawdzenie go w Narzędziach deweloperskich pokazuje:

<button id="my-button" style="--color: orange">Click me</button>

W powyższym przykładzie możesz zobaczyć, jak ustawiać właściwości niestandardowe, uzyskując dostęp do danych przechowywanych w niestandardowych atrybutach HTML. Każdy przycisk ma atrybut data-color o wartości określonego koloru. Właściwość niestandardowa --background ustawiona w elemencie body jest resetowana do wartości data-color w przypadku kliknięcia dowolnego przycisku.

Możesz też użyć getComputedStyle(element).getPropertyValue("--variable"), aby uzyskać wartość właściwości w określonym elemencie. Może to być przydatne, jeśli logika musi reagować na wartość kaskadową.