Ta strona została przetłumaczona przez Cloud Translation API.

Zmienne CSS – dlaczego jest to ważne?

Rob Dodson

zmiennych CSS, czyli niestandardowych właściwości CSS, to Chrome 49. Mogą pomóc w ograniczeniu powtórzeń w arkuszach CSS. a także zaawansowane efekty w środowisku wykonawczym, takie jak przełączanie motywów rozszerzania/uzupełniania przyszłych funkcji CSS.

Natłok funkcji CSS

Powszechną praktyką podczas projektowania aplikacji jest oddzielenie pewnej marki które zostaną wykorzystane ponownie, aby zachować spójność wyglądu aplikacji. Niestety powtarzanie tych wartości kolorów w kodzie CSS jest nie tylko przymusem, ale też podatnym na błędy. Jeśli w którymś momencie jeden z kolorów trzeba coś zmienić, można więc kierować się ostrożnością do wiatru i „zamienić”. ale przy odpowiednio dużym projekcie może to łatwo stać się niebezpieczne.

Ostatnio wielu deweloperów korzysta z preprocesorów CSS, takich jak SASS lub MNIEJ, które rozwiązują ten problem przy użyciu zmiennych preprocesora. Choć te narzędzia ogromnie zwiększyły produktywność programistów, mają jednak poważną wadę: są statyczne i nie mogą zmienia się w czasie działania. Dodanie możliwości zmiany zmiennych w czasie działania aplikacji umożliwia zastosowanie dynamicznych motywów aplikacji, ale ma też duży konsekwencje projektowania responsywnego i potencjału uzupełnienia przyszłych rozwiązań CSS. funkcje zabezpieczeń. W Chrome 49 te umiejętności są teraz dostępne w właściwości niestandardowych CSS.

Właściwości niestandardowe w pigułce

Właściwości niestandardowe dodają do naszego zestawu narzędzi CSS 2 nowe funkcje:

Możliwość przypisania przez autora dowolnych wartości do właściwości z atrybutem nazwę wybraną przez autora.
Funkcja var(), która pozwala autorowi użyć tych wartości w innych miejscach usług.

Oto krótki przykład, który pokazuje,

:root {
    --main-color: #06c;
}

#foo h1 {
    color: var(--main-color);
}

--main-color to właściwość niestandardowa zdefiniowana przez autora o wartości #06c. Notatka że wszystkie właściwości niestandardowe zaczynają się od dwóch myślników.

Funkcja var() pobiera i zastępuje się właściwością niestandardową. w efekcie color: #06c;, dopóki jest zdefiniowana właściwość niestandardowa w arkuszu stylów powinien być dostępny dla funkcji var.

Na początku składnia może wyglądać dziwnie. Wielu programistów pyta: „Dlaczego nie używać $foo jako nazw zmiennych?” Specjalnie wybrano tę metodę jak najbardziej elastycznie do obsługi makr $foo. Aby poznać historię, przeczytaj ten post od jednego z autorów specyfikacji, czyli Tabu Atkinsa.

Składnia właściwości niestandardowej

Składnia właściwości niestandardowej jest prosta.

--header-color: #06c;

Pamiętaj, że we właściwościach niestandardowych jest rozróżniana wielkość liter, więc parametry --header-color oraz --Header-Color to różne właściwości niestandardowe. Choć wydają się proste, wartość nominalna, dopuszczalna składnia właściwości niestandardowych jest w rzeczywistości całkiem są mniej rygorystyczne. Oto przykład prawidłowej właściwości niestandardowej:

--foo: if(x > 5) this.width = 10;

Nie byłaby to przydatna jako zmienna, ponieważ byłaby nieprawidłowa w może być odczytywana i wykonywana za pomocą JavaScriptu pod adresem w środowisku wykonawczym. Oznacza to, że właściwości niestandardowe mogą odblokować różnego rodzaju interesujące techniki, których nie jest obecnie możliwe w przypadku współczesnych preprocesorów CSS. No więc Jeśli myślisz „Zieeewnę, to dlaczego mnie to obchodzi...”, popatrz jeszcze raz. Nie są to zmienne, z którymi często pracujesz.

Kaskada

Właściwości niestandardowe podlegają standardowym regułom kaskadowym, więc możesz zdefiniować te same właściwość o różnych poziomach szczegółowości

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
    While I got red set directly on me!
    <p>I’m red too, because of inheritance!</p>
</div>

Oznacza to, że możesz wykorzystać właściwości niestandardowe w zapytaniach o media, aby ułatwić dzięki elastycznemu projektowaniu. Jednym z przypadków użycia może być poszerzenie marginesów, główne elementy sekcji wraz ze zwiększaniem rozmiaru ekranu:

:root {
    --gutter: 4px;
}

section {
    margin: var(--gutter);
}

@media (min-width: 600px) {
    :root {
    --gutter: 16px;
    }
}

Pamiętaj, że powyższy fragment kodu nie jest możliwy przy użyciu stosowane obecnie przez nas moduły wstępnego przetwarzania danych CSS, które nie są w stanie definiować zmiennych w multimediach zapytań. Wykorzystując tę umiejętność, masz duży potencjał.

Właściwości niestandardowe mogą też pobierać wartość z innych właściwości niestandardowe. Może to być bardzo przydatne przy tworzeniu motywów:

:root {
    --primary-color: red;
    --logo-text: var(--primary-color);
}

Funkcja var()

Aby pobrać wartość właściwości niestandardowej i jej użyć, użyj metody var(). Składnia funkcji var() wygląda tak:

var(<custom-property-name> [, <declaration-value> ]? )

Gdzie <custom-property-name> to nazwa właściwości niestandardowej zdefiniowanej przez autora, np. --foo, a <declaration-value> to wartość zastępcza, która jest używana, gdy podana właściwość niestandardowa jest nieprawidłowa. Wartości zastępcze mogą być rozdzielone przecinkami , która zostanie połączona w jedną wartość. Na przykład var(--font-stack, "Roboto", "Helvetica"); definiuje wartość zastępczą "Roboto", "Helvetica". Zachowaj w pamiętaj, że skrócone wartości, takie jak te używane jako marginesy i dopełnienia, rozdzielane przecinkami, więc odpowiednia wartość zastępcza dopełnienia wyglądałaby tak.

p {
    padding: var(--pad, 10px 15px 20px);
}

Korzystając z tych wartości zastępczych, autor komponentu może napisać style obronne dla ich pierwiastek:

/* In the component’s style: */
.component .header {
    color: var(--header-color, blue);
}
.component .text {
    color: var(--text-color, black);
}

/* In the larger application’s style: */
.component {
    --text-color: #080;
    /* header-color isn’t set,
        and so remains blue,
        the fallback value */
}

Ta technika jest szczególnie przydatna przy tworzeniu motywów dla komponentów sieciowych, które używają cienia DOM, ponieważ właściwości niestandardowe mogą przechodzić przez granice cieni. Autor komponentu internetowego może utworzyć początkowy projekt z użyciem wartości zastępczych i udostępnić pod postacią właściwości niestandardowych.

<!-- In the web component's definition: -->
<x-foo>
    #shadow
    <style>
        p {
        background-color: var(--text-background, blue);
        }
    </style>
    <p>
        This text has a yellow background because the document styled me! Otherwise it
        would be blue.
    </p>
</x-foo>

/* In the larger application's style: */
x-foo {
    --text-background: yellow;
}

Podczas korzystania z usługi var() trzeba uważać na kilka kwestii. Zmienne nie mogą być nazwy właściwości. Przykład:

.foo {
    --side: margin-top;
    var(--side): 20px;
}

Nie jest to jednak równoważne ustawieniu margin-top: 20px;. Zamiast tego makro druga deklaracja jest nieprawidłowa i jest odrzucana jako błąd.

Nie można też (natychmiastowo) budować wartości, jeśli jej część jest przekazywana przez zmienną:

.foo {
    --gap: 20;
    margin-top: var(--gap)px;
}

Nie odpowiada to ustawieniu margin-top: 20px;. Aby utworzyć potrzebujesz czegoś innego: funkcji calc().

Tworzenie wartości za pomocą funkcji calc()

Jeśli jeszcze nie znasz tej funkcji, możesz z łatwością korzystać z funkcji calc() które pozwala obliczyć wartości CSS. Jest obsługiwana przez wszystkie nowoczesne przeglądarki i można ją łączyć. za pomocą właściwości niestandardowych do tworzenia nowych wartości. Na przykład:

.foo {
    --gap: 20;
    margin-top: calc(var(--gap) * 1px); /* niiiiice */
}

Praca z właściwościami niestandardowymi w JavaScripcie

Aby poznać wartość właściwości niestandardowej w czasie działania, użyj getPropertyValue() dla obliczonego obiektu CSSStyleDetectation.

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>I’m a red paragraph!</p>

/* JS */
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
// value = 'red'

Aby w podobny sposób ustawić wartość właściwości niestandardowej w czasie działania, użyj funkcji Metoda setProperty() obiektu CSSStyleDeclaration.

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>Now I’m a green paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'green');

Możesz też ustawić wartość właściwości niestandardowej tak, aby odwołać się do innego w czasie działania za pomocą funkcji var() w wywołaniu funkcji setProperty()

/* CSS */
:root {
    --primary-color: red;
    --secondary-color: blue;
}

<!-- HTML -->
<p>Sweet! I’m a blue paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'var(--secondary-color)');

Właściwości niestandardowe mogą odnosić się do innych właściwości niestandardowych w atrybucie arkuszy stylów, można by się zastanowić, jak może to doprowadzić do powstania efekt działania w czasie działania.

Obsługa przeglądarek

Obecnie Chrome 49, Firefox 42, Safari 9.1 oraz iOS Safari 9.3 obsługują niestandardowe wersje usług.

Prezentacja

Wypróbuj przykład wszystkich interesujących technik, z których możesz korzystać do właściwości niestandardowych.

Więcej informacji

Jeśli chce Pan/Pani dowiedzieć się więcej o właściwościach niestandardowych, Philip Walton zespół Google Analytics napisał przewodnik, dlaczego jest bardzo zadowolony z usług niestandardowych. a postęp przesyłania możesz śledzić w innych przeglądarkach chromestatus.com.