Internet Explorer: возможно ли примирение?

Многие наслышаны, что в среде веб-разработчиков сложилось, мягко говоря, особое отношение к браузеру Internet Explorer — детищу фирмы Microsoft. Попробуем, отбросив в сторону лишние эмоции, обрисовать причины явления и систематизировать принятые в повседневной практике способы решения существующих проблем.

Корни зла

Несмотря на исторически сложившиеся своеобразные, скажем так, взаимоотношения фирмы Microsoft с веб-стандартами, справедливости ради нужно заметить, что, в общем-то, каждая версия IE являлась пусть далеко не идеальным, но все же вполне сносным браузером для своего времени. Более того, в последние годы ситуация заметно изменилась к лучшему — на фоне все нарастающей конкуренции со стороны производителей альтернативных браузеров разработчики Internet Explorer стали гораздо более внимательно относиться как к технологическим спецификациям и тенденциям их развития, так и к потребностям пользователей.

«Горячая любовь» веб-разработчиков к IE обусловлена в основном не какими-то из ряда вон выходящими изъянами относительно новых версий браузера, а тем, что в силу ряда обстоятельств среди интернет-пользователей до сих пор широко распространены версии Internet Explorer родом, не будет преувеличением сказать, из доисторической эпохи.

Что же это за обстоятельства?

Internet Explorer — одно из стандартных приложений в операционных системах семейства Windows. Хорошо это или плохо, но в сегменте операционных систем для персональных компьютеров Windows долгие годы сохраняет позиции абсолютного лидера, обладая на текущий момент распространенностью порядка 90%.

Для того, чтобы в Windows воспользоваться каким-либо альтернативным браузером, необходимо приложить определенные усилия, связанные с его установкой и настройкой. И целесообразность этих усилий, скажем прямо, далеко не всегда очевидна как индивидуальным пользователям, так и системным администраторам в компаниях.

Усугубляет ситуацию то, что Internet Explorer, в отличие от альтернативных браузеров, глубоко интегрирован в операционную систему. С этим связаны многие существенные технические ограничения, например, невозможность использования девятой и последующих версий IE в Windows XP — к настоящему моменту морально устаревшей, но все еще весьма распространенной версии Windows.

Впрочем, далеко не все пользователи, привыкшие относиться к Internet Explorer как к любому другому стандартному компоненту Windows, спешат обновлять версию IE даже в том случае, когда технически такая возможность существует.

К сожалению, и сами по себе новые версии Internet Explorer выпускаются, мягко говоря, не слишком часто. Вспомним то, что актуально сейчас: шестая версия появилась в 2001 году, седьмая — в 2006-м, восьмая — в 2009-м, девятая — в 2011-м, десятая пока находится в разработке. При этом сборки IE в пределах одного поколения (например, 8.0.*.*) не отличаются друг от друга в смысле особенностей отображения веб-страниц; изменения сводятся главным образом к латанию дыр в безопасности.

Есть надежда, что пятилетние перерывы между ближайшими поколениями IE (как в случае с шестой и седьмой версиями) больше не повторятся — Microsoft уже не может себе позволить такой роскоши. Монопольное положение Internet Explorer (сложившееся тогда, в первой половине 2000-х) на рынке браузеров утрачено, и очень хочется верить, что навсегда. Но все же вряд ли Microsoft в обозримом будущем сумеет угнаться за производителями альтернативных браузеров. Обычный темп выпуска их новых версий — в среднем один раз в несколько недель. При этом, благодаря продуманным системам автоматического обновления и кроссплатформенности, у большинства пользователей всегда оказываются установленными последняя-предпоследняя версии их любимых браузеров вне зависимости от разновидности и версии применяемой операционной системы.

Пути выхода

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

Вариант без компромиссов

Одна из давних мер обеспечения в IE требуемых визуальных эффектов любой ценой — использование экстра-разметки. Навязший в зубах хрестоматийный пример — создание скругленных уголков у блока при помощи четырех вложенных в него абсолютно спозиционированных при помощи CSS элементов <div> (ну, или <span>; хотя находятся и оригиналы, «для краткости» использующие элементы наподобие <i>, не являющиеся «стерильными» с точки зрения семантики) с фоновыми картинками, имитирующими требуемые скругления:

<div id="some-special-block">
Содержимое блока
<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>
</div>

В вышеприведенном примере кода экстра-разметка представлена блоками с классами tl (top left), tr (top right), bl (bottom left), br (bottom right). Такое может быть актуально для IE вплоть до версии 8, не понимающего CSS3-свойства border-radius.

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

Индивидуальное меню

Даже если постараться обойтись без экстра-разметки, предназначенной специально для Internet Explorer, сколько-либо сложная верстка наверняка потребует каких-то специфичных для IE конструкций в CSS-коде.

Так, многие баги в Internet Explorer версий 6 и 7 устраняются принудительным изменением внутреннего эксплореровского флага hasLayout, которым можно управлять только опосредованно при помощи ряда вполне стандартных CSS-свойств (например, position, width и height), но чаще всего на практике используется нестандартное свойство zoom, которое удобно тем, что, будучи примененным со значением 1, не оказывает на соответствующий элемент никаких побочных влияний:

#some-special-block {zoom: 1;}

Internet Explorer — явный лидер по количеству разнообразных хитрых нестандартных штуковин, позволяющих добиваться тех или иных визуальных эффектов. Здесь можно упомянуть фильтры, экспрешны (expressions), свойство behavior. Беда только в том, что в проблемных версиях IE недоступны стандартные альтернативы…

Вот пример использования фильтра, применение которого делает блок полупрозрачным:

#some-special-block {filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);}

Стандартный способ решения проблемы — CSS3-свойство opacity со значением 0.5, примененное к соответствующему элементу, — не работает в IE до восьмой версии включительно.

Так или иначе, все хаки, предназначенные только для IE, принято изолировать от основного чистого и благородного кода, рассчитанного на браузеры, уважительно относящиеся к духу современных веб-стандартов, при помощи условных комментариев (conditional comments):

<link rel="stylesheet" href="all.css">
<!--[if IE]><link rel="stylesheet" href="ie.css"><![endif]-->
<!--[if lt IE 8]><link rel="stylesheet" href="old-ie.css"><![endif]-->

Вышеприведенный пример иллюстрирует фрагмент HTML-кода, в котором подключаются внешние файлы таблиц стилей. Файл all.css применяется для всех браузеров без исключения. Две следующие строки кода, имеющие синтаксис HTML-комментария, будут закономерно проигнорированы всеми браузерами. Всеми, кроме IE. Файл ie.css будет применен в дополнение к файлу all.css любыми версиями Internet Explorer, а файл old-ie.css, в дополнение к двум вышеупомянутым файлам, будет применен в IE устаревших версий (c номером меньше 8).

Таким же образом можно изолировать экстра-разметку.

Ожидается, что механизм условных комментариев будет упразднен в десятой версии Internet Explorer — иными словами, IE10, как и альтернативные по отношению к IE браузеры, будет интерпретировать эти конструкции как обычные HTML-комментарии. Веб-разработчикам отныне предлагается не зацикливаться на конкретных разновидности и номере версии браузера, а проверять его фактические возможности, что в идеологическом плане, конечно же, очень правильно. Разумеется, условные комментарии еще долго будут использоваться веб-разработчиками для облегчения мирного сосуществования с проблемными версиями IE, но уже очевидно, что постепенно они уйдут в историю. Конечно, такое развитие событий было бы невозможно, если бы фирма Microsoft не повернулась в сторону веб-стандартов, и практика разработки сайтов «под эксплорер» продолжилась бы и далее в духе «хак на хаке и хаком погоняет».

Не идти на поводу

Наиболее идеологически верной (но, к сожалению, далеко не всегда приемлемой с точки зрения требований, предъявляемых заказчиками) представляется практика веб-разработки в соответствии с принципом graceful degradation.

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

Сайт, разработанный в рамках следования этому принципу, отображается со скругленными уголками у блоков, с фоновыми градиентами, с тенями под блоками и/или текстом, c хитрыми шрифтами, с плавно изменяющейся подсветкой ссылок, с динамически изменяющимися размерами и размещением элементов при различных ширинах окна — но только в новейших браузерах. В IE8 всех этих красивостей не будет — углы останутся прямыми, на месте градиентов окажется однотонная цветовая заливка, но общие черты сайта не пропадут, текст на страницах сохранит читаемость. По-моему, это вполне разумная плата за «упертость» конкретного пользователя в верности морально устаревшему браузеру при наличии вполне доступных альтернатив лучшего качества. Graceful degradation — лучше, чем бесконечные хаки, костыли и сделки с совестью…

Артемий Ломов, WebHiTech