Internet Explorer | htmlbook.ru

Internet Explorer

Средства разработчика Internet Explorer

Влад Мержевич

Сам по себе инструмент не представляет интереса, поскольку сильно проигрывает аналогичным средствам в других браузерах. Но у него есть весомое преимущество, ради которого его следует изучить и применять в деле — возможность просматривать и тестировать сайт в разных версиях IE — 7.0, 8.0 и 9.0.

Загадочное свойство hasLayout

Влад Мержевич

Для отображения элементов и учёта их взаимодействия между собой, разработчики IE внедрили в этот браузер уникальное свойство hasLayout, значением которого выступает true или false. «Установить hasLayout» означает задать ему значение true, а «убрать hasLayout» говорит о том, что это свойство не задано или у него значение false.

Большинство имеющихся ошибок в IE6, IE7 связано, так или иначе, именно со свойством hasLayout. В IE8 оно было снято, что с одной стороны хорошо, но с другой повлияло на то, что IE разных версий отображают одну и ту же страницу совершенно по-своему. Поэтому важно понимать, как работает это свойство и какую роль выполняет.

Условные комментарии

Влад Мержевич

Из-за возможных различий в отображении браузерами одного и того же кода возникает проблема идентификации браузера и его версии, чтобы «подсунуть» ему персональный код. Браузер IE поддерживает специальную технологию определения версии под названием «условные комментарии». Синтаксис их применения следующий.

<!--[if условие]> невидимый HTML-код <![endif]-->
<![if условие]> видимый HTML-код <![endif]>

Тестирование в IE

Влад Мержевич

В браузерах IE9, IE8 можно переключать движок сайта на любую версию, начиная с 7.0. Переключение реализовано довольно точно, и указав режим документа IE7 можно получить документ таким, как если бы его просматривали в этой версии, со всеми её ошибками. Само переключение делается двумя способами.

  1. Через режим представления совместимости.
  2. Через средства разработчика.

Internet Explorer

Влад Мержевич

На сегодняшний день браузер IE является главной проблемой при вёрстке веб-страниц. Это связано с плохой поддержкой спецификации CSS, наличия большого количества ошибок и присутствием у пользователей разных версий IE, включая морально устаревшие IE6 и IE7. Подобного разброса нет у других браузеров, что вероятнее всего связано с политикой Microsoft. Браузер IE поставляется вместе с Windows и неразрывно с ней объединён, соответственно за обновление браузера отвечает система Windows Update, которая у многих пользователей часто бывает отключена.

Режимы Internet Explorer

Влад Мержевич

Вокруг Internet Explorer сложилась ситуация, которая больше не прослеживается ни с одним другим браузером — разброс версий начинается с 6.0 и заканчивается 9.0. Причины использования устаревших версий могут быть совершенно разные.

  • Internet Explorer встроен в операционную систему Windows и неопытные пользователи даже не подозревают о наличии альтернативы.
  • Корпоративные пользователи с ограниченным доступом не могут самостоятельно обновить версию или сменить браузер.
  • Обновление IE до новой версии происходит через систему Windows Update, которая часто отключается по требованиям безопасности или для снижения интернет-трафика.
  • Некоторые приложения, например, банковские, могут быть «заточены» для работы только под конкретную версию IE.
  • В силу инерции мышления, когда пользователю нравится та программа, с которой он привык работать.

Сама компания Microsoft всячески поощряет переход на новые версии Internet Explorer и в 2010 году прекратила поддержку IE6 и IE7.

Изящная деградация

Влад Мержевич

Конечно, Internet Explorer содержит большое количество ошибок в разных версиях, но с помощью условных комментариев с ними можно бороться, добиваясь их устранения. Но вот чего нельзя ничем исправить, так это то, что IE безнадёжно устарел. Пока остальные браузеры включают всё больше свойств CSS3, поддерживают различные новомодные технологии, IE топчется на месте. Выход IE9 не решит проблему, предыдущие версии от этого в одночасье не испарятся. В такой ситуации наилучшим решением будет изящная деградация (graceful degradation) — принцип сохранения работоспособности при потере части функциональности.

Режимы Internet Explorer

Влад Мержевич

Вокруг Internet Explorer сложилась ситуация, которая больше не прослеживается ни с одним другим браузером — разброс версий начинается с 6.0 и заканчивается 9.0. Причины использования устаревших версий могут быть совершенно разные.

  • Internet Explorer встроен в операционную систему Windows и неопытные пользователи даже не подозревают о наличии альтернативы.
  • Корпоративные пользователи с ограниченным доступом не могут самостоятельно обновить версию или сменить браузер.
  • Обновление IE до новой версии происходит через систему Windows Update, которая часто отключается по требованиям безопасности или для снижения интернет-трафика.
  • Некоторые приложения, например, банковские, могут быть «заточены» для работы только под конкретную версию IE.
  • В силу инерции мышления, когда пользователю нравится та программа, с которой он привык работать.

Как разместить слитно два изображения друг под другом?

Расположение изображений друг под другом часто продиктовано требованиями дизайна, когда необходимо «склеить» без швов несколько изображений в одну цельную картину. Обычно для переноса текста, а также изображений на другую строку применяется тег <br> или контейнер фиксированного размера, но в том и другом случае существуют свои особенности.

Два фона и больше

Влад Мержевич

В CSS 2 добавить одновременно два фона к одному элементу нереально, поэтому приходится вкладывать один элемент внутрь другого и для каждого задавать свой собственный фоновый рисунок. Для сложных макетов таких вложений иной раз можно насчитать около десятка. Понятно, что ни к чему хорошему такое нагромождение не приводит, но что делать? Оказывается, есть что! В CSS 3 можно одновременно добавлять несколько фоновых рисунков для любого элемента. Так что берем рисунок блока (рис. 1), режем его на части и начинаем тестировать в браузерах.

Как изменить вид написания чисел в списке и сделать, чтобы после каждого номера шла круглая скобка?

По умолчанию нумерованный список имеет определенный вид: вначале идет число, затем точка и после этого через пробел отображается текст. Такая форма написания наглядна и удобна, но некоторые разработчики предпочитают видеть другой способ оформления нумерации списков. А именно, чтобы вместо точки шла закрывающая скобка, как продемонстрировано на рис. 1.

Вид нумерованного списка со скобкой

Рис. 1. Вид нумерованного списка со скобкой

Как сделать паспарту?

Паспарту называется картонная рамка для фотографии или рисунка. Использование паспарту зрительно увеличивает изображение, привлекает к нему внимание и делает картину более эффектной. Конечно, на веб-странице нет нужды имитировать подобную рамку, поэтому паспарту в данном случае будем называть цветную прямоугольную область вокруг изображения. На рис. 1 продемонстрирована фотография с паспарту.

Пример паспарту

Рис. 1. Пример паспарту

Условные комментарии

Влад Мержевич

Любой текст в коде HTML можно закомментировать и при этом он никак не будет отображаться на веб-странице. Для этого его следует поместить между элементами <!-- и -->. Браузер Internet Explorer кроме того поддерживает специальный синтаксис, в задачу которого входит интерпретировать код, если перед нами Internet Explorer. Остальные браузеры при этом видят обычный комментарий и не отображают его.

<!--[if IE]>
Код для браузера Internet Explorer
<![endif]-->

Хаки для IE7

Влад Мержевич

В Internet Explorer 7 (IE7) по сравнению с предыдущей версией было исправлено большое количество ошибок. Однако появились новые ошибки, которые также требуют написание отдельного кода под эту версию браузера. Далее представлены хаки для седьмой версии браузера Internet Explorer.