Веб-разработка Переводы

Три новые функции в CSS для изучения в 2017 году

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

1. Функция медиа-запросов

Ранее я писал о функциях медиа-запросов. Теперь они поддерживаются во всех основных браузерах (Opera Mini в том числе), кроме Internet Explorer.

Функция медиа-запросов, которые используют правило @supports, позволяют нам обернуть CSS в условный блок, который будет применяться только в том случае, если текущий пользователь имеет поддержку определенных CSS свойств. Простой пример: применение стиля Flexbox для браузеров, которые поддерживаютr display: flex

Кроме того, с помощью операторов, таких как and и not, мы можем создать еще более сложные запросы функций. Например, мы можем обнаружить, если браузер поддерживает только старый синтаксис Flexbox —

Поддержка

2. Грид-раскладка (Grid Layout)

CSS Grid Layout Module определяет систему для создания макетов на основе сетки. Он имеет сходство с Flexbible Box Layout Module, но больше предназначены для макетов страниц, а значит, имеет больше различий.

Точное размещение элементов

Сетка состоит из Grid Container (созданного с помощью display: grid) и Grid Items (дочерние элементы). В CSS мы можем легко и четко организовать размещение и порядок элементов сетки, независимо от их размещения в разметке.

Например, в моей статье The Holy Grail Layout with CSS Grid я показал, как мы можем использовать этот модуль для создания печально известного макета «Святой Грааль».

В основе CSS была использована всего 31 строка —

Гибкая длина

Модуль CSS Grid вводит новую единицу измерения длины — fr — которая представляет собой долю свободного пространства в grid-контейнере.

Это позволяет распределить высоту и ширину элементов сетки в зависимости от доступного пространства в grid-контейнере. Например, в макете «Святого Грааля» я хотел, чтобы раздел main занимал все оставшееся место после двух боковых панелей. Чтобы сделать это, я просто написал  —

Gutters

(прим. от tpverstak) Gutters — это пустое пространство между границами элемента и его содержанием.

Мы можем специфически определить gutters для нашей grid-сетки при помощи свойств: grid-row-gap, grid-column-gap и grid-gap. Эти свойства принимают тип данных тип данных <length-percentage> как значение в процентном выражении, соответствующее размеру области содержимого.

Например, имея 5% gutters, мы могли бы написать —

(прим. от tpverstak) Gutters — это пустое пространство между границами элемента и его содержанием.

Поддержка

Модуль CSS Grid будет доступен в браузерах уже в марте этого года.

3. Родные переменные

И, наконец, родные переменные CSS (Custom Properties for Cascading Variables Module). Этот модуль представляет собой метод создания определенных переменных, которые могут быть назначены в качестве значений для CSS свойств.

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

Вот, что мы смогли сделать с помощью CSS препроцессора SASS, но CSS переменные имеют преимущество для браузеров. Их значения могут быть обновлены сразу. Для того, чтобы изменить свойство --theme-colour, например с голубого на сиреневый, нужно сделать следующее —

Поддержка


А какие особенности CSS Вы хотели бы изучить в 2017 году?

Предыдущий пост

Фотошоп для верстальщика. Как работать с макетом и откуда брать данные?

Следующий пост

Глубокое погружение в CSS: показатели шрифтов, line-height и vertical-align

Комментарии

  • css-monster

    Ну наконец-то переменные добавили!

    Reply to css-monster

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *