Вот уже на протяжении четырёх лет, с сентября 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.
На этом всё. Спасибо за внимание!
ссылка на оригинал статьи http://habrahabr.ru/post/267181/
Добавить комментарий