От автора: в жизни веб-разработчика самое сложное – это принять тот факт, что множество людей заходят на ваш сайт через старые браузеры. В браузеры постоянно добавляются все новые возможности, но вы не можете воспользоваться ими, если не хотите отбросить большую часть пользователей со старыми браузерами.
При разработке веб-приложений в Electron данной проблемы не существует. Код, написанный в Electron, работает только с браузером Chromium. Chromium – ядро браузера Google Chrome, активно поддерживаемое Google. Помимо этого, это проект с открытым исходным кодом, а значит, огромное сообщество разработчиков вносит в него исправления каждый день.
Пользовательские свойства CSS
На прошлой неделе вышла новая версия Electron с поддержкой пользовательских свойств CSS. Если вы работали с препроцессорами типа Sass и Less, вы должны знать о переменных, с помощью которых можно задавать значения, которые потом можно использовать в коде в любом месте. Например, в цветовой схеме или макетах. Переменные придают стилям последовательный вид и упрощают работу с ними.
Так как пользовательские свойства это всего лишь обычные CSS свойства, то ими можно манипулировать через JavaScript. С помощью этой утонченной, но мощной функции можно динамически изменять интерфейсы и одновременно по максимуму использовать аппаратное ускорение CSS. Кроме того, значительно уменьшается дублирование между front-end кодом и стилями. Пример пользовательских свойств:
|
1 2 3 4 5 6 7 8 9 |
: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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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:
|
1 2 |
/Applications/Chromium.app/Contents/MacOS/Chromium \ --enable-blink-features=CSSApplyAtRules |
Увидеть скомпонованные стили во всей красе можно в моем codepen демо.
Пишем CSS будущего уже сейчас
После того, как @apply появится в Chromium и Electron, мы сможем писать чистые и легкие стили на обычном CSS. Однако пока эти дни не настали, нам придется работать с препроцессарами.
Существует как минимум 2 проекта, позволяющих писать CSS код будущего: Myth и cssnext. Из двух проектов cssnext наиболее активно поддерживается. Помимо этого, на GitHub есть открытое обсуждение поддержки правила @apply. Вперед, в будущее CSS!
Источник: //zeke.sikelianos.com/
Редакция: Команда webformyself.
