От автора: с последними изменениями в спецификации CSS появилось довольно много новых возможностей. Но к сожалению, некоторые из них находятся в форме черновика, а другие не поддерживаются браузерами. И как обычно, прежде чем новые предложения будут рассмотрены, приняты и реализованы, пройдет какое-то время. Однако мы можем не ждать так долго и попробовать некоторые из этих свойств в PostCSS.
В PostCSS есть множество плагинов, предназначенных для создания полифилов для самых новых свойств CSS. Плагинов очень много, и рассказать про все в одной статье будет сложно. Поэтому мы сосредоточим внимание на плагинах по добавлению новых возможностей селекторам и медиа запросам. Многие из этих плагинов существенно улучшат структуру стилей, а другие просто добавят новые функции. В статье мы не будем показывать, как настраивать и устанавливать PostCSS. На PostCSS и GitHub можно быстро ознакомиться с тематикой.
Вложение правил
Начнем с самых основ, того, что знакомо всем работающим с препроцессорами – вложение. Плагин postcss-nesting реализует вложение по спецификации W3C nesting module proposal.
В спецификации описан новый селектор вложенности &, указывающий на родительский селектор. По спецификации данный селектор, в отличие от Less или Sass, обязательный и должен располагаться первым в цепи вложенности селекторов. Селекторы без селектора вложенности будут игнорироваться. К примеру:
1 2 3 4 5 6 7 8 9 10 11 |
.article { color: #333; &.popular { background: #DDD; } & .title { font-weight: bold; } } |
Будет переведено в:
1 2 3 4 5 6 7 8 9 |
.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold } |
Обратите внимание: код ниже неправильный, в нем не используется селектор &.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.article { color: #333; /* невложенный селектор */ .popular { background: #DDD; } /* селектор вложенности расположен не первым в цепочке селекторов */ .latest & { border: 1px solid red; } } |
Чтобы располагать родительский селектор в любом месте (а не только в начале), в спецификации прописан альтернативный синтаксис – правило @nest. Мы можем исправить селектор .latest & из предыдущего примера:
1 2 3 4 5 6 7 |
.article { color: #333; @nest .latest & { border: 1px solid red; } } |
Что будет переведено в:
1 2 3 4 5 6 |
.article { color: #333 } .latest .article { border: 1px solid red } |
Синтаксис @nest чуть-чуть выразительнее селектора &.
Пользовательские селекторы
При написании стилей мы, обычно, повторяем множество селекторов. Это может быть простой шаблонный код для выбора всех ссылок или кнопок, или же какой-то более сложный селектор, который нужно постоянно повторять. Такой подход может привести к обширному дублированию кода и всем вытекающим проблемам при работе с ним. В новой спецификации CSS расширений представлен способ хранения селекторов в переменных, на которые можно ссылаться из других частей стилей. Т.е. повторяющийся селектор можно объявить один раз и нормально использовать его в любом месте.
В PostCSS есть плагин postcss-custom-selectors, в котором реализована данная функция. Простой пример объявления селектора для всех заголовков:
1 2 3 4 5 |
@custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading { font-weight: bold; } |
Код будет переведен в:
1 2 3 4 5 6 7 8 |
h1, h2, h3, h4, h5, h6 { font-weight: bold; } |
Странный синтаксис пользовательских селекторов :— объясняется тем, что они реализованы через псевдоклассы. Пользовательские селекторы можно использовать в паре с обычными селекторами. К примеру:
1 2 3 |
.article :--heading .author { color: blue; } |
Компилируется в:
1 2 3 4 5 6 7 8 |
.article h1 .author, .article h2 .author, .article h3 .author, .article h4 .author, .article h5 .author, .article h6 .author { color: blue; } |
Можно объединить несколько пользовательских селекторов в один для более сложных записей.
1 2 3 4 |
@custom-selector :--links a, a:focus, a:visited, a:hover, a:active; article :--heading :--links { color: #333; } |
Результат:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
article h1 a, article h2 a, article h3 a, article h4 a, article h5 a, article h6 a, article h1 a:focus, article h2 a:focus, article h3 a:focus, article h4 a:focus, article h5 a:focus, article h6 a:focus, article h1 a:visited, article h2 a:visited, article h3 a:visited, article h4 a:visited, article h5 a:visited, article h6 a:visited, article h1 a:hover, article h2 a:hover, article h3 a:hover, article h4 a:hover, article h5 a:hover, article h6 a:hover, article h1 a:active, article h2 a:active, article h3 a:active, article h4 a:active, article h5 a:active, article h6 a:active { color: #333; } |
Пример слегка раздут, зато он дает четкое представление того, на что способна данная функция.
Новые псевдоклассы
В спецификации Selectors Level 4 была представлена целая куча новых псевдоклассов, но из-за динамичности только некоторые из них были реализованы в виде PostCSS плагинов.
Псевдокласс :matches()
В плагине postcss-selector-matches реализована работа нового псевдокласса :matches(). Это функциональный класс, который фильтрует элементы по указанному аргументу. Если в аргумент передать несколько селекторов, то элемент совпадет хотя бы с одним из них. Если коротко:
1 2 3 |
button:matches(:hover, :focus) { color: red; } |
Будет переведено в:
1 2 3 |
button:hover, button:focus { color: red; } |
Псевдокласс :not()
Псевдокласс :not() фильтрует элементы, не совпадающие с заданным аргументом. Его работа реализована в плагине postcss-selector-not.
1 2 3 |
section:not(:first-child, :last-child) { background: white; } |
Результат:
1 2 3 |
section:not(:first-child):not(:last-child) { background: white; } |
Псевдокласс :any-link
В плагине postcss-pseudo-class-any-link реализована работа псевдокласса :any-link. Данный псевдокласс был создан для решения проблем с псевдоклассом :link. В отличие от последнего, псевдокласс :any-link используется для выбора всех ссылок – в том числе посещенных.
1 2 3 |
a:any-link { color: blueviolet; } |
Переводится в:
1 2 3 |
a:link,a:visited { color: blueviolet; } |
Улучшения медиа запросов
В арсенале PostCSS есть парочка плагинов, облегчающих работу с медиа запросами — postcss-custom-media и postcss-media-minmax.
Пользовательские медиа запросы
У медиа запросов те же проблемы, что и у обычных селекторов – они часто повторяются. Может быть, даже чаще обычных селекторов. К счастью для нас, есть решение, похожее на пользовательские селекторы. В плагине postcss-custom-media реализована спецификация custom media query, в которой описан способ сохранения медиа запросов в переменные. Синтаксис сильно напоминает синтаксис пользовательских селекторов. Пример:
1 2 3 4 5 |
@custom-media --medium-viewport (min-width: 768px) and (max-width: 992px); @media (--medium-viewport) { /* стили */ } |
Компилируется в:
1 2 3 |
@media (min-width: 768px) and (max-width: 992px) { /* стили */ } |
Можно также использовать несколько пользовательских медиа запросов за раз:
1 2 3 4 |
@custom-media --landscape (orientation: landscape); @media (--medium-viewport) and (--landscape) { /* стили */ } |
Результат:
1 2 3 |
@media (min-width: 768px) and (max-width: 992px) and (orientation: landscape) { /* стили */ } |
Теперь намного проще изменить размер для «среднего размера экрана», а также искать другой CSS код.
Синтаксис min и max
Медиа запросы это отлично, но вот синтаксис min- и max- получил массу нареканий со стороны сообщества. W3C выпустили более интуитивный синтаксис на основе операторов сравнения. Плагин postcss-media-minmax добавляет поддержку операторов >, >=, < и <=. Плагин также позволяет использовать синтаксис «значение посередине», т.е. min-value < property < max-value. С помощью нового синтаксиса можно упростить примеры выше и получить тот же результат.
1 2 3 4 5 |
@custom-media --medium-viewport (768px <= width <= 992px); @media (--medium-viewport) { /* стили */ } |
Плагин будет работать и без пользовательских медиа запросов.
Не останавливайтесь на достигнутом
К сожалению, из-за динамичности новых свойств и их зависимости с DOM большую часть свойств нельзя реализовать в виде плагинов PostCSS. Придется подождать, пока появится родная поддержка у большинства свойств. Но все же в сети есть достаточно много плагинов, на которых можно изучать и тестировать работу новых свойств. В этой статье был сделан упор на плагины для селекторов и медиа запросов, но мы хотим вам показать и другой новый функционал. Особо нетерпеливые могут посмотреть другие плагины на postcss.parts. Изучайте новые возможности!
Автор: Pavels Jelisejevs
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.