Если вы еще не слышали о CSS переменных, то это новое свойство CSS, благодаря которому вы обладаете силой переменных в стилях без необходимости проведения настроек.
По сути CSS переменные дают возможность перейти от старого метода прописывания стилей:
h1 {
font-size: 30px;
}
navbar > a {
font-size: 30px;
}
...к новому:
:root {
--base-font-size: 30px;
}
h1 {
font-size: var(--base-font-size);
}
navbar > a {
font-size: var(--base-font-size);
}
Синтаксис может показаться довольно странным, но зато теперь можно менять размер шрифта во всем приложении, меняя только переменную --base-font-size.
Теперь посмотрим, как эти инновации упростят вам жизнь, если вы будете создавать адаптивный сайт.
Первоначальная настройка
Сейчас разберемся, как сделать адаптивный сайт с портфолио, который выглядит так:
На компьютере смотрится отлично. Однако, как видно на картинке ниже, на телефоне отображается этот сайт так себе:
А должно выглядеть так:
На первой версии было внесено несколько поправок в стили, чтобы сайт лучше выглядел на телефоне. Вот что мы сделали:
- Поменяли таблицу так, чтобы ячейки располагались вертикально, а не в два столбца;
- Подняли весь макет немного выше;
- Сделали размер шрифта меньше.
Чтобы это сделать, нужно поменять следующий код на CSS:
h1 {
font-size: 30px;
}
#navbar {
margin: 30px 0;
}
#navbar a {
font-size: 30px;
}
.grid {
margin: 30px 0;
grid-template-columns: 200px 200px;
}
Если точнее, нужно изменить следующие значения в мультимедийном запросе:
- Уменьшить шрифт h1 до 20px;
- Уменьшить расстояние (margin) сверху и снизу от #navbar до 15px;
- Уменьшить шрифт в #navbar до 20px;
- Уменьшить отступ (margin) над .grid до 15px;
- Сделать в .grid не две колонки, а одну.
Важно: конечно, в приложении в целом гораздо больше CSS. Однако в этом уроке я решил убрать все, что не касается медиа запросов. Просмотреть код целиком можно на Scrimba.
Как было раньше, старый способ
Все это сделать можно и без CSS переменных. Однако для этого понадобится написать слишком длинный код, потому что для всего вышеописанного будет нужен отдельный селектор в медиа коде, например:
@media all and (max-width: 450px) {
navbar {
margin: 15px 0;
}
navbar a {
font-size: 20px;
}
h1 {
font-size: 20px;
}
.grid {
margin: 15px 0;
grid-template-columns: 200px;
}
}
Что же теперь, мы будем делать
Теперь посмотрим, как все поменяется, когда в дело войдут CSS переменные. Введем переменные для тех значений, которые мы будем использовать повторно или менять:
:root {
--base-font-size: 30px;
--columns: 200px 200px;
--base-margin: 30px;
}
Далее используем эти переменные в наших стилях:
#navbar {
margin: var(--base-margin) 0;
}
#navbar a {
font-size: var(--base-font-size);
}
h1 {
font-size: var(--base-font-size);
}
.grid {
margin: var(--base-margin) 0;
grid-template-columns: var(--columns);
}
Сделав эту настройку, можно менять значения переменных в запросе:
@media all and (max-width: 450px) {
:root {
--columns: 200px;
--base-margin: 15px;
--base-font-size: 20px;
}
}
Получился гораздо более чистый вариант, чем было раньше. Мы работали только с :root, а не с каждым отдельным селектором. Мы сократили мультимедиа запрос с 4 селекторов до одного и с 13 строк до 4.
Это был простой пример. Представьте полновесный сайт, где, допустим, --base-margin отвечает за большую часть свободного пространства в программе. В десятки раз проще менять значение этой переменной, чем каждый раз заполнять медиа запросы сложными селекторами.
В заключение можно сказать, что CSS переменные - будущее адаптивности!