Использование пользовательских свойств CSS для лучшего UX
Опубликовано: 2019-11-29
Последнее обновление — 8 июля 2021 г.
CSS3 принес с собой одно из самых больших дополнений в спецификации CSS за долгое время. Он вызвал много шума, потому что решил ключевую проблему, которая мучила разработчиков в течение многих лет и была основной причиной, по которой люди предпочитали использование препроцессоров, таких как SASS: возможность использовать переменные.
С добавлением переменных CSS большая часть кода, который должен был быть написан для поддержки основных функций, таких как создание тем, больше не нужна. Это полезная функция, которую можно использовать, чтобы избежать повторения и включить еще больше вариантов использования, таких как динамические размеры шрифта и простота, в дополнение к отзывчивости в веб-приложении.
Избавьтесь от беспорядка с помощью переменных CSS
Общей чертой большинства приложений являются фирменные цвета, которые должны оставаться одинаковыми во всем приложении. Никому не приходит в голову хранить в голове десять различных шестнадцатеричных значений для дальнейшего использования, а переход между файлами для копирования значений не только утомителен, но и вреден для производительности. А теперь представьте, какой объем работы нужно проделать, если нужно изменить эти цвета.
Использование препроцессоров CSS с WordPress — наиболее распространенный способ решения этой проблемы. Они предлагают поддержку целого ряда функций, таких как примеси, вложенные объявления и, конечно же, переменные, которые значительно повышают производительность.
Все, что вам нужно сделать, это написать свой код один раз, и он будет скомпилирован в CSS, к которому вы можете свободно получить доступ и изменить, если хотите. Однако невозможность найти и изменить эти значения во время выполнения, например, добавить темную тему в ваше веб-приложение, является их самым большим недостатком. Это серьезная проблема не только потому, что SASS ее не поддерживает, но, скорее всего, никогда и не будет.
Добавление пользовательских встроенных переменных в открытие CSS сильно повлияло на то, как мы пишем приложения, особенно в отношении тем и адаптивного дизайна.
Какова поддержка браузером переменных CSS?
Это самый распространенный вопрос, который возникает при обсуждении переменных CSS. По данным Caniuse , браузер поддерживает переменные CSS на уровне 93,16%. Он поддерживается во всех современных браузерах (Chrome 49+, Firefox 31+, Safari 9.3+, Opera 36+ и Edge 16+). Как всегда, IE отсутствует на выставке, и его доля рынка составляет 6,47% . Для бедных разработчиков, которые должны поддерживать старые браузеры, не беспокойтесь. Полифиллы , или, точнее, понифиллы, здесь, чтобы спасти положение.
Формальное введение в переменные CSS
Если вы знакомы с переменными CSS, у вас не должно возникнуть проблем с переменными CSS.
Переменные SASS объявляются так:
<пред>
$facebook-синий: #4267B2;
</pre>
Хотя переменные CSS объявляются немного по-другому:
<пред>
:корень {
– фирменный цвет: #4267B2;
}
.brand-navbar {
фон: var(- -brand-color);
}
</pre>
Обратите внимание на несколько различий между двумя синтаксисами:
- Переменные CSS должны предваряться двумя дефисами.
- Переменные CSS обычно объявляются внутри ':root', но могут быть переопределены в любое время.
- Свойства CSS извлекаются с помощью функции 'var()'.
Переменные CSS также предлагают доступ к нескольким дополнительным функциям.
Каскадные значения
Свойства CSS каскадируются в соответствии с обычными правилами каскадирования. Другими словами, повторное объявление ниже не влияет на то, что указано выше.
<пред>
:root { –цвет: желтый; }
div { – цвет: синий; }
#great { –цвет: зеленый; }
* { цвет: var(–color); }
<p>Я буду желтым, унаследованным от корня!</p>
<div>Я синий!</div>
<div ID="отлично">
Это сработало! Я зеленый!
<p>Я тоже зеленый! Унаследовано свыше!</p>
</div>
</pre>
Резервные значения
Функция 'var()' принимает несколько параметров. Второе значение можно использовать в качестве резервного значения, если пользовательское свойство CSS не определено. Это полезная функция для всех, кому нужен доступ к переменным CSS через JavaScript.
Его подпись выглядит как «var(<имя-настраиваемого-свойства> [, <значение-объявления>]?)» и может использоваться следующим образом.
<пред>
.brand-navbar {
фон: var(–brand-color, «#4267B2»);
}
</pre>
Если «–brand-color» не определен, вместо него будет использоваться «#4267B2»,
Доступ через JavaScript
Одна из лучших причин использовать переменные CSS вместо препроцессора — это возможность доступа к пользовательским переменным через JavaScript. Переменные препроцессора не живут в браузере. Они оцениваются при компиляции кода. Таким образом, переменные препроцессора не могут быть доступны в браузере. С переменными CSS свойство живет в браузере, предоставляя возможность редактировать значения на лету.
Рассмотрим панель инструментов, которая позволяет пользователю выбирать собственные цвета с помощью всплывающего окна или чего-то подобного.
<пред>
.brand-navbar {
фон: var(–brand-color, «#4267B2»);
}
//Чтобы получить текущее значение
getComputedStyle(document.documentElement).getPropertyValue('–brand-color');
//Чтобы установить значение
document.documentElement.style.setProperty('–фирменный цвет', 'красный');
//Вы даже можете присвоить одно свойство CSS другому
document.documentElement.style.setProperty('–brand-color','var(–secondary-color)');
</pre>
Глобальный и локальный охват
Если вы знакомы с JavaScript (или с любым другим языком программирования), то вы, вероятно, понимаете концепцию области видимости. Обычно переменные можно определить таким образом, чтобы они были доступны только для определенных частей кода, называемых локальной областью, или доступными для использования во всем приложении, называемой глобальной областью.
Переменные CSS работают аналогично. Некоторые переменные должны иметь глобальный охват для облегчения поиска, например, фирменные цвета и интервалы по вертикали. Обычно они остаются одинаковыми во всем приложении, и в случае изменения это должно быть отражено везде. Напротив, переменные, для которых может потребоваться локальная область видимости, включают кнопки с разными большими и маленькими вариантами. Если вы хотите изменить отступ для определенной кнопки, вы не захотите, чтобы изменения проходили через весь DOM. Его нужно изменить всего в одной точке в приложении.
По умолчанию свойства CSS имеют локальную область действия. И если вы работали либо с JavaScript, либо с любым другим языком программирования, область действия имеет свой собственный набор проблем. Поскольку они могут быть унаследованы, они также действуют как локальные переменные, которые могут иметь некоторые интересные последствия, если вы не будете осторожны с их использованием. Поскольку значения каскадируются, вам нужно помнить о том, как вы их изменяете, особенно когда речь идет о JavaScript.
Использование настраиваемых свойств с медиа-запросами
Как и в случае с препроцессорами, основным недостатком использования свойств CSS является то, что их нельзя использовать в медиа-запросах. Например, это не сработает.
<пред>
@media (минимальная ширина: var(–точка останова)){
набивка: 1рем;
}
</pre>
Вместо этого вы можете переопределить пользовательские свойства в медиа-запросах. Если вам нужно изменить размер шрифта при уменьшении масштаба браузера, вам повезло. С переменными CSS вы можете прослушивать изменения браузера с помощью JavaScript и изменять любые размеры, которые необходимо уменьшить только один раз.
Каковы некоторые практические применения пользовательских свойств CSS?
«Сегодня, помимо использования служб CDN для повышения производительности сайта , использование настраиваемых свойств CSS является одним из самых быстрых способов повышения производительности», — советует Колби Стюарт, веб-дизайнер службы написания пользовательских статей .
Помимо хорошо подчеркнутых преимуществ, это повышает производительность, есть ли реальные примеры того, как их можно использовать в веб-приложении?
Добавление темного режима
Новая тенденция, охватившая потребительский рынок, — потребность в темном режиме во всем современном программном обеспечении, включая веб-приложения. Это может быть немного сложнее, чем добавление темного цвета фона. Другие вещи, которые необходимо учитывать, включают то, как изменятся цвета текста и как это повлияет на изображения с белым фоном.
Все это стало возможным благодаря первому объявлению переменных в вашем приложении. Когда пользователь активирует переключатель, чтобы сделать тему веб-сайта темной, активируйте функцию JavaScript, которая изменяет переменные CSS. Если ваше веб-приложение более сложное, это также может включать замену текущих изображений на те, которые подходят для темного режима.
Добавление темного режима в WordPress
Переменные CSS были настолько влиятельными, что достигли мира WordPress. Сегодня создание темного режима (или, в более общем смысле, темы) для приложения WordPress довольно тривиально.
Большинство разработчиков WordPress полагаются на Customizer для изменения внешнего вида и функциональности своих сайтов. Он предоставляет доступ к таким вещам, как цвета, шрифты, фоновые изображения и т. д., посредством доступа к CSS вашего сайта. Основная проблема заключается в том, что изменение CSS таким образом заставляет PHP повторно отображать ваш HTML, и при этом заставляет сервер повторно отправлять весь файл в браузер. Ваше приложение делает ненужный запрос, потребляя больше данных, чем нужно.
«Если бы такое приложение было ориентировано на потребителя, вы, вероятно, получили бы много жалоб. Если у вас нет специальных файлов CSS для любых переменных, которые вы хотите изменить, все становится намного хуже». Хелена Ньюман, старший разработчик papersowl review и издатель услуг по написанию резюме, считает это необходимым дополнением к спецификации CSS.
Используя переменные CSS, все цвета меняются в браузере с помощью JavaScript. Единственный запрос, который будет сделан, — это сохранить текущую тему на сервере, если это необходимо. И даже тогда такую переменную можно сохранить в браузере.
Добавление адаптивного дизайна на сайт
С большим количеством мобильных телефонов в Интернете, чем когда-либо прежде, потребность в адаптивных веб-сайтах никогда не была столь очевидной. Наиболее важным аспектом адаптивного дизайна, который сбивает разработчиков с толку, является изменение размера шрифта. Для приложения, которое использует несколько шрифтов или динамические шрифты, отслеживать их и изменять для разных браузеров — рутинная работа.
Вместо этого пользовательские свойства CSS позволяют вам определить универсальный размер шрифта, который можно использовать и повторно использовать на вашем веб-сайте. В случае, если это нужно изменить, все, что вам нужно сделать, это вызвать функцию JavaScript, и все заработает.
Если вам не нужна поддержка старых браузеров, пользовательские переменные CSS можно использовать в сочетании с (относительно) новой системой сетки CSS, чтобы полностью исключить необходимость в медиа-запросах.
Опять же, медиа-запросы могут быть необходимы, если вам нужно прослушивать изменения ширины в самом CSS. Это единственный способ поддерживать браузеры, которые не позволяют запускать JavaScript.
Вывод
Пользовательские переменные CSS являются одними из наиболее важных дополнений к спецификации за последнее время. Они могут упростить процесс проектирования, убрав беспорядок в файлах CSS и избавив от необходимости делать какие-либо ненужные дополнительные запросы.