CSS з майбутнього

25

Від автора: в житті веб-розробника найскладніше – це прийняти той факт, що безліч людей заходять на ваш сайт через старі браузери. В браузери постійно додаються нові можливості, але ви не можете скористатися ними, якщо не хочете відкинути більшу частину користувачів зі старими браузерами.

При розробці веб-додатків в Electron даної проблеми не існує. Код, написаний в Electron, працює тільки з браузером google chrome. Chromium – ядро браузера Google Chrome, активно підтримуване Google. Крім цього, це проект з відкритим вихідним кодом, а отже, величезне співтовариство розробників вносить в нього виправлення кожен день.

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

Минулого тижня вийшла нова версія Electron з підтримкою призначених для користувача властивостей CSS. Якщо ви працювали з препроцессорами типу Sass і Less, ви повинні знати про змінних, за допомогою яких можна задавати значення, які потім можна використовувати у коді в будь-якому місці. Наприклад, у кольоровій схемі або макетах. Змінні надають стилям послідовний вид і спрощують роботу з ними.

Так як користувацькі властивості це всього лише звичайні CSS властивості, ними можна маніпулювати через JavaScript. За допомогою цієї витонченої, але потужної функції можна динамічно змінювати інтерфейси і одночасно по максимуму використовувати апаратне прискорення CSS. Крім того, значно зменшується дублювання між front-end кодом і стилями. Приклад властивостей:

:root {
—primary-color: papayawhip;
—base-line-height: 1.4;
}
.thing {
color: var(—primary-color);
margin: 0 0 calc(var(—base-line-height) * 1rem);
}

Погляньте на Google Demo (потрібен Chrome 49+)

CSS міксини та розширення

Отже, у нас є змінні в CSS. Непогано, але це не вершина можливостей. Нам потрібно вміти писати невеликі шматочки CSS коду, який потім можна використовувати повторно. Така можливість вже давно є в Sass, Less та Stylus, а от у звичайному CSS такої функції немає.

Знайомство з правилом @apply

Хтось з Google працює над новою специфікацією: «В специфікації описується правило @apply, з допомогою якого змінної можна зберігати кілька властивостей і посилатися на них в інших правилах стилів.»

Приклад використання @apply:

body {
—alert: {
color: white;
padding: 15px;
margin: 1rem 0;
border-radius: 6px;
}
}
.alert-success {
@apply —alert;
background-color: olivedrab;
}
.alert-warning {
@apply —alert;
background-color: firebrick;
}

На момент написання статті (8 квітня 2016) функція є новою і не підтримується ні в Google Chrome ні навіть в Chrome Canary, однак її можна активувати через прапор в останній нічний збірці Chromium. Щоб ознайомитися з @apply, скачайте останню версію Chromium і перейдіть до прапора. Як це зробити на OS X:

/Applications/Chromium.app/Contents/MacOS/Chromium \
—enable-blink-features=CSSApplyAtRules

Побачити скомпоновані стилі у всій красі можна в моєму codepen демо.

Пишемо CSS майбутнього вже зараз

Після того, як @apply з’явиться в Chromium і Electron, ми зможемо писати чисті та легкі стилі на звичайному CSS. Однак поки ці дні не настали, нам доведеться працювати з препроцессарами.

Існує як мінімум 2 проекту, що дозволяють писати CSS код майбутнього: Myth і cssnext. З двох проектів cssnext найбільш активно підтримується. Крім цього, на GitHub є відкрите обговорення підтримки правила @apply. Вперед, у майбутнє CSS!