Заметки дизайнера » Возможности CSS4 уже сегодня с cssnext

Возможности CSS4 уже сегодня с cssnext

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

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

Возможности

Автоматическая расстановка вендорных префиксов

Вендорные префиксы автоматически добавляются (или же, в том случае если они являются устаревшими, удаляются) с помощью PostCSS плагина Autoprefixer.

Переменные в свойствах CSS

Благодаря возможностям cssnext в корневом селекторе :root мы можем задавать неограниченное число переменных и использовать их в наших CSS свойствах.

:root {<br />
  --fontSize: 1rem;<br />
  --mainColor: #ddd;<br />
}</p>
<p>a {<br />
  color: var(--mainColor);<br />
  font-size: var(--fontSize);<br />
}

Простые математические выражения

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

:root {<br />
  --fontSize: 1rem;<br />
}</p>
<p>h2 {<br />
  font-size: calc(var(--fontSize)*2);<br />
}

Переменные для медиа-запросов

@custom-media --small-viewport (max-width: 30em);</p>
<p>@media (--small-viewport) {<br />
  /* Стили для маленьких экранов */<br />
}

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

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

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

Пользовательские селекторы

Позволяет создавать свои собственные селекторы.

@custom-selector :--heading h1, h2, h3, h4, h5, h6;</p>
<p>:--heading {<br />
  margin-top: 0;<br />
}

Функции для модификации цвета

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

a {<br />
  color: color(red alpha(-10%));<br />
}</p>
<p>a:hover {<br />
  color: color(red blackness(80%));<br />
}

Поддержка цветов hwb()

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

body {<br />
  color: hwb(90, 0%, 0%, 0.5);<br />
}

Более чем 50 оттенков серого

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

.foo {<br />
  color: gray(85);<br />
}</p>
<p>.bar {<br />
  color: gray(10%, 50%);<br />
}

Цвета #rrggbbaa

Даёт возможность использования чётырёх или восьмизначных значений для обозначения цвета.

.boo {<br />
  color: #9d9c;<br />
}

Цвет rebeccapurple

Новый цвет.

.foo {<br />
  background: rebeccapurple;<br />
}

Свойство font-variant

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

h2 {<br />
  font-variant-caps: small-caps;<br />
}</p>
<p>table {<br />
  font-variant-numeric: lining-nums;<br />
}

Фильтры

Позволяет использовать 10 различных CSS фильтров:

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

.blur {<br />
    filter: blur(4px);<br />
}

Единицы rem

Единицы rem возвращаются в px.

h1 {<br />
    font-size: 1.5rem;<br />
}

Псевдокласс :any-link

Позволяет использовать класс :any-link для ссылок.

/* Из: */</p>
<p>nav :any-link > span {<br />
    background-color: yellow;<br />
}</p>
<p>/* В: */</p>
<p>nav :link > span,<br />
nav :visited > span {<br />
    background-color: yellow;<br />
}

Псевдокласс :matches

Позволяет использовать класс :matches().

/* Из: */</p>
<p>p:matches(:first-child, .special) {<br />
  color: red;<br />
}</p>
<p>/* В: */</p>
<p>p:first-child, p.special {<br />
  color: red;<br />
}

Псевдокласс :not

Что-то схожее с предыдущим псевдоклассом, но с обратным результатом.

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

Альфа-цвета

Добавляет цветовые фолбэки для rgba цветов (для старых браузеров).

body {<br />
  background: rgba(153, 221, 153, 0.8);<br />
}

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

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

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

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

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

А в компании Мегагрупс заказать сайт визитку

Добавить в: