новые CSS свойства

Автор: Ire Aderinokun    Источник: bitsofco.de
30.01.2017
626
0
img

С приходом нового года появился целый набор новых вещей для изучения. Среди них много новых свойств, 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; }
}

Поддержка

Can I Use css-featurequeries? Data on support for the css-featurequeries feature across the major browsers from caniuse.com.

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 будет доступен в браузерах не ранее марта этого года.

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

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

Поддержка

Can I Use css-variables? Data on support for the css-variables feature across the major browsers from caniuse.com.

О поддержке

Как видите, пока что ни одно из этих свойств полностью не поддерживается всеми браузерами, так как же их использовать? Что ж, прогрессивное улучшение! В прошлом году я говорила о прогрессивном улучшении в отношении CSS на конференции Fronteers Conference. Вы можете посмотреть это в видео.

А какое новое CSS свойство хотели бы испробовать вы?

ПОХОЖИЕ СТАТЬИ: