Три новых CSS свойства для изучения в 2017.

Три новых CSS свойства для изучения в 2017.

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

1. Запросы свойств в CSS

Ранее отмечалось, что запросы свойств (Feature Queries) являются одним из наиболее желательных свойств (features) CSS.

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

Запросы свойств, используя правило &supports, позволяют сформировать в CSS традиционный блок, который будет применяться только тогда, когда текущий агент пользователя будет поддерживать конкретную пару свойство-значение. Простейший пример этого – использование исключительно стилей Flexbox для браузеров с использованием display: flex:

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

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

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

Поддержка в браузерах

Запросы свойств CSS позволяют пользователям определять правило на основании информации о том, поддерживаются ли конкретные объявления свойств в CSS при использовании в качестве правила &supports.

2. Положение сетки

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

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

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

Например, в статье «Создание макета Заветное желание» (Holy Grail)  с помощью сетки CSS» показан способ использования данного модуля для создания макета «Заветное желание».

Три новых CSS свойства для изучения в 2017.

Для реализации этого потребовалась всего 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; } }
Адаптивная длина (Flexible Lengths)

Модуль сетки CSS (CSS Grid Module) содержит следующие элементы: новое значение длины, элемент fr, содержащий информацию о части свободного пространства, оставшейся в контейнере сетки.

Это дает возможность распределить элементы сетки по ширине и высоте в зависимости от наличия доступного пространства в контейнере. Например, в макете «Заветное желание» для того, чтобы обеспечить занятие основным разделом всего пространства, оставшегося после двух боковых колонок, используется код:

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

Межстолбцовые промежутки (Gutters)

Для определения межстолбцовых промежутков в макете используются свойства (properties) grid-gap grid-column-gap и grid-row-gap. Значения для этих свойств представляются с помощью типа данных <length-percentage> и выражаются в процентах, соответствующих размерам области контента.

Для формирования межстолбцовых промежутков размером 5% используется код:

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

Поддержка в браузерах

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

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

 

Прим.: салатовый цвет – частичная поддержка.

3. «Нативные» переменные в CSS

«Нативные» переменные (Native Variables) – модуль установления обычных пользовательских свойств для переменных каскадирования (Custom Properties for Cascading Variables Module). Данный модуль представляет собой способ создания установленных пользователем переменных, которые могут быть определены как значения для свойств.

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

: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');

Поддержка в браузерах

CSS переменные (пользовательские свойства допускают объявление и использование переменных каскадирования в таблицах стилей.