новые CSS свойства
С приходом нового года появился целый набор новых вещей для изучения. Среди них много новых свойств, 3 из которых мне бы хотелось поскорее применить в этом году.
1. Feature Queries
Не так давно я писала, что Feature Queries – одно из самых ожидаемых мною CSS свойств. Что ж, вот оно! На данный момент оно поддерживается всеми основными браузерами (включая Opera Mini), кроме Internet Explorer.
Feature Queries, используя правило @supports , позволяет нам обернуть CSS код условным блоком, этот код будет применен только в том случаи, если браузер пользователя поддерживает определенное CSS свойство. Простой пример – стили Flexbox будут применены только в тех браузерах, которые поддерживают свойство 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 – это система для создания сеточной разметки. У нее есть сходства с Flexbible Box, но она предназначена именно для разметки страниц и у нее есть несколько отличительных особенностей.
Размещение элементов
Grid состоит из контейнера (созданного с помощью свойства display: grid) и дочерних элементов. С помощью CSS вы можете легко и просто управлять расположением и порядком элементов независимо от их положения в разметке. Например, в моей статье «The Holy Grail Layout with CSS Grid» я показала, как можно использовать этот модуль, чтобы создать пресловутую разметку «holy grail».
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 (фракция), которая представляет собой свободное пространство, оставшееся в контейнере.
Она позволяет распределять высоту и ширину элементов в зависимости от доступного места в контейнере. Например, в Holy Grail я хотела, чтобы центральная секция занимала все оставшееся место после двух сайдбаров. Чтобы сделать это, я просто написала:
.hg {
grid-template-columns: 150px 1fr 150px;
}
Промежутки
Промежутки можно задавать, используя свойства grid-row-gap, grid-column-gap и grid-gap. Эти свойства принимают процентные значения по отношению к размеру контента
Например, чтобы получить 5% промежутки, надо написать:
.hg {
display: grid;
grid-column-gap: 5%;
}
Поддержка
CSS Grid будет доступен в браузерах не ранее марта этого года.
3. Родные переменные
И наконец, родные CSS переменные. Этот модуль представляет собой метод создания пользовательских переменных, которые могут быть использованы как значения CSS свойств.
Допустим, у вас есть цвет, который вы используете в разных местах CSS файла, его можно задать как переменную и ссылаться на нее, вместо того, чтобы каждый раз писать реальное значение.
:root {
--theme-colour: cornflowerblue;
}
h1 { color: var(--theme-colour); }
a { color: var(--theme-colour); }
strong { color: var(--theme-colour); }
Переменные есть и в CSS препроцессорах, таких как SASS, но у родных переменных есть преимущество жизни в браузере. Это значит, что их значения могут меняться на ходу. Например, чтобы изменить значение --theme-colour, мы можем сделать следующее:
const rootEl = document.documentElement;
rootEl.style.setProperty('--theme-colour', 'plum');
Поддержка
О поддержке
Как видите, пока что ни одно из этих свойств полностью не поддерживается всеми браузерами, так как же их использовать? Что ж, прогрессивное улучшение! В прошлом году я говорила о прогрессивном улучшении в отношении CSS на конференции Fronteers Conference. Вы можете посмотреть это в видео.
А какое новое CSS свойство хотели бы испробовать вы?