Как изменить цвет вкладки в Яндекс.Браузере с того, который формируется по иконке сайта на произвольный?
На официальном сайте Яндекса есть только информация о виджетах, выводимых в закладках: https://tech.yandex.ru/browser/tableau/doc/dg/concepts/create-widget-docpage/
Он влияет на изменение цвета вкладки, но крайне нестабильно. После очистки кэша и перезагрузки страницы вкладка становится нужного цвета, но при открытии новых, ранее не открытых страниц в браузере заголовок по-прежнему формируется по иконке.
Сам код манифеста виджета:
Еще нашел такой код:
Но толку от него нет, он ничего не меняет.
1 ответ 1
Официальный ответ от службы техподдержки Яндекса:
Цвет активной вкладки определяется автоматически его виджетом. Если у сайта есть свой логотип для виджета на странице Табло, то оформление вкладки будет ему соответствовать.
Если виджета у сайта нет, в этом случае цвет вкладки будет взят из фавиконки сайта.
P.S. От себя добавлю, что в ходе экспериментов выяснилось, что цвет фона в большинстве случаев берется из первого заполненного верхнего правого пикселя иконки и делается на несколько тонов темнее. В ряде случаев цвет формируется по другим алгоритмам (в частности, для очень светлых или очень темных иконок, а также для изображений с сочетанием разных цветов).
К сожалению, на практике Яндекс.Браузер работает с виджетом не совсем корректно, новые открываемые страницы красятся по цвету иконки сайта, а при манипуляциях с history браузера (ajax и т.д.) цвет берется из параметра "color" (цвет логотипа виджета не влияет на окрашивание). Будем надеяться, что в новых версиях браузера все будет работать правильно.
- 2019-11-20
- 18
- Июня
2017
Доброго времени суток. 🙂
В этой короткой статье хочу рассказать как сменить цвет вкладки, статус бара в браузере для сайта. Скажу сразу, что пока это работает не везде. В основном на мобильных устройствах. Данная штуковина не несет особой полезной функциональности, но как говорится – "Понты дороже денег" 🙂 Конечно же, это шутка но доля правды в ней есть.
Благодаря такому внедрению, вкладка с вашим сайтом будет всегда выделятся. Человек просматривающий страницы в своем мобильном браузере, с легкостью найдет ваш сайт среди прочих открытых. Ну и как ни как, вы придаете сайту определенный стиль, который выдерживается даже в таких мелочах. Время от времени я добавляю такие мелочи на сайты заказчиков. если они пожелают. Чтобы показать вам разницу я сделал это и со своим сайтом. Если обычно, открытая страница на телефоне имеет такой вид:
То с добавлением цвета, статус бар, верхняя часть с адресом и элементами браузера становится таким как вы захотите. В моем случаи зеленым:
Делается все это очень просто. Вам всего лишь нужно добавить пару строк в шапку вашего сайта, а точнее туда где у вас задаются META – теги. Это между тегами . Добавляете вот такие мета теги:
Естественно задаете свой цвет, меняя #6AB12F на код своего, нужного цвета. Если вы еще не совсем знаете про HEX цвета и где их брать, можете найти нужный в статье – Таблица безопасных цветов.
Вот и вся хитрость. легко и просто можно добавить своему сайту такой маленькой индивидуальности. Возможно в скором и обычные, популярные браузеры начнут тоже отображать цветные вкладки, что, несомненно, будет удобным для пользователей.
На этом все, спасибо за внимание. 🙂
Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты 🙂
Полезная информация для исполнителей и заказчиков
Смена цвета вкладки открытого сайта на телефоне и Кастомизация ползунка прокрутки сайта
Как обычно, сразу к делу.
Как сменить цвет вкладки открытого сайта в мобильных браузерах?
Все максимально просто. В теге head размещайте приведенные внизу meta теги:
Эти meta теги отвечают за изменение цвета вкладки сайта на мобильных браузерах в android и ios системах. В атрибутах content необходимо указать нужный вам цвет.
На изображении внизу видно пример того, как были использованы эти meta теги на моем сайте по сравнению со стандартным цветом вкладки в поисковике гугл.
В моем случае я использовал цвет #2b2c2d вставляя его в атрибут content.
Как изменить стили ползунка прокрутки всего сайта?
Здесь уже немного интереснее. Сейчас мы сделаем штуку, которая изображена на фото ниже:
Мы кастомизировали стандартный вид скрола на сайте, а именно: сменили цвет, форму и фон скролбара с помощью специальных псевдоелементов. Для для того, чтобы сделать так же, скопируйте css код ниже:
Вы можете изменять скрол на сайте как вам будет угодно. У вас есть возможность менять размеры скрола, добавлять ему тень, высоту ползунка, кнопки и даже просто убирать его с экрана с помощью display: none. Естественно, если вам необходимо кастомизировать только определенный скролбар на сайте, задайте эти псевдоелементы именно ему, а не глобально как это было сделано выше.
Примечание. К сожалению только webkit браузеры как Chrome, Opera и Safari работают с такими псевдоелементами. На браузерах Firefox, IE и Edge они не поддерживаются.