Перевод статьи Per Harald Borgen: "How to make responsiveness super simple with CSS Variables"
Если вдруг до этого вы ни разу не слышали о 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.
Давайте посмотрим, как эта новая техника облегчит вам жизнь при создании отзывчивых сайтов.
Установка
Мы будем добавлять отзывчивость сайту-портфолио, который выглядит примерно так:
На десктопе все смотрится довольно неплохо. Но, как вы видите на первой картинке ниже, с мобильной версией дела обстоят иначе.
На последней картинке мы немного изменили стили для лучшего отображения на мобильных. Вот, что мы сделали:
1. перегруппировали гриды таким образом, чтобы содержимое отображалось вертикально, а не растягивалось на две колонки.
2. сдвинули весь шаблон немного вверх.
3. уменьшили размер шрифтов.
Для этого потребовались следующие корректировки 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;
· уменьшили отступы сверху и снизу от #navbar до 15px;
· уменьшили размер шрифта внутри #navbar до 20px;
· уменьшили отступ над .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.
Таким образом, мы уменьшили наш медиа-запрос с четырех селекторов к одному, и 13 строк кода превратились в 4.
Это был простой пример. А теперь представьте себе полноценный сайт, в котором, к примеру, --base-margin отвечает за все пустое пространство вокруг приложения. Куда проще взять и поменять его значение один раз, чем перегружать медиа-запрос комплексными селекторами.
Подводя итог, можно сказать, что CSS-переменные – это, однозначно, будущее отзывчивости.
Статью перевела Ольга Сайфудинова
Привет, это редакция канала Nuances of programming!
Если тебе понравилась статья - ставь лайк и подписывайся, чтобы не упустить новые материалы.