Новые возможности CSS3 и чего ждать в CSS4

14.06.18 CSS 196

Технология CSS с появлением новой версии CSS3 предоставила разработчикам поистине уникальные возможности для оформления страниц. Главная особенность CSS3 — это возможность создания анимированных элементов на странице без помощи скриптов, а также внедрение поддержки всевозможных градиентов, радиальных и линейных. Добавилась поддержка сглаживания и теней. Эта версия является глобальным обновлением и пришла на смену старым версиям: 1, 2, 2.1.

Например, в CSS3 была введена возможность определения поддержки того или иного свойства с помощью запроса @supports. Теперь можно писать различные правила, которые будут применяться только в случае поддержки требуемых свойств. Эта возможность поддерживается практически всеми современными браузерами, за исключением лишь некоторых.

Наконец в CSS появилась возможность использовать переменные, что раньше было возможным только с использованием сторонних библиотек, которые называются препроцессорами CSS. Теперь достаточно определить переменную и использовать ее везде в коде, это позволит быстро изменить значение нужного свойства за несколько секунд, а раньше приходилось вручную изменять его у всех. С поддержкой все довольно неплохо, но нужно смотреть таблицы совместимости.

Еще, что стоит выделить, так это возможность создания сетки на чистом CSS. Добавилось значение для популярного свойства: display: grid. Были введены новые единицы измерения, как раз для таких случаев: fr. Теперь можно делать макеты любой сложности. С поддержкой в браузерах все довольно неплохо на данный момент, но старые версии не поддерживают эти новшества, поэтому нужно быть внимательным при использовании.

Что касается CSS4, то здесь пока все довольно непонятно. Эта версия существует в черновом варианте, конкретный список возможностей будет определен в финальном варианте. Так, планируется добавить следующие новшества: новые псевдоклассы самых разных видов, логические комбинации из селекторов, различные селекторы тегов и атрибутов, селекторы таблиц и отношений.

Например, среди псевдоклассов можно выделить некоторые, это языковые псевдоклассы, псевдоклассы расположения, псевдоклассы пользовательских действий, псевдоклассы, относящиеся ко времени, псевдоклассы для элементов ввода, мутирующие псевдоклассы, псевдоклассы древовидной структуры.

Использовать новые возможности CSS3 сейчас очень важно для правильной и красивой верстки страниц, а с выходом CSS4, постепенно будут использоваться и возможности этой новой версии. Но как всегда, даже после выхода новой версии, должно пройти некоторое время, пока она станет поддерживаться большинством современных браузеров.