Як пофарбувати вкладку Chrome

image

Якщо ви заходили з мобільного хрому в фейсбук, то напевно бачили, що інтерфейс браузера фарбується в фірмовий синій колір соцмережі. Але навіщо і як?


Мобільні сайти все більше схожі на програми, ніж просто сайт з інформацією, і Google підтримує цю тенденцію. Подивіться хоча б на те, що в останніх версіях мобільного хрому за замовчуванням вкладки браузера змішуються зі списком недавно запущених додатків. Але що не вистачає сайту, щоб стати ще трішки більше додатком? Звичайно ж кастомізації оболонки (интрефейса). Починаючи з 39 версії хрому для Android Lollipop була впроваджена можливість міняти колір інтерфейсу браузера веб-розробниками.

Зробити це просто, потрібно в <head> додати новий мета-тег:

<meta name="theme-color" content="#9CC2CE">


Як видно з коду, content ми записуємо колір забарвиться браузер.

Google також рекомендує використовувати іконку високої якості, щоб це виглядало ще краще:

<link rel="icon" sizes="192x192" href="nice-highres.png">


Через інспектор пристроїв хрому, я зробив приклад, як це могло б виглядати на мобільній версії хабра:

image

Зауваження: Якщо у користувача не включено змішування вкладок з додатками, то він побачить вибраний вами колір вкладки на вашому сайті, але в списку вкладок, вона буде сірою.

image

P. S. Мені хотілося б, щоб цей колір можна було задавати через css, так як це більш логічний варіант, та й можна було б скористатися змінної…

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.