От автора: на сайте SitePoint в статье 7 PostCSS плагинов, которые помогут вам легче понять PostCSS, появилось обсуждение по поводу PostCSS-cssnext. PostCSS-cssnext – плагин-пакет для написания CSS кода следующего поколения. Эта статья дает представление об истории проекта и его преимуществах. Сначала мы поближе познакомимся с PostCSS-cssnext, после чего перейдем на несколько примеров, с которыми вы потом сможете поиграться. После прочтения статьи вы будете хорошо знакомы с синтаксисом CSS будущего на основе PostCSS-cssnext, а также сможете использовать его в своих будущих проектах!
Необходимость CSS следующего поколения
Независимо от языка программирования, разработчики всегда стремятся использовать самые новые функции. Инструменты типа Babel дают разработчикам на JS поддержку будущих функций ECMAScript, а PostCSS-cssnext дает веб-дизайнерам возможность использовать еще не вышедшие функции CSS. На данный момент речь идет о поддержке свойств CSS4, таких как CSS переменные, вложенность и многое другое! Перед тем как мы продолжим, хотел бы отметить тот факт, что в будущие свойства CSS могут быть внесены изменения, и спецификация CSS4 тоже ничем в этом плане не отличается. Тем не менее, PostCSS-cssnext смягчает то негативное влияние, которое может оказать на проект новый синтаксис, информируя пользователя заранее о любых изменениях, которые должны произойти.
От cssnext к PostCSS-cssnext
Изначально cssnext делался для выполнения задач минификации кода и отображения сообщений об ошибках. Это было полезно, однако инструмент не поддерживал свойства CSS будущего, что является конечной задачей проекта PostCSS-cssnext. Как следствие, команда забросила идею cssnext, как отдельного инструмента, так как время, затраченное на его поддержку, можно было потратить на поддержку нового синтаксиса CSS и все последующие его изменения. Для выполнения других задач, связанных с CSS, разработчики могут интегрировать PostCSS-cssnext с другими технологиями типа cssnano для минификации кода и postcss-browser-reporter для сообщения об ошибках.
Анатомия PostCSS-cssnext
Если зайти в репозиторий PostCSS-cssnext на GitHub, сразу становится понятно, насколько этот плагин модульный. В файле src/features.js можно заметить, что код каждого свойства CSS будущего заключен в свой модуль, названный в соответствии с CSS спецификацией.
|
1 2 3 4 5 6 7 8 |
// //npmjs.com/package/postcss-custom-properties customProperties: (options) => require("postcss-custom-properties")(options), // //npmjs.com/package/postcss-apply applyRule: (options) => require("postcss-apply")(options), // //npmjs.com/package/postcss-calc calc: (options) => require("postcss-calc")(options), |
Так как это плагин-пакет, PostCSS-cssnext идет в комплекте с плагинами PostCSS. То есть мы могли бы установить эти функции отдельно, хотя PostCSS-cssnext позволяет нам этого не делать! К примеру, если мы хотим использовать только пользовательские свойства CSS, их можно установить через npm следующим образом:
|
1 |
npm install postcss-custom-properties --save-dev |
Полный список поддерживаемых возможностей PostCSS-cssnext можно посмотреть на отдельной странице сайта. Также стоит сказать, что PostCSS-cssnext идет вместе с autoprefixer и pixrem. Если вы не знаете, что это, не пугайтесь. Это постпроцессоры для создания кроссбраузерного CSS кода, которые мы очень скоро разберем.
Разбор PostCSS-cssnext примеров
Мы близко познакомились с PostCSS, пора разобрать пару примеров!
Использование пользовательских свойств с помощью var()
Пользовательские свойства – одна из популярнейших возможностей CSS. Важно отметить, что все пользовательские свойства задаются в селекторе :root.
|
1 2 3 |
:root { --fontSize: 2em; } |
После объявления их можно вызывать в CSS с помощью функции var(). Помимо селектора root внимание нужно обратить на тире — в имени пользовательского свойства. Синтаксис совпадает с w3c спецификацией.
Использование пользовательских свойств с помощью @apply
Правило @apply позволяет улучшить пользовательские свойства с var() и задавать набор данных. Очень полезно в случаях, когда вы хотите повторно использовать набор стилей, но не хотите писать их снова и снова! В примере ниже можно увидеть, насколько такой подход лучше при создании макета.
|
1 2 3 4 5 6 7 8 9 10 11 |
:root { --flex-row: { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; } } .flex-row { @apply --flex-row; } |
Правила внутри селектора :root задают флекс-контейнер. Для изменения макета нам нужно поменять одно значение в —flex-row, и изменения затронут все элементы, на которые применен —flex-row с @apply.
Заметка по коду
Хотя я прямо еще не говорил о вложенности, мы уже могли наблюдать ее в примере выше. Свойство —flex-row вложено в селектор :root. Кто еще не знаком с концепцией вложенности, можете подробно изучить ее в документации CSS Nesting Module Level 3. Из названия понятно, что вложенность позволяет нам вкладывать одни CSS правила в другие. Очень практичная функция, советую ознакомиться.
Что еще мы пока что не поняли, так это то, что наш код полностью кроссбраузерный! Мы уже знаем, что cssnext идет вместе с autoprefixer, который автоматически добавляет все вендорные префиксы в компилированный CSS код.
Вычисление выражений
Мы уже знаем про функцию var(). Теперь давайте узнаем, как использовать пользовательские свойства вместе с var и calc. В примере ниже мы будем вычислять размер шрифта заголовков при помощи функции calc().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
:root { --fontSize: 1rem; } h1 { font-size: calc(var(--fontSize) * 3); } h2 { font-size: calc(var(--fontSize) * 2.75); } h3 { font-size: calc(var(--fontSize) * 2.25); } h4 { font-size: calc(var(--fontSize) * 2); } |
Переменная —fontSize передается в calc() и умножается. Помимо умножения функция calc() умеет делить, вычитать и складывать.
Скрытая мощь Pixrem
Чуть выше мы узнали, как работает autoprefixer. Помимо добавления вендорных префиксов плагин PostCSS-cssnext при помощи pixrem также генерирует фолбэк значения rem единиц в пикселях. Данные значения используются в браузерах, которые не поддерживают rem единицы. Если открыть код демо выше, мы увидим, что заголовки заданы в px и rem для полной кроссбраузерности.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
h1 { font-size: 48px; font-size: 3rem; } h2 { font-size: 44px; font-size: 2.75rem; } h3 { font-size: 36px; font-size: 2.25rem; } h4 { font-size: 32px; font-size: 2rem; } |
Пользовательские медиа запросы
Доля мобильных устройств огромна, что означает, что адаптивный дизайн стал важен, как никогда. Если вы еще не знаете, есть целый ряд изменений, которые упростят процесс создания медиа запросов.
|
1 2 3 4 5 6 7 8 |
@custom-media --small-viewport (max-width: 600px); @media (--small-viewport) { /* стили для маленьких экранов */ .danger { flex-direction: column; background-color: rebeccapurple; } } |
В первом медиа запросе используется синтаксис @custom-media для создания пользовательского медиа запроса. После объявления пользовательского медиа запроса его имя можно передать в обычный медиа запрос в правило @media() для установки размера экрана. В демо ниже видно, как при уменьшении экрана (от 600px и ниже) элементы перестраиваются из строки в колонку, меняется фон с оранжевого на Rebecca purple.
Диапазоны медиа запросов
При написании медиа запросов PostCSS-cssnext позволяет сокращать код при помощи диапазонов. То есть мы можем заменить значения max, min и equal на операторы >,< и =. Хоть и незначительно, но эти символы позволяют ускорить разработку и упрощают чтение кода.
|
1 2 3 4 5 6 7 8 9 10 |
@custom-media --medium-viewport (width >= 600px) and (width <= 1280px); @media (--medium-viewport) { .danger { display: flex; justify-content: space-around; padding: 1rem; background: teal; } } |
Выше написан код для медиа запроса —medium-viewport. Если сделать экран уже 600px, сработает медиа запрос для маленьких экранов из предыдущего примера, то есть flex-direction получит значение column, а фон станет цвета Rebecca purple. На экранах от 600px включительно и до 1280px включительно свойство flex-direction изменит значение на row, а фон станет зеленовато-голубым. Если экран больше 1280px, фон вернется к оранжевому цвету.
Заключение
Сегодня мы много чего узнали о PostCSS-cssnext. А вы что думаете, полезен ли вам PostCSS-cssnext? Надеюсь, вы поняли из этой статьи, как данный инструмент может привнести возможности будущего в CSS уже сегодня. Кто хочет поиграться с PostCSS-cssnext, я создал целый стартовый набор с помощью Gulp.
Автор: Thomas Greco
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
