Firefox 2 и HTML5

Сейчас для многих HTML5 это такой всеобщий «тренд» веб-разработки и просто «buzzword». Все сейчас радуются за новые и полезные семантические теги разметки <header>, <footer>, <section>, <article> и даже <aside>. Но не все ещё знают о том, какие проблемы с обратной совместимостью устаревших браузеров по-прежнему существуют.

Ослик

То, что Internet Explorer вплоть до 9 версии не умеет применять стили к неизвестным тегам без специальных ухищрений, давно известно. Для обхода этого недоразумения существует популярное решение html5shiv. Хитрость в том, чтобы динамически создать новый элемент, тогда explorer волшебным образом застайлит все последующие его вхождения.

Firefox 2

Куда менее известно о том, что Firefox 2 тоже не дружит с незнакомыми ему тегами:

Firefox 2 (а также любой другой браузер на движке Gecko версии младше 1.9b5) имеет баг в разборе HTML: все неизвестные теги принудительно закрываются, как только парсер встречает блочный элемент (p, h1, div и т.п. ).

На данный момент доля второй ветки FF в рунете и в мире составляет меньше процента (0.4%). В то время как доля IE6 в 10 раз больше — около 5%. Поэтому, неудивительно, что проблема кажется надуманной.

Тем не менее, если вы разрабатываете популярный ресурс с многотысячной посещаемостью, число таких людей будет исчисляться сотнями в неделю. Каждый из них вместо свёрстанного сайта увидит нечто совершенно непотребное и скорее всего сразу уйдёт. 

 

Есть несколько способов исправить проблему, со своими плюсами и минусами, как водится.

Деградация

Заменяем все новые теги на блочные <div> для Firefox 2. Придётся применить пресловутый browser sniffing, а значит есть риск ошибиться при разборе User Agent. Кроме того, стили и весь javascript не должен быть привязан к названиям тегов (вообще, это хороший стиль). Ну и кэшировать такие страницы придётся отдельно.

Переходим на XHTML

Отдаём фаерфоксу заголовок application/xhtml+xml и баг пропадает. Кроме того, что в данном методе присутствует browser sniffing, xhtml strict mode чреват тем, что из-за ошибочной вёрстки посетитель не увидит вообще ничего, кроме parse error (документ должен быть well-formed). Пример в блоге Remy Sharp

Используем JS

С помощью javasctipt можно обойти DOM-дерево и убрать лишние закрывающие теги, которые проставил Firefox. Готового решения нет, поскольку определить то, что тег закрыт преждевременно по ошибке нетривиально. Пример в блоге WHATWG.

Итого

Полезно заранее определить границы кроссбраузерности и определить степень поддержки тех или иных версий браузеров. Если вы планируете использовать новые теги в вёрстке, незначительная часть ваших пользователей увидят ваш сайт совсем не так, как вы этого могли ожидать, если об этом не позаботиться. Внедряя новые «примочки», полезно не забывать об обратной совместимости, ведь не все могут легко установить себе современный браузер.

, ,

Comments are closed.