Abr@X@bra.ru
3 новых CSS-функции для изучения в 2017 году

3 новых CSS-функции для изучения в 2017 году

16.05.2017
380

1. Функциональные запросы

Запросы функций, используя правило @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. Расположение сетки

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

Явное размещение позиции

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

Например, с помощью CSS Grid я показал, как мы можем использовать этот модуль:


Основная разметка для сетки состоит всего лишь из 33 строк кода:

.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 вводится новая единица длины, единица fr, которая представляет часть свободного пространства, оставшегося в контейнере сетки.

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

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

Разметка

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

Например, чтобы иметь 5% ширину, мы бы написали -

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

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

Наконец, переменные в 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-color выше, например, все, что нам нужно сделать:

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



CSS
Читайте также:
PhpStorm, правильная настройка для web-разработки

PhpStorm, правильная настройка для web-разработки

В этом посте хочу поделится своим опытом, как правильно работать с IDE PhpStorm и удаленным web сервером. ...

Читать
Flexbox и как делать адаптивные сайты

Flexbox и как делать адаптивные сайты

Современный front-end разработчик активно должен уметь применять на практике различные инструменты, позволяющи...
Читать
Chrome, функции о которых вы не знали.

Chrome, функции о которых вы не знали.

Мы часто воспринимаем адресную строку браузера исключительно как место, куда мы вводим URL страницы, на которую мы хотим...
Читать