Новые возможности CSS, которые стоит изучить в 2017 году

Развитие CSS не останавливается, всё время появляются новые возможности, которые упрощают работу веб-разработчика.
Сегодня я расскажу о 3 новых возможностях CSS, которые будут доступны в этом году.

1. @supports

Запрос @supports проверяет поддерживает ли браузер посетителя определенную возможность, точнее, пару «свойство: значение». Например, код ниже сработает, если браузер поддерживает Flexbox.

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

Эта возможность поддерживается всеми современными браузерами (включая Opera Mini), кроме Internet Explorer, развитие которого прекращено в пользу Microsoft Edge.

2. CSS Grid Layout

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

Макет состоит из контейнера (созданного с display: grid) и дочерних элементов. Используя предлагаемые свойства CSS, можно строить макеты любой сложности, причем независимо от того, в каком месте разметки стоят блоки страницы.

Смотрите, как легко можно сделать 3х-колоночный макет с колонками во всю высоту.

Вот код, который использован в примере:

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

Этот код создаст таблицу из трех колонок, центральная из которых будет в три раза шире левой и правой, а также из трех строк, где верхняя будет 100px по высоте, нижняя 12em, а средняя расширится по высоте автоматически, в зависимости от длины контента.

Расстояние между блоками сетки задаются с помощью свойств grid-row-gapgrid-column-gap и grid-gap. Так можно задать расстояние между колонками страницы в 5%.

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

3. Переменные

И, наконец, давно ожидаемая возможность — переменные. То, что давно и привычно есть в css-препроцессорах, становится стандартом. Теперь значения свойств можно присваивать переменным, и это еще одна возможность, которая сделает написание CSS проще и быстрей. Например, за пару секунд заменить цвет во всем макете.

C поддержкой в браузерах не все идеально, но довольно неплохо.

Итог

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

Желаю вам в Новом Году новых знаний и экспериментов!


Обзор составлен на основе статей:

3 New CSS Features to Learn in 2017
Будущее CSS разметки

  • Tod

    Про Grid Layout уже не раз читал, мощная штука.

    • Neolot

      В разработке есть еще CSS Template Layout Module, похожий на Grid функционал

      • SelenIT

        Нет его в разработке. Старые наработки влились в нынешние гриды (одно время он даже так и назывался — Grid Template), а отдельная спека полузаброшена и оставлена исключительно «для сбора идей на будущее».

  • Юрий, уважайте авторов — хотя бы пишите чьи статьи переводите, лучше в самом начале. Иначе это выглядит как авторский текст. А на самом деле вольный перевод статьи Ире Адеринокун — ведь наверняка не спросили у неё разрешения перевести?

    • Neolot

      Ссылки на материалы указаны в конце

      • «Сегодня я расскажу о 3 новых возможностях CSS» — но не вы, это Ире рассказывает, а вы копируете код, картинки и присваиваете авторство. Мне бы не хотелось найти в интернете мои авторские статьи «переписанные» таким образом.

        • Yuriy Pokhylko

          Как вы предлагаете в данном случае оформлять перевод?

        • Вадим, а можно взять ваш доклад про флексбоксы, вырезать информацию и выложить заново с сохранением ссылок на ваш ресурс?

          • Хорошо, что вы спросили. Нет, нельзя. Мне бы хотелось не только сохранить авторство, но и контролировать целостность высказывания.