Good news everyone! Сегодня мой коллега Алексей (mr.troll) сделал волшебную штуку: http://2s.ru/2012/t142_browser_suggest/demo1_ru.html
полноценный тулбар, который можно одной строчкой ставить на любой сайт.
Русский язык: <script type="text/javascript" src="http://2s.ru/2012/t142_browser_suggest/browser_suggest_ru.js" charset="windows-1251"></script>
English: <script type="text/javascript" src="http://2s.ru/2012/t142_browser_suggest/browser_suggest_en.js"></script>
Так что я предлагаю вам описание от автора. Которое правда весьма сумбурно, по сути это цитаты из логов скайпа. Я постаралась почти не цензурировать всю экспрессию, но оформить из этого нормальное описание. Плюс я помогла сделать пару demo и, главное, demo_bookmark, так чтобы можно было заранее примерить тулбар на любом известном вам сайте.
Avesome_Browser_Detection_And_Suggestion_Toolbar_Script
Я уже несколько лет читаю статьи с призывами "Остановим IE6", "Поместим кнопочку, чтобы апгрейдили" и т.п. Даже Microsoft сделала пару сайтов по этому поводу. Отдельные сайты протестуют против отдельного IE6. Везде пишут поучаствовать — но никто не предлагает как. В лучшем случае делают прямоугольные баннеры "stop ie" — большого размера. Причём страшные, что пиздец. А пользователи ie6 — не ходят на сайты посвящённые протесту ie6 — они ходят на сотни других интересных сайтов.
Я бы рад был поучаствовать раньше — но блин меня останавливало 3 момента:
- Куда приткнуть злосчастный баннер, если нет места.
- Если тулбар — то его надо самому верстать, и он точно сломает вёрстку тех элементов, которые абсолютно позиционированы от границ body.
- Почему только ie? Мне вот недавно сказали, что у одного из сайтов едет вёрстка в Opera 9 — я даже отвечать не стал. Плюс, нельзя человеку советовать, например, обновить ie8 до ie9, если у него XP.
Ещё мне никогда не нравились ссылки, потому что по ссылкам "Скачайте новый браузер бесплатно" — всегда вирусы или реклама. Поэтому в тулбаре вместе со ссылкой я пишу кратко, как обновить браузер из самого браузера. Плюс тулбар сделан неброским.
Demo
- http://2s.ru/2012/t142_browser_suggest/demo1_ru.html — обычная страница с body margin:10px; и border-top. Можно видеть что тулбар не влияет на все внутренние отступы у body.
- http://2s.ru/2012/t142_browser_suggest/demo2_ru.html — demo, с футером, который всегда внизу =)
- http://2s.ru/2012/t142_browser_suggest/demo_bookmark_ru.html — демо, где вы можете добавить букмарк, на панель закладок и с её помощью примерить тулбар на любой сайт.
Тулбар будет показывать пользователю предложение обновить браузер, если у него старое говно.
В скрипте, для примера сейчас список стабильных версий специально завышен. Чтобы сейчас любом браузере можно посмотреть результат, в качестве стабильных в demo используются версии:
var stable_browsers={'Explorer':10,'Firefox':15,'Opera':12,'Chrome':22};
Если не задавать версии в ручную, то по умолчанию используется следующее:
var stable_browsers={'Explorer':8,'Firefox':4,'Opera':10,'Chrome':10};
Это вариант когда обновить предлагается совсем уж старое п.о. Все цифры, разумеется можно указывать дробно, например 'Opera':11.64.
Сложнее всего было сделать корректный тулбар под ie6+, так что под ie6-7 не так красиво как под ie8 и обычные браузеры.
Особенность тулбара — в том что он никак не херит существующую вёрстку:
http://2s.ru/2012/t142_browser_suggest/demo2_ru.html — пример — где вёрстка с абсолютно позиционированным блоком справа, и футером точно внизу страницы.
Тулбар подстраивается так — чтобы не затронуть никакие стили body — он как бы подвигает весь body и все его элементы вниз. Весь день на это потратил. На сайте игры (*название вырезано. прим. Елена, потому что пока сырая альфа.*) будет примерно этот же тулбар + не будет показываться блок входа вообще в случае IE. Вместо него ещё одно предупреждение.
Сам тулбар — в DOM лежит вне body. Т.е. он как бы прямой потомок <html>. А самому <html> задаётся paddingTop, а body - position:relative. Для ие6-7 к сожалению нельзя создавать элементы прямо в <html> приходится сувать в body. Но вёрстка от этого не сильно пострадает. В ие6-7 и без тулбара вёрстка страдает =)) Т.е. он всё равно ведь будет позиционироватся над body. Т.е. с отрицательным margin. А paddingTop у <html> работает и в ие6. (Прим. Елены: Вот например скриншот usabili из ie6, в тех местах где вёрстка поехала — тулбар не виноват. Замечу, что как раз тут видно что все абсолютно позиционированные элементы сверху — очень правильно сдвинуты тулбаром вниз).
Так же js содержит в себе png градиент, для ie8+ и нормальных браузеров. в ие 6-7 градиент делается через filther, поэтому я его красненький сделал. Сами иконки браузеров правда не вшил пока в код, а так бы совсем хорошо было.
Как-то распространить надо бы. Я залил это в открытый репозиторий на https://bitbucket.org/mr_troll/bs_toolbar/ может кто форкнет. А так же теперь добавлен репозиторий на GitHub — https://github.com/mr-troll/bs_toolbar
Так что в идеале, можно будет вбить список минимально допустимых версий и ставить этот скрипт вообще на каждый сайт.
Т.е. в самом мягком варианте — показывать тулбар только для ie6-7, firefox< 3, Opera< 10, Chrome <10 (владельцы интернет магазинов редко любят у себя лишние тулбары, но всегда можно договориться).
Если владелец сайта не против инноваций — то можно и для ie8 показывать и для FF<10, Opera<11.5, и Chrome<18.
Спрайты
Как уже говорилось, градиент тулбара уже вшит в js-код. Но спрайты браузеров пока нет. Вот они:
browser_logos-32.png для ie7+ и остальных, и browser_logos-32.gif для ie6, вы можете найти и заменить их в коде, если предпочитаете хранить их на своём сайте.
Послесловие
На всех страницах бложика — тулбар работает со стандартными настройками. Если перейти конкретно на страницу этой новости (не на главную) — то тулбар будет форсированно показан. Как он вам, дорогие читатели? Оставляйте комментарии, читайте код, присылайте правки, делайте переводы на другие языки или делайте свой форк. Ну, и самое главное, скачивайте и ставьте тулбар на свои сайты, давайте немножко ускорим исчезновение старых браузеров.
P.S. Добавилась поддержка Английского языка и гитхаб репозиторий.
