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

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

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

@supports ( display: flex ) {
  .foo { display: flex; }
}

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

@supports ( display: flexbox ) 
          and 
          ( not ( display: flex ) ) {
  .foo { display: 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 строка —

.hg__header { grid-area: header; }
.hg__footer { grid-area: footer; }
.hg__main { grid-area: main; }
.hg__left { grid-area: navigation; }
.hg__right { grid-area: ads; }

.hg {
    display: grid;
    grid-template-areas: "header header header"
                         "navigation main ads"
                         "footer footer footer";
    grid-template-columns: 150px 1fr 150px;
    grid-template-rows: 100px 
                        1fr
                        30px;
    min-height: 100vh;
}

@media screen and (max-width: 600px) {
    .hg {
        grid-template-areas: "header"
                             "navigation"
                             "main"
                             "ads"
                             "footer";
        grid-template-columns: 100%;
        grid-template-rows: 100px 
                            50px 
                            1fr
                            50px 
                            30px;
    }
}

Гибкая длина

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

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

.hg {
    grid-template-columns: 150px 1fr 150px;
}

Gutters

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

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

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

.hg {
    display: grid;
    grid-column-gap: 5%;
}

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

Поддержка

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

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

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

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

:root {
  --theme-colour: cornflowerblue;
}

h1 { color: var(--theme-colour); }  
a { color: var(--theme-colour); }  
strong { color: var(--theme-colour); }  

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

const rootEl = document.documentElement;  
rootEl.style.setProperty('--theme-colour', 'plum');  

Поддержка