В этой статье я расскажу о методах, которых избегают хорошие разработчики HTML. Не все так добросовестны, как читатели SitePoint; вы, вероятно, сталкивались с теми, кто с радостью принимает быстрые исправления, независимо от будущей боли, которую он причиняет.
Когда IE7 был выпущен, он сломал сайты, разработанные для IE6. Разработчики полагались на специфичные для IE6 методы, обходные пути и взломы, которые терпели неудачу в новом браузере. Многие сайты должны были быть исправлены. Разработчики заслуживают своей доли вины, но IE6 управлял на протяжении многих лет, поэтому неудивительно, что люди были раздражены изменениями. На Microsoft напали, хотя они только внедряли стандарты, которые мы требовали.
Чтобы избежать подобной обратной реакции в IE8, Microsoft ввела режимы совместимости документов. Если ваш сайт работает в IE7, но не работает в IE8, вы можете добавить на свою страницу следующий метатег:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> или отправьте заголовок HTTP:
X-UA-Compatible: IE=EmulateIE7
IE8 будет имитировать поведение IE7, и все снова будет работать волшебным образом. На момент написания IE9 содержал не менее восьми режимов совместимости документов, включая слегка странную настройку «IE5», которая отображает контент, как если бы он отображался в режиме причуд IE7, который похож на IE5. Дополнительные сведения см. В разделе «Определение совместимости документов в MSDN» .
Режим совместимости документов уникален для Internet Explorer. Другие браузеры не постигла та же участь, потому что:
- IE существует дольше, чем большинство его конкурентов, и развивался в период, когда стандарты W3C были в зачаточном состоянии. Другие поставщики с самого начала смогли использовать более стабильный набор функций HTML.
- Microsoft продает программное обеспечение предприятиям и имеет долгосрочные договорные обязательства. Другие поставщики могут добавлять, изменять или удалять функции, не сталкиваясь с юридическими или финансовыми последствиями.
- Двухлетние графики выпуска Microsoft IE неизбежно содержат более фундаментальные изменения, чем регулярные обновления для Chrome, Firefox, Safari и Opera.
Режимы совместимости были предназначены для быстрого исправления. Если вы столкнулись с проблемами после выпуска IE, вы можете временно использовать режим совместимости при обновлении кода.
Это случается? Посмотрите сегодня в Интернете, и вы найдете метатеги IE = EmulateIE7 повсюду. Я даже видел, как он используется на недавно выпущенных сайтах — в конце концов, проще ориентироваться на один движок рендеринга, чем пытаться кросс-браузерной разработки в IE7, 8 и 9.
Режим совместимости и IE9
Использование режимов IE5, IE7, EmulateIE7, IE8 или EmulateIE8 вызывает временную амнезию для IE9. Браузер забывает HTML5. Он теряет эффекты CSS3, такие как закругленные углы и тени от ящиков. Такие функции, как SVG, исчезают.
Тем не менее, это также вызывает неожиданные проблемы …
iframes и другие дочерние объекты
Давайте представим, что вы создали виджет HTML5. Он работает в IE7, 8 и 9, потому что вы добавили HTML5 shim:
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Другой разработчик теперь добавляет ваш виджет на свой сайт, используя iframe. Не самое элегантное решение, но оно быстрое и простое.
Вопрос: если родительская страница открывается в IE9, но использует IE = EmulateIE7, какой механизм рендеринга будет использовать страница iframed?
Ответ: родительская страница и все дочерние объекты, включая iframe, будут отображаться в режиме IE7. Даже если ваш виджет совместим с IE7 / 8, ваш виджет сломается, потому что:
- IE7, 8 и 9 визуализируют iframe в режиме IE7, но
- HTML5-шим загружается только в IE7 и 8.
Результат: IE7 / 8 работает как положено, но IE9 не работает.
Решение
Соблазнительно добавить переопределение режима совместимости к заголовку HTML вашего виджета, например
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Это не сработает. Родительская страница имеет общий контроль; он устанавливает режим рендеринга один раз и остается таким до тех пор, пока все ресурсы не загрузятся.
Насколько я знаю, есть только одно исправление — загрузите прокладку HTML5 во ВСЕХ версиях IE:
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Хотя IE9 и все будущие версии не требуют подкладки, вы не можете гарантировать, что ваш виджет никогда не появится на странице, где установлен режим совместимости.
Тьфу — я чувствую себя нечистым. Веб-разработка — это грязный бизнес.