Це експериментальна технологія
Так як специфікація цієї технології ще не стабілізувалася, дивіться таблицю сумісності з приводу використання в різних браузерах. Також зауважте, що синтаксис і поведінку експериментальної технології може змінитися в майбутніх версіях браузерів, слідом за змінами специфікації.
Складні веб-сайти мають дуже велику кількість CSS, часто з безліччю повторюваних значень. Наприклад, один і той же колір може використовуватися в сотнях різних місць, що вимагає глобального пошуку і заміни, якщо цей колір необхідно змінити. CSS змінні дозволяють зберігати значення в одному місці, а потім багаторазово використовувати його в будь-якому іншому місці. Додатковою перевагою є семантичні ідентифікатори. Для прикладу: запис --main-text-color зрозуміліша, ніж # 00ff00. особливо якщо цей же колір використовується і в іншому контексті.
CSS змінні підкоряються каскаду і успадковують значення від своїх батьків.
Основне використання
Note: У більш ранньої специфікації префікс для змінних був var-. але пізніше був змінений на -. Firefox 31 і вище слідують нової специфікації. (Баг 985838)
Перший крок з CSS Перемінними
Почнемо з цього простого CSS, який забарвить елементи різних класів однаковим кольором:
Ми застосуємо його до цього HTML:
що приводить нас до цього:
Це призводить до того ж результату, що і попередній приклад, але дозволяє оголосити бажане властивість тільки один раз.
Спадкування змінних в CSS і повертаються значення
Призначені для користувача властивості можуть успадковуватися. Це означає, що якщо не встановлено ніякого значення для призначеного для користувача властивості на даному елементі, то використовується властивість його батька:
з наступним CSS:
В результаті var (- test) буде:
- для елемента з класом class = "two". 10px
- для елемента з класом class = "three". 2em
- для елемента з класом class = "four". 10px (успадковано від батька)
- для елемента з класом class = "one". недопустиме значення. що є значенням за замовчуванням для будь-якого користувача властивості.
Використовуючи var () ви можете оголосити безліч значень, що повертаються коли дана змінна не визначена, це може бути корисно при роботі з Custom Elements і Shadow DOM.
Перший аргумент функції це ім'я користувача властивості. Другий аргумент функції, якщо є, це значення, що повертається, який використовується в якості заміщає значення, коли призначене для користувача властивість є не дійсним. наприклад:
Даний метод також викликає проблеми з продуктивністю. Він відображає сторінку повільніше ніж зазвичай, тому що вимагає час на розбір.
Обгрунтованість і корисність
Поняття класичної концепції CSS, зв'язаність з кожним властивістю, не дуже зручно в плані користувацьких властивостей. Коли значення для користувача своства обробляються, браузер не знає де вони будуть застосовуватися, тому потрібно враховувати майже всі допустимі значення.
На жаль, ці значення можуть використовуватися через функціональну запис var (). в контексті де вони, можливо, не мають сенсу. Властивості і призначені для користувача змінні можуть привести до невалідним виразами CSS, що призводить до нової концепції валідності під час виконання.
Сумісність з браузерами
[1] Chrome initially implemented this feature using a different syntax, which required to prefix custom property names with -webkit-var- to define them. They could then be used unprefixed within a -webkit-var () function. Additionally, the implementation was hidden behind the Enable experimental WebKit features flag under chrome: // flags. later renamed to Enable experimental Web Platform features.
[2] У Chrome 34.0 прибрали цю функцію через проблеми з продуктивністю.
[3] This feature is implemented behind the preference layout.css.variables.enabled. defaulting to false and using the old var- variablename syntax in Gecko 29. Starting from Gecko 31 the preference is enabled by default and the new - variablename syntax is used.
Мітки документа і учасники
Дякуємо! Будь ласка, перевірте свою папку "Вхідні" для підтвердження підписки.
Якщо ви раніше не підтверджували підписку на розсилку новин Mozilla, то вам, можливо, доведеться зробити це. Будь ласка, перевірте папку Вхідні або Спам в своїй поштовій скриньці, щоб подивитися, чи не настав від нас лист.
Приховати підписку на розсилку новин