Предупреждение при использовании браузера Internet Explorer IE6

say no to inertnet explorer 6

На кануне 2012 года решил вспомнить одно из значимых достижений 2011 года, упрощающее жизнь всем веб-разработчикам – отказ компании Microsoft от поддержки IE6 и запуск 4 марта 2011 сервиса обратного отсчета до «смерти» IE6, показывающий процент использования браузера в мировом интернете. Internet Explorer вышел в свет 27 августа 2001 года (10 лет использования на просторах интернета были отмечены в этом году вместе с юбилеем Windows XP), последние годы своего существования он немало попил нашей кровушки и предоставил множество трудностей в разработке сайтов и веб-приложений. Когда то это должно было закончиться и мы все же дождались. Радость жизни в отсутствии надобности поддержки приложениями корректной работы в IE6.

В связи со всем выше упомянутым, появилась необходимость уведомить пользователя, использующего IE6, об устаревшем браузере и убедительно попросить его обновить свой браузер, но при этом постараться сделать это эффектно, как бы на прощание. Следовательно, я решил написать немного кода для отображения всплывающего блока с предупреждением об использовании устаревшего браузера. Множество сайтов в данный момент используют jQuery JavaScript фремворк и мой сайт не исключение, я использовал js-код для вывода блока при обнаружении использования IE6, стилизовал его с помощью CSS и пару изображений.

$(document).ready(function(){
  if($.browser.msie && $.browser.version < 7){    
    $('body').prepend('

          
'+ '

Внимание!
Вы используете устаревший браузер Internet Explorer 6

'+ '

Настоятельно Вам рекомендуем выбрать и установить любой из современных браузеров. Это бесплатно и займет всего несколько минут.

'+ ''+ ''+ ''+ ''+ ''+ '
Internet Explorer Opera Browser Mozilla Firfox Google Chrome Apple Safari
'+ '

Почему нужно поменять браузер IE6 на другой?

'+ '

Браузер Internet Explorer 6 является не просто браузером старой версии, а устаревшим браузером, браузером старого поколения. Он не может предоставитьвсе возможности, которые могут предоставить современные браузеры, а скорость его работы в несколько раз ниже!

'+ '

Internet Explorer 6 не способен отображать большинство сайтов.

'+ '

Использование Internet Explorer 6 потенциально опасно, так как именно через него доступ в Ваш компьютер имеют вирусы и мошенники.

'+ '

Microsoft, разработчик Interntet Explorer 6, прекратила его поддержку и рекомендует устанавливать новые версии своего браузера.

'+ 'Я понимаю весь риск и неудобства использования IE6
'+ 'и если забуду установить новый современный браузер, прошу снова напомнить мне это сделать
');
    wh = $(window).height();
    ww = $(window).width();
    ieh = $('#ie-support-inner').height();
    //inner position
    $('#ie-support').width(ww).height(wh);
    $('#ie-support-inner').css('left', (ww*1-840)/2).css('top', (wh*1-ieh*1)/2);
  }
});

#ie-support{
  position: fixed;
  z-index: 900;
  background-color: #000;
  filter: alpha(opacity=50);/*opacity for IE6*/
  opacity: 0.5;
}
#ie-support-inner{
  position: fixed;
  z-index: 1000;
  width: 720px;
  padding: 10px 20px 20px;
  background-color: #FFF;
  border: 3px solid #0c1a7e;
}
#ie-support-inner h1,
#ie-support-inner h2{
  text-align: center;
  color: #0c1a7e;
}
#ie-support-inner h1{
  font-size: 18px;        
}
#ie-support-inner h2{
  font-size: 16px;        
}
#ie-support-inner p{
  font-size: 12px;
}
#ie-support-inner a{
  font-size: 14px;
  font-weight: bold;
  color: #0c1a7e;
}
#ie-support-inner a:hover{
  text-decoration: none;
}
#ie-support-inner table{
  width: 100%;
}
#ie-support-inner table td{
  text-align: center;
}
#ie-support-inner table td a{
  padding-top: 70px;
  display: block;
  width: 128px;        
}
#ie-support-inner a#ie-ok{
  font-size: 12px;
  text-align: center;
  padding: 4px 0;
  width: 100%;
  display: block;
  background-color: #0c1a7e;
  color: #FFF;        
}
#ie-support-inner #ie{background: transparent url("images/ie.png") top center no-repeat;}
#ie-support-inner #opera{background: transparent url("images/opera.png") top center no-repeat;}
#ie-support-inner #ff{background: transparent url("images/ff.png") top center no-repeat;}
#ie-support-inner #chrome{background: transparent url("images/chrome.png") top center no-repeat;}
#ie-support-inner #safari{background: transparent url("images/safari.png") top center no-repeat;}

Пример кода с набором изображений можно скачать здесь, если все реализовано правильно, тогда под IE6 вы сможете увидеть подобное предупреждающее сообщение об использовании устаревшего браузера Internet Explorer 6:

result for ie6

Комментарии

  • КОНТАКТНАЯ ИНФОРМАЦИЯ
  • E-mail: