CSS4: Что нового, о чем стоит знать

Автор: Steve Jenkins    Источник: www.gadgetdaily.xyz
28.09.2016
502
0
img

Нельзя говорить о CSS не упомянув вещи не относящиеся к нему. Использование препроцессоров, таких как PostCSS, Sass и Less означает, что не нужно писать CSS напрямую. Можно запросить стили из JavaScript и с помощью инструментов получить поддержку браузеров – дивный новый мир. CSS4 не существует как отдельная спецификация, описывающая, что такое «CSS4». Но есть модули, которые описывают отдельные функции.

Так же был организован и CCS3, чтобы помочь производителям браузеров внедрить новые функции CSS, а рабочей группе работать параллельно, как «Модули, развивающиеся с разной скоростью, в зависимости от сложности и приоритетов рабочей группы» (Берт Бос, w3.org/Style/2011/CSS-process). Модули проходят через 5 этапов, но браузеры могут внедрить их на любом из них. Именно для этого нужны вендорные префиксы, такие как  –webkit, и инструменты типа Autoprefixer. Таким образом, браузеры могут узнать мнение пользователей о новых свойствах еще до того, как спецификация будет полностью завершена. С помощью тестирования основных пунктов можно обнаружить, что нужно доработать.

Новые модули, которые сейчас разрабатываются, содержат несколько определенных свойств и уточнений. Основные пункты: переменные, новые селекторы, сетка и Snap Points. Некоторые из них уже имеют приличный уровень поддержки на популярных браузерах. Переменные поддерживаются браузерами на 26.01%, сетка на 8.77%, Snap Points на 23.83%. Эта статистика из сайта caniuse.com актуальна на момент написания.

Переменные

От части препроцессоры стали так популярны из-за переменных, которые наконец-то пробиваются в CSS. Они описываются так:

–primary-color: #6C71C4;

а используются так:

background-color: var(–primary-color)

Цель переменных – упростить чтение больших файлов и помочь нам писать CSS без ошибок, их можно один раз описать и использовать по всему файлу. Возможно, синтаксис этих переменных, немного сложнее для переваривания по сравнению с описанием переменных в препроцессорах, но он наиболее соответствует текущей грамматике CSS. Во многом, эти переменные даже лучше статических переменных препроцессоров, так как родные будут динамическими. Это значит, что у вас всегда будет к ним доступ, а значения можно будет задавать из медиа-запросов.

Сетка

Цель модуля CSS Grid Layout – упростить создание макета. Не нужно его путать с CSS Grids – популярным способом разделения блоков по колонкам определенной длины. На данный момент поддержка этого модуля реализована в новых версиях Chrome и Firefox, а IE11 и Edge поддерживают старую версию спецификации. К сожалению, Safari – один из основных браузеров, не поддерживает этот модуль, что не дает разработчикам использовать его еще 6 месяцев. В отличии от flexbox, который может довольно легко сделать откат к использованию block или inline-block элементов. Это хорошо обьясняет Таб Аткинс, flexbox похож на одномерную систему разметки. Это хорошо, когда работаешь по прямой линии, но в других случаях это выглядит как хак использования float; Таб имеет ввиду, что новый модуль похож на двухмерную разметку. Именно из-за этой причины сложнее написать для него откат без простого штабелирования блоков. Рейчел Эндрю – ключевая фигура в исследовании возможностей модуля, она отстаивала его использование. Рейчел создала много полезных ресурсов, включая «Введение в CSS Grid Layout», опубликованное на сайте A Book Apart для более глубокого изучения.

Snap Points

Надеемся, что следующее CSS свойство избавит нас от сайтов, захваченных скроллом, который вызывает неприятный и сомнительный опыт на разных устройствах. CSS Scroll Snap Points позволит, с помощью установленного Вами допуска и мягкого перехода, указать, где должен оказаться пользователь после скролла. На данный момент Snap Points поддерживается в Firefox и Safari. IE10 и Edge поддерживают старую версию спецификации; в IE10 работает только на сенсорных экранах. Модуль Snap Points работает и горизонтально и вертикально, что делает его идеальным решением и для скроллинга и для каруселей\галерей. А самое лучшее то, что для этого нужно всего несколько новых свойств.

Селекторы

Много новых секторов помогут стилизовать элементы, которые раньше нужно было связывать с классами или JavaScript. Временные селекторы :past, :current и :future связаны с шкалой времени, например, субтитрами или текстом, который читает экранный диктор. Новый тип запроса, который называется @supports, заменит необходимые в некоторых случаях библиотеки, такие как Modernizr, поскольку CSS сможет сам проверять, поддерживает ли браузер предложенное свойство (например, Grid Layout) и применять стили, только если поддерживает. Его использование похоже на media query:

@supports (grid-template-columns)

Его можно комбинировать с операторами ‘and’, ‘or’, и ‘not’, чтобы сформировать более сложный запрос.

ПОХОЖИЕ СТАТЬИ: