Від автора: починаючи з EdgeHTML 15 Windows 10 Creators Update, Microsoft Edge представляє підтримку користувацьких CSS-властивостей, нового примітивного типу значень для повністю каскадних змінних властивості CSS. Користувальницькі CSS-властивості можна подивитися в збірках Windows Insider Preview, починаючи з EdgeHTML 15.15061. Відкрийте наше демо за цим властивостям, щоб побачити їх в дії!
Що таке користувальницькі CSS-властивості?
У SASS/LESS та інших препроцессорах змінні з’явилися вже досить давно, що є однією з причин, чому в неофіційних опитуваннях ~75% опитаних веб-розробників використовують ці інструменти в повсякденній роботі. Основний мінус цих інструментів полягає в тому, що, по суті, це «пошук і заміна» заданого значення. Тобто змінні не можна оновити без перекомпіляції стилів.
Давайте познайомимося з користувацькими CSS-властивості (або CSS-змінними). Користувальницькі властивості можна використовувати за тим же призначенням, проте у них є плюс – ці властивості повністю каскадны, з ними можна взаємодіяти через JS, і вони не вимагають додаткових дій для роботи.
Як використовувати користувальницькі властивості
Практичний приклад: первинний і вторинний колір сайту.
:root {
–primary: #0B61A4;
–secondary: #25567B;
}
header {
background: var(–primary);
border-bottom: 2px solid var(–secondary);
}
Давайте розберемо код. Для оголошення нового інтерфейсу властивості використовуються два тире. У наведеному вище прикладі ми створили дві властивості —primary і —secondary. Використовувати ці властивості можна з допомогою функції var().
Важливо відзначити, що власну властивість може зберігати будь валідний CSS-код. Включіть фантазію і використовуйте їх на повну! Наприклад, запис нижче є валідним користувальницьким властивістю:
–bg: rgb(calc(var(–r) + var(–modifier)), calc(var (g) + var(–modifier)), calc(var(–b) + (var(–modifier) + 50)));
Примітка: ми широко застосовуємо методологію обчислення квітів у нашому демо з собакою, подивіться самі!
Створення фолбеков
Найчастіше користувальницькі властивості використовуються в компонентах. Ви спроектували компонент, і вам потрібно встановити розумні значення за замовчуванням для всіх користувацьких властивостей. Користувальницькі властивості слідують тим же шаблоном, що й інші CSS-значення, тому в них можна задавати фолбек значення. Наприклад:
body {
background: var(–primary, blue);
}
У цьому разі, якщо при підстановці властивість —primary не існує, буде використаний колір blue, а не прозорий.
Замітка: фолбек не можна створити для значень, які не працюють з даними властивістю. Наприклад:
div {
–primary: blue;
margin-top: var(–primary, 12px);
}
Код вище не спрацює, так як blue не є коректним значенням властивості margin-top, але користувальницькі властивості не вміють читати синтаксис правил властивостей, до яких вони застосовуються. Все, що важливо – якщо у нас значення для —primary чи ні. Так як у нас є значення, ми підставляємо його, пробуємо розпарсити margin-top: blue і викидаємо властивість, як невалидное.
Область дії користувацьких властивостей
Область дії користувацьких властивостей працює точно також, як і в інших CSS-властивості шляхом каскадування. Це цінно, коли, наприклад, команда розробників створює разом компоненти або секції сайту. Щоб проілюструвати, давайте візьмемо наш попередній приклад і додамо в нього компонент зі своїм користувальницьким властивістю –primary:
body {
–primary: blue;
background: var(–primary);
}
.my-component {
–primary: yellow;
background: var(–primary);
}
В результаті ми отримуємо фон blue для тега body і yellow .my-component.
Визначення підтримки користувацьких властивостей
Важливо пам’ятати, що CSS не повинен показувати помилки на екрані, тому якщо браузер не підтримує користувальницькі властивості, ви помітите це тільки в тому випадку, якщо ці стилі мають візуальні значення. Простий спосіб використовувати техніку прогресивного поліпшення для користувацьких властивостей на сайті – це використовувати різні стилі для браузерів, які не підтримують власні стилі. Зробити це можна, обернувши власну властивість у блок @supports.
body {
background: red;
}
@supports(–foo: blue) {
body {
background: green;
}
}
Важливо зрозуміти, що @supports перевіряє —foo тільки на правильність синтаксису, а не на збіг властивості і значення. Наприклад, у попередньому прикладі і на прикладі нижче фон body буде мати колір green в браузерах з підтримкою призначених для користувача властивостей, незважаючи на те, що поточне значення для —foo не false.
:root {
–foo: true;
}
body {
background: red;
}
@supports(–foo: false) {
body {
background: green;
}
}
Зміна споживчих властивостей через скрипт
Одне з головних переваг нативної підтримки користувацьких властивостей полягає в здатності динамічної модифікації через скрипт. Для цього необхідно змінити власні властивості з допомогою setProperty() і getPropertyValue(). Наприклад, для зміни —primary на елементі .my-component необхідно зробити наступне:
var myComponent = document.getElementsByClassName(‘my-component’)[0];
myComponent.style.setProperty(‘–primary’, ‘green’);
Для отримання обчисленого значення властивості необхідно використовувати getPropertyValue() з getComputedStyle():
var myComponent = document.getElementsByClassName(‘my-component’)[0];
var cs = getComputedStyle(myComponent);
cs.getPropertyValue(‘–primary’);
Анімація користувацьких властивостей
Користувальницькі властивості можна анімувати, але їх не можна інтерполювати. Але що це означає? Давайте розберемо приклад:
Не забувайте, що ви можете зберігати будь валідний ідентифікатор користувача властивості – вважайте, що це властивість зберігається у вигляді рядка в движку. Браузер розуміє, як інтерполювати color: green color: blue, але він не розуміє, як інтерполювати «hello» в «world». Що буде робити браузер в попередньому прикладі? Браузер візьме тривалість і призначить відповідні значення для кадрів. У нашому прикладі це означає 50px на 500ms і 0 для решти 500ms. У специфікації це називається фліп на 50%.
Але я хочу їх інтерполювати!
Ми теж! CSS Houdini Task Force активно працює над цим Properties & Values API. Якщо все вийде, ви зможете створити свою властивість і повідомити движку його тип, щоб той міг коректно інтерполювати значення. Браузери починають експериментувати з цими API, перевіряють їх життєздатність і допомагають у розвитку специфікації. Слідкуйте за виходом API у світ.
Поліпшення за рамками користувацьких властивостей
У своїй роботі ми розглянули кілька демо від різних розробників. Деякі з них працюють, інші – ні. Після скорочення числа поламаних демо для пошуку багів ми звузили проблеми до інших прогалин в нашому движку – не обов’язково баги в реалізації користувацьких властивостей. Наприклад, найбільший знайдений пробіл – це підтримка calc() в колірних функціях (rgb(), hsl()). Ми вирішили цю проблему у нашому парсере, так як це чудовий приклад використання користувацьких властивостей.
«Приплив піднімає всі човни»
У міру роботи над усуненням прогалин у нашому движку ми також хотіли переконатися в тому, що веб-розробники можуть покладатися на спільні реалізації, щоб функція була корисна. Як тільки ми розпочали розробку, ми виявили, що ні в одному браузері не працює фліп на 50% для анімації користувацьких властивостей. Також ми помітили, що ні в одному браузері не працювали посилання на змінні через var() всередині кейфреймов. Ми працювали разом з CSSWG для вирішення цих проблем і реалізації в Microsoft Edge.
Зрозуміло, робота в Edge – це лише частина перевірки на сумісність функції. У міру роботи над нашою реалізацією ми знайшли баги в інших браузерах. Ми відкрили баги в Blink, WebKit і Gecko і сподіваємося на їх виправлення. Ми чекаємо виправлення в Chrome 56, ця версія підвищить сумісність користувацьких властивостей.
Висновок
Користувальницькі CSS-властивості не просто задовольняють спільні потреби розробників і роблять код більш керованим, вони також відкривають великий потенціал для більш творчої роботи в інтернеті. У веба світле майбутнє, і ми тільки почали. Ми раді представити вам користувальницькі CSS-властивості в Windows 10 Creators Update і з нетерпінням чекаємо ваших робіт! — Greg Whitworth, керівник програми, Microsoft Edge
