От автора: мы используем 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, так чтобы у меня зазоры увеличивались в размерах для каждой контрольной точки:
Как видите, мне приходится выписывать весь блок кода повторно в медиа-запросе, чтобы передать вторую переменную, поскольку переменная фиксируется после определения. (Я мог бы, конечно, использовать миксин, но на выходе получится то же — больший кусок кода.)
С помощью переменных 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.