dr.Brain

doctor Brain

мир глазами веб-разработчика

HTML: theme-color

приводим цвета в соответствие с пользоватеьским интерфейсом с помощью HTML

dr.Brain

время чтения 1 мин.

Photo by Arno Smit on Unsplash

При посещении некоторых популярных сайтов с мобильных устройств строка меню в Chrome волшебным образом меняет свой цвет, чтобы соответствовать основному цвету пользовательского интерфейса.

Это не магия: такого эфффекта можно добиться с помощью атрибута name="theme-color" HTML-элемента meta из раздела head. Именно этот атрибут предлагает браузеру использовать укзанный цвет вместо предустановленного.

<meta name="theme-color" content="#4285f4">

Так всего одна строка может помочь пользователям значительно повысить лояльность к Вашему ресурсу. Дело в том, что такое решение добавляет сайту профессиональной эстетики. Создаётся ощущение, что разработчики потратили на дизайн и верстку больше времени и других ресурсов.

Дополнительная информация на MDN


Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.