CSS из будущего

CSS из будущего

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

При разработке веб-приложений в Electron данной проблемы не существует. Код, написанный в Electron, работает только с браузером Chromium. Chromium – ядро браузера Google Chrome, активно поддерживаемое Google. Помимо этого, это проект с открытым исходным кодом, а значит, огромное сообщество разработчиков вносит в него исправления каждый день.

Пользовательские свойства CSS

На прошлой неделе вышла новая версия Electron с поддержкой пользовательских свойств CSS. Если вы работали с препроцессорами типа Sass и Less, вы должны знать о переменных, с помощью которых можно задавать значения, которые потом можно использовать в коде в любом месте. Например, в цветовой схеме или макетах. Переменные придают стилям последовательный вид и упрощают работу с ними.

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

Взгляните на Google Demo (нужен Chrome 49+)

CSS миксины и расширение

Итак, у нас есть переменные в CSS. Неплохо, но это не вершина возможностей. Нам нужно уметь писать небольшие кусочки CSS кода, который потом можно повторно использовать. Такая возможность уже давно есть в Sass, Less и Stylus, а вот в обычном CSS такой функции нет.

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

Кто-то из Google работает над новой спецификацией: «В спецификации описывается правило @apply, с помощью которого в переменной можно хранить несколько свойств и ссылаться на них в других правилах стилей.»

Пример использования @apply:

На момент написания статьи (8 апреля 2016) функция является новой и не поддерживается ни в Google Chrome ни даже в Chrome Canary, однако ее можно активировать через флаг в последней ночной сборке Chromium. Чтобы ознакомиться с @apply, скачайте последнюю версию Chromium и перейдите к флагу. Как это сделать на OS X:

Увидеть скомпонованные стили во всей красе можно в моем codepen демо.

Пишем CSS будущего уже сейчас

После того, как @apply появится в Chromium и Electron, мы сможем писать чистые и легкие стили на обычном CSS. Однако пока эти дни не настали, нам придется работать с препроцессарами.

Существует как минимум 2 проекта, позволяющих писать CSS код будущего: Myth и cssnext. Из двух проектов cssnext наиболее активно поддерживается. Помимо этого, на GitHub есть открытое обсуждение поддержки правила @apply. Вперед, в будущее CSS!

Источник: //zeke.sikelianos.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: