Создаете адаптивный веб-сайт с цветовыми темами? Лучше начать с корня

Если вам случится посетить мой веб-сайт, вы можете заметить, что я немного его привел в порядок. Victoria.dev теперь может лучше реагировать на ваши устройства и предпочтения!

Вот как использовать медиа-запросы CSS и настраиваемые свойства, чтобы улучшить работу посетителей в Интернете с помощью всего нескольких строк CSS.

Удовлетворение предпочтений по цвету

Можно запросить prefers-color-scheme медиа-функцию, чтобы предоставить выбранную пользователем цветовую схему. Вариант light - это подходящая версия, если не установлено никаких активных предпочтений, и она имеет достойную поддержку в современных браузерах.

Кроме того, пользователи, читающие на определенных устройствах, также могут устанавливать светлые и темные цветовые темы по расписанию. Например, мой телефон использует светлые цвета во всем пользовательском интерфейсе днем ​​и темные цвета ночью. Вы можете сделать так, чтобы ваш сайт последовал этому примеру!

Избегайте частого повторения CSS, задав настраиваемые свойства для ваших цветовых тем в псевдоклассе :root. Создайте версию для каждой темы, которую хотите поддерживать. Вот небольшой пример, на котором вы можете опираться:

Как видите, вы можете использовать настраиваемые свойства для установки всех видов значений. Чтобы использовать их как переменные с другими элементами CSS, используйте var() function:

header {
    color: var(--text-primary);
    background-color: var(--background);
    box-shadow: var(--shadow);
}

В этом быстром примере элемент header теперь будет отображать предпочтительные цвета вашего пользователя в соответствии с настройками его браузера!

Fire Fox

Вы можете протестировать режимы light и dark в Firefox, набрав about:config в адресной строке. Примите предупреждение, если оно появится, затем введите ui.systemUsesDarkTheme в поиск.

Выберите значение Number для настройки, затем введите 1 для темноты или 0 для света:

Храбрый

Если вы используете Brave, найдите настройки цветовой темы в Настройки ›Внешний вид› Brave colors:

Переменное масштабирование

Вы также можете использовать настраиваемое свойство, чтобы легко настроить размер текста или других элементов в зависимости от размера экрана вашего пользователя. width медиа-функция проверяет ширину области просмотра. Хотя width: _px будет соответствовать точному размеру, вы также можете использовать min и max для создания диапазонов.

Запрос с min-width: _px для соответствия чему-либо более _ пикселей и max-width: _px для соответствия чему-либо размером до _ пикселей.

Используйте эти запросы, чтобы установить настраиваемое свойство на :root для создания соотношения:

Затем сделайте элемент адаптивным, используя функцию calc(). Вот несколько примеров:

В этом примере умножение начального значения на ваше --scale настраиваемое свойство позволяет размеру заголовков и изображений волшебным образом подстраиваться под ширину устройства вашего пользователя.

Относительная единица rem будет иметь аналогичный эффект. Вы можете использовать его для определения размеров элементов относительно размера шрифта, объявленного в корневом элементе:

Конечно, вы также можете умножить два настраиваемых свойства. Например, установка --max-img в качестве настраиваемого свойства на :root может помочь сэкономить ваше время в дальнейшем, поскольку вам не придется обновлять значение пикселя в нескольких местах:

img {
    max-width: calc(var(--max-img) * var(--scale));
}

Повысьте свою отзывчивость

Попробуйте эти простые победы для веб-сайта, который обслуживает устройства и предпочтения ваших посетителей. Я нашел им хорошее применение на victoria.dev. Дайте знать, понравилось ли вам!

Спасибо за прочтение!