Pull to refresh

Используем возможности CSS4 уже сегодня с cssnext

Reading time 3 min
Views 37K
cssnextВот уже на протяжении четырёх лет, с сентября 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) {
  /* Стили для маленьких экранов */
}

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

Улучшенный синтаксис медиа-запросов

Позволяет использовать выражения >= и <= вместо min-width и max-width в медиа-запросах.

@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.

На этом всё. Спасибо за внимание!
Tags:
Hubs:
+16
Comments 48
Comments Comments 48

Articles