Супер-силы макетов с использованием переменных CSS + CSS Grid

Супер-силы макетов с использованием переменных CSS + CSS Grid

От автора: мы используем CSS Grid в процессе разработки на Mud уже в течение нескольких месяцев, и мне очень нравится гибкость, которую это дает мне при компоновке. До сих пор мы обходились без реального решения под Веб — мы пытались придумать что-то с помощью float и flexbox. Но теперь, честно говоря, я не могу представить себе жизнь без Grid!

Одна вещь, которой я стал уделять достаточное внимание только в последнее время — это CSS переменные (или пользовательские свойства). Переменные CSS работают немного похоже на переменные в Sass и других препроцессоров. Основное отличие заключается в том, что они компилируются в браузере, в отличие от препроцессорных переменных, которые компилируются в фиксированные значения CSS до того, как попадают в браузер. Переменные CSS — это настоящие динамические переменные, которые могут обновляться «на лету», либо в таблице стилей, либо с помощью JavaScript, что делает их супер универсальными. Если вы знакомы с Javascript, то я могу сравнить различия между препроцессорными переменными и переменными CSS с различиями между const и let — они предназначены для разных целей.

Переменные CSS можно применять для целого ряда полезных вещей (например, для настраиваемых макетов). Недавно я опробовал следующий способ применения CSS-переменных — макеты на основе CSS Grid, в которых мне нужно было переопределить свойства grid-template-rows и grid-template-columns для разных контрольных точек. Ниже приводится пример, в котором я использовал переменные Sass для определения маленьких и больших размеров столбцов, которые я передаю в свойство grid-template-rows. То же самое я делаю с свойством grid-gap, так чтобы у меня зазоры увеличивались в размерах для каждой контрольной точки:

Как видите, мне приходится выписывать весь блок кода повторно в медиа-запросе, чтобы передать вторую переменную, поскольку переменная фиксируется после определения. (Я мог бы, конечно, использовать миксин, но на выходе получится то же — больший кусок кода.)

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

С помощью переменных CSS я могу уменьшить количество кода, так как у меня есть возможность просто обновить переменную внутри медиа-запроса, и браузер пересчитает параметры сетки. Десять строк кода (Sass) могут показаться не такой большой экономией, но код стал намного более читаемым — вместо того, чтобы добавлять медиа-запросы в нескольких местах для работы с новыми переменными, я могу просто объявить их в начале кода для этого компонента, и больше мне не нужно беспокоиться о том, чтобы заменять каждое значение, в котором оно используется:

Одна вещь, которую я заметил в отношении CSS Grid — это довольно многословный синтаксис, и нам не всегда просто понять, что происходит, особенно в случае сложной сетки. Но используя CSS-переменные в этом примере, я могу установить переменные для размера и координат элементов сетки и выписать свойства grid-column и grid-row только один раз. Это для меня намного понятнее, чем писать все свойства каждый раз. И нам очень легко увидеть, где мы размещаем любой элемент сетки.

Все становится еще интереснее, когда мы добавляем еще и JavaScript! В приведенном выше примере я использую JavaScript для циклического переключения элементов сетки и обновления переменных случайным значением (в пределах параметров сетки) при каждом нажатии кнопки. Никаких дополнительных классов или стилей CSS не требуется! (Обратите внимание, что это незавершенное решении, не судите о моем JS;))

В приведенном ниже примере я использую вводимые пользователем данные для динамического изменения элементов сетки. Все, что здесь обновляется, это три переменные для координат x и y и размера элемента сетки.

И так много всего еще можно придумать!

Поддержка браузерами

В настоящее время переменные CSS поддерживаются в 88% браузеров — очевидным исключением является Internet Explorer 11 и ниже. Это примерно на уровне поддержки Grid Layout, и значит, что поддержку довольно просто проверить. Вы можете использовать для проверки поддержки переменных CSS объявление @supports, подобное этому:

@supports(--css: variables) {
 .my-div {
 --size: 2;
 --posX: 3;
 grid-column: var('--posX') / span var('--size');
 }
 }

(См. этот пример от SitePoint)

Надеюсь, это дало вам представление о том, что возможно сделать с помощью переменных CSS!

Автор: Michelle Barker

Источник: https://codepen.io/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Курс по Flexbox

Изучите работу с Flexbox

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree