Используем возможности CSS4 уже сегодня с cssnext19.09.2015 09:33

Вот уже на протяжении четырёх лет, с сентября 2011 г. W3C занимается разработкой CSS4. Модули четвёртой версии каскадных таблиц стилей проектируются на базе CSS3 и дополняют их новыми свойствами и значениями. В этой статье я хотел бы рассказать о том, как использовать возможности CSS4 уже сегодня, о cssnext.

Итак, cssnext — это CSS компилятор, позволяющий использовать последний синтаксис CSS уже сегодня. Он преобразует новые CSS спецификации в более современный код так, что вам не придётся ждать поддержки новых возможностей в вашем браузере.

Возможности

Автоматическая расстановка вендорных префиксов
Вендорные префиксы автоматически добавляются (или же, в том случае если они являются устаревшими, удаляются) с помощью PostCSS плагина Autoprefixer.Переменные в свойствах CSS
Благодаря возможностям cssnext в корневом селекторе :root мы можем задавать неограниченное число переменных и использовать их в наших CSS свойствах.

:root {
  --fontSize: 1rem;
  --mainColor: #ddd;
}

a {
  color: var(--mainColor);
  font-size: var(--fontSize);
}

Спецификация | Документация плагинаПростые математические выражения
Позволяет использовать свойство calc(). Данное свойство можно использовать не только с простыми значениями, но и с переменными.

:root {
  --fontSize: 1rem;
}

h2 {
  font-size: calc(var(--fontSize)*2);
}

Документация плагинаПеременные для медиа-запросов

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {
  /* Стили для маленьких экранов */
}

Спецификация | Документация плагинаУлучшенный синтаксис медиа-запросов
Позволяет использовать выражения >= и

@media (width >= 500px) and (width <= 1200px) {
  /* Ваши стили */
}

Спецификация | Документация плагинаПользовательские селекторы
Позволяет создавать свои собственные селекторы.

@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:--heading {
  margin-top: 0;
}

Спецификация | Документация плагинаФункции для модификации цвета
На данный момент уже доступно значительное количество модификаторов цвета. Подробнее можно ознакомиться здесь.

a {
  color: color(red alpha(-10%));
}

a:hover {
  color: color(red blackness(80%));
}

Спецификация | Документация плагинаПоддержка цветов hwb()
Позволяет использовать W3C CSS hwb() цвета, которые будут преобразованы в rgb() или rgba()

body {
  color: hwb(90, 0%, 0%, 0.5);
}

Спецификация | Документация плагинаБолее чем 50 оттенков серого
Возможность использовать свойство gray(). В качестве первого аргумента вы можете использовать значение от 0 до 255 или от 0 до 100 процентов.

.foo {
  color: gray(85);
}

.bar {
  color: gray(10%, 50%);
}

Спецификация | Документация плагинаЦвета #rrggbbaa
Даёт возможность использования чётырёх или восьмизначных значений для обозначения цвета.

.boo {
  color: #9d9c;
}

Спецификация | Документация плагинаЦвет rebeccapurple
Новый цвет.

.foo {
  background: rebeccapurple;
}

Спецификация | Документация плагинаСвойство font-variant
Данный плагин позволяет трансформировать свойство font-variant в CSS более совместимый с наиболее популярными на сегодняшний день браузерами.

h2 {
  font-variant-caps: small-caps;
}

table {
  font-variant-numeric: lining-nums;
}

Спецификация | Документация плагинаФильтры
Позволяет использовать 10 различных CSS фильтров:

• grayscale
• sepia
• saturate
• hue-rotate
• invert
• opacity
• brightness
• contrast
• blur
• drop-shadow

.blur {
    filter: blur(4px);
}

Спецификация | Документация плагинаЕдиницы rem
Единицы rem возвращаются в px.

h1 {
    font-size: 1.5rem;
}

Спецификация | Документация плагинаПсевдокласс :any-link
Позволяет использовать класс :any-link для ссылок.

/* Из: */

nav :any-link > span {
    background-color: yellow;
}

/* В: */

nav :link > span,
nav :visited > span {
    background-color: yellow;
}

Спецификация | Документация плагинаПсевдокласс :matches
Позволяет использовать класс :matches().

/* Из: */

p:matches(:first-child, .special) {
  color: red;
}

/* В: */

p:first-child, p.special {
  color: red;
}

Спецификация | Документация плагинаПсевдокласс :not
Что-то схожее с предыдущим псевдоклассом, но с обратным результатом.

p:not(:first-child, .special) {
  color: red;
}

Спецификация | Документация плагинаАльфа-цвета
Добавляет цветовые фолбэки для rgba цветов (для старых браузеров).

body {
  background: rgba(153, 221, 153, 0.8);
}

Спецификация | Документация плагина

Также cssnano, кроме всего вышеперечисленного, содержит в себе ряд бонусных возможностей, таких как импорт(@import) сторонних CSS файлов в ваш конечный CSS файл, идущий на продакшен и сжатие конечного выходного CSS с помощью CSSNano.

Использование

Вы можете использовать cssnext как плагин для вашей любимой системы сборки Grunt, Gulp, Broccoli, Webpack, Fly и т.д. или же в качестве плагина для PostCSS.

Мне больше по душе последний вариант. Собственно, его я и использую в своей стартовой сборке для разработки собственных проектов.

Надеюсь, вам было интересно познакомиться с возможностями cssnext.

На этом всё. Спасибо за внимание!

© Habrahabr.ru