Користувальницькі CSS-властивості в Microsoft Edge

17

Від автора: починаючи з 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