Панель Управления





Курс CSS. Урок 42. Браузер IE, решение проблем старых версий.
Стиль сайта. Онлайновый курс по теме CSS. Сделано в kocby.ru Курс CSS. Урок 42. Браузер IE, решение проблем старых версий. Старых версий IE у нас нет, поэтому для начала следует скачать специальный тестер, который будет имитировать различные старые версии IE. Таким способом мы сможем посмотреть на наш сайт глазами любителей старых версий IE. Три основных вида решения проблем старых версий IE. Способ мягкий - использование специальных заплаток, в результате страничка будет отображаться достаточно корректно. Способ жесткий - пользователь не сможет пользоваться контентом странички, а сможет только прочитать сообщение, о том, что у него слишком старый браузер.
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
Курс CSS. Урок 42.
Браузер IE, решение проблем старых версий.
На предыдущем уроке 41 мы сравнили популярности браузеров из большой пятерки: Гугль Хром, FireFox, IE, Safari, Opera. А также заодно попытались объяснить высокую популярность каждого из этих браузеров.
На данном уроке мы более подробно поговорим о браузере IE IE, полное название "Internet Explorer", "Обозреватель Интернета", иногда называют ласкательно "Ослик".

Всем известна такая причина высокой популярности IE как его автоматическое вхождение во все основные ОС семейства Windows компании Microsoft. Но есть и еще одна важная причина, о которой говорят меньше. Это удобная среда разработки и выполнения ActiveX. Имеется ряд популярных программ, которые сделаны на ActiveX и работают только на IE. Этот фактор дает известный запас прочности IE.

До выхода версии IE6 основным и вполне достойным конкурентом IE был Netscape (Netscape Navigator), но как-то так неожиданно вышло, что менеджеры Netscape прекратили поддержку браузера. Версия IE6 стала самой популярной версией и поставила рекорд по продолжительности жизни на рынке - почти 10 лет.

За это время вышло множество разных заплат от разных компаний, присванных заставить капризный браузер IE6 заставить работать хоть сколько-нибудь по требуемым стандартам.

Стали потихоньку подниматься конкурирующие браузеры, из которых самой популярной разработкой стал Гугль Хром. Начала выпускать новые версии IE и компания Microsoft. Версии 7 и 8 оказались значительно лучше, чем старая добрая версия 6, прежде всего, в плане соответствия стандартам W3C.

Выпуском версии IE9 Microsoft обозначила хитрый маркетинговый ход. Даннная версия браузера, а также все последующие (последняя версия по состоянию на сейчас: IE11) не могут работать на OS winXP, если пользователь хочет обновить IE, ему следует обновить целиком операционную систему на одну из новых: Windows Vista, Windows 7, Windows 8. Кроме того Microsoft объявила, что весной 2014 года прекращается официальная поддержка Windows XP. Надо заметить, что Windows XP оказалась настолько качественной разработкой (продержалась более 12 лет), что сама Microsoft с трудом удаляет ее с рынка и для этого делает уже не первую попытку (а первая была в 2006 году, когда XP хотели убить с помощью Vista).

Однако, возвращаемся к IE. Последние версии, например 11, конечно, гораздо лучше соответствуют стандартам W3C, чем старые. Поэтому, заплатки, которые мы изучим на данном уроке имеют не настолько большое практическое значение, как, например, двумя годами ранее, и чем дальше, тем больше их значение падает. Но, тем не менее, тема весьма интересная, хотя бы с исторической точки зрения. Кроме того, мы изучим, как мы между прочим, условные операторы подключения скриптов JavaScript. Вполне возможно, эти знания пригодятся нам в каких-то иных случаях.

Вполне вероятно, что старых версий IE у нас нет, поэтому для начала следует скачать специальный тестер, который будет имитировать различные старые версии IE:


Теперь, если мы посмотрим наш тестовый пример с урока 40 по адресу:
http://kocby.ru/css/css_040_001.html,
в тестере с имитацией IE6, то увидим печальную картину... Наш дизайн рассыпался, картинки потеряли прозрачность, в целом вид неудовлетворительный.
Так выглядит тестовая страничка в IE6 до использования лекарства...
Так выглядит тестовая страничка в IE6 до использования лекарства...

Для лечения можно использовать несколько подходов.

Метод 1. Мягкий. С помощью специальных заплаток делается попытка отобразить страничку в старой версии IE более или менее корректно.

Суть данного метода заключается в том, что вставляется специальный код в область <head></head>:
<!--[if lt IE 7]>
<script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('#pic_new_css_042,#bird_css_042,#button_css_042');
</script>
<script src="js/IE8.js"></script>
<script src="js/ie7-squish.js"></script>
<![endif]-->

Логика следующая: если страничка открывается браузером, отличным от IE или IE версии не меньше, чем 7, то код между [if lt IE 7] и [endif] просто игорируется. Но если страничка открывается браузером IE с версией меньше, чем 7, то запускаются на выполнение заплаточные скрипты между [if lt IE 7] и [endif].

Теперь вносим изменения, но уже в наш тестовый пример 1 урока 42 по адресу:
http://kocby.ru/css/css_042_001.html,
в тестере с имитацией IE6, то увидим, что теперь и старый IE6 показывает нашу страничку удовлетворительно.
Так выглядит тестовая страничка в IE6 после использования лекарства...
Так выглядит тестовая страничка в IE6 после использования лекарства...

Метод 2. Жесткий. Пользователю категорически сообщается, что его версия браузера устарела и требуется обновление.

Суть данного метода заключается в том, что вставляется специальный код в область <head></head>:
<!--[if lte IE 6]>
<meta http-equiv="refresh" content="0; url=ie6/">
<![endif]-->

Логика следующая: если страничка открывается браузером, отличным от IE или IE версии не меньше 6 и не равна 6, то код между [if lt IE 7] и [endif] просто игорируется. Но если страничка открывается браузером IE с версией 6 или меньше, чем 6, то открывается другая страничка (Страничка-заглушка) по адресу ie6/, а контент оригинальной странички просто игнорируется.

Теперь вносим изменения, но уже в наш тестовый пример 2 урока 42 по адресу:
http://kocby.ru/css/css_042_002.html,
И если эту страничку пытаемся смотреть в тестере с имитацией IE6, то увидим, что в результате отобразится страничка-заглушка, которая хотя и витиевато, но без мата, объяснит пользователю (какой он лох), что его браузер устарел и надо бы обновиться.
Пользователю категорически сообщается, что его версия браузера устарела и требуется обновление.
Пользователю сообщается, что версия браузера устарела и требуется обновление.

Метод 3. Игнорирование проблем пользователей старых версий IE.

Метод неплохой, по крайней мере, самый незатратный.

Тем не менее, если можно считать, что проблемы с исторически знаменитой версией IE 6 потеряли свою остроту, то проблемы с IE 8 еще долго будут иметь место, учитывая, что OS winXP очень популярна и даже после отмены официальной поддержки еще будет несколько лет мучать пользователей и разработчиков версией IE 8 (т.к. напомню, для XP это максимально возможная версия IE).

Для справки несколько статистических данных по состоянию на сейчас.

Процент использования IE 6 (и ниже): менее 1%
Процент использования IE 8 (и ниже): около 5%

Нужно ли заботиться об этих пользователях (и как именно проявлять эту заботу) или просто игнорировать их проблемы (по принципу "проблемы индейцев шерифа не волнуют") - каждый решает сам.

Мы с вами, по крайней мере, познакомились с возможностями решения подобных проблем.
css_042_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_042_002.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_042_001.zip ← скачайте пример, чтобы установить на свой сайт...

***** Машина-Функционал для передвижения по страничкам курса CSS *****
:: ::  / 


Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.


Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/css/p042.html
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
© KOCBY.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCBY.RU ©
Basket is empty :: Корзина пустая
Close and hide in basket :: Закрыть и спрятать в корзину
***** Реклама *****
Посмотри в зеркало! Что там видно?
Красивая девушка брюнетка слева Красивая девушка блондинка справа
Красивая девушка блондинка слева Красивая девушка брюнетка справа
Наверх ↑