IE6? No way! или 3 способа заставить пользователя перейти на современный браузер*

* Под современным браузером в лучшем случае подразумеваем последние версии Firefox, Chrome, Opera или Safari, в худшем – IE 8.

Наверняка большинство людей так или иначе связанных с IT прекрасно представляют себе, что такое IE 6.
IE 6 был выпущен в 2001 году, и был довольно неплохим браузером для того времени.
Начало двухтысячных – время домашних страничек и гостевых книг, и с ними IE справлялся хорошо. Конечно, он иногда неправильно считал отступы, не мог отобразить полупрозрачный PNG – но кого это тогда волновало?
Время шло, и постепенно единственный игрок на рынке стал считаться лучшим.

Прошло девять лет.
Люди узнали, что такое Livejournal, Wikipedia, YouTube, Facebook, Twitter.
Количество доступной информации увеличилось в сотни раз.
Интернет изменился самым коренным образом.

Но IE 6 так и остался популярным браузером.

И сегодня мы поговорим не только о том, как сказать пользователю, что его браузер устарел, но и как объяснить, зачем нужно его менять на что-то более современное.

Способ первый, ненавязчивый

Мы отобразим текст наверху страницы либо небольшой блок с возможностью выбора браузера.

Первый вариант

Здесь довольно легко заменить текст и сделать ссылку на русский сайт IE 8.

Основной плюс в том, что текст выглядит так же, как могло выглядеть сообщение от Microsoft.
Перейти на сайт автора

Второй вариант

HTML

<!--[if lt IE 7]>
  <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 90px; position: relative;'>
    <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Скрыть уведомление'/></a></div>
    <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
      <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>
      <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>
        <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>Вы используете устаревший браузер</div>
        <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>Для более удобной работы с сайтом, пожалуйста, обновите ваш браузер.<br /><b><a href= 'http://www.whatbrowser.org/ru/'>Что такое браузер?</a><br /><a href='http://getbrowsers.com/ru/why/'>Зачем его обновлять?</a></b></div>
      </div>
      <div style='width: 75px; float: left;'><a href='http://www.mozilla-europe.org/ru/firefox/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Firefox 3.5'/></a></div>
      <div style='width: 75px; float: left;'><a href='http://www.microsoft.com/rus/windows/internet-explorer/worldwide-sites.aspx' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Internet Explorer 8'/></a></div>
      <div style='width: 73px; float: left;'><a href='http://www.apple.com/ru/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Safari 4'/></a></div>
      <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Google Chrome'/></a></div>
    </div>
  </div>
  <![endif]-->

Другие вариации представлены на этом сайте.

Вот ещё один вариант (на русском).

Способ второй, навязчивый

Теперь попробуем плагин jReject.
Плагин имеет большое количество настроек и устанавливается без особых усилий.
Вот как может выглядеть окно выбора на вашем сайте:


Минус этого подхода заключается в том, что подобное решение может вызвать у человека панику и уверенность в том, что он что-то сделал не так. А среди пользователей IE 6 такая реакция является наиболее вероятной :)

Способ третий, бескомпромиссный

<!--[if lte IE 7]><script>for (x in document.write) { document.write(x);}</script><![endif]--> 

Здесь всё максимально просто – когда человек заходит с IE, его браузер падает.
Причём, если IE 6 тихо вылетает, не доставляя особых неудобств, то 7 и 8 версии Осла виснут намертво, и закрыть их можно только через Диспетчер задач. Но мы же не будем убивать IE 8, не правда ли? Поэтому ставим условный комментарий, согласно которому совершать непредвиденный выход будут только 6 и 7 версии.

Итог

К сожалению, не один из вышеприведённых способов (разве что кроме последнего) не гарантирует того, что на ваш сайт перестанут заходить пользователи с IE 6.
Но попытаться стоит.

---

Категории

• CMS
• CSS
• jQuery
• MySQL
• PHP
• Вёрстка

Контакты