Від автора: в житті веб-розробника найскладніше – це прийняти той факт, що безліч людей заходять на ваш сайт через старі браузери. В браузери постійно додаються нові можливості, але ви не можете скористатися ними, якщо не хочете відкинути більшу частину користувачів зі старими браузерами.
При розробці веб-додатків в 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!
