CSS из будущего

CSS из будущего

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

При разработке веб-приложений в Electron данной проблемы не существует. Код, написанный в Electron, работает только с браузером Chromium. 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!

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree