Насколько целесообразно использовать HTML5 тэги

[alanvanduke]

Добрый день. Решил пробовать переходить на новый стандарт. Раньше много читал про формат HTML5, но не услышал утвердительных ответов на вопросы:

• Одиночные теги требуют закрытия то есть <br />
  
• Какие браузеры и начиная с каких версий поддерживают новые теги <header>, <footer>
  

И подскажите, пожалуйста, проверенные хаки (для поддержки формата HTML5 старыми браузерами), которые можно с уверенностью применять в реальных проектах.

Заранее спасибо.

[Great Rash]

Одиночные теги требуют закрытия то есть <br />

В новом стандарте пофиг как писать.

Какие браузеры и начиная с каких версий поддерживают новые теги <header>, <footer>

Любые более-менее современные браузеры уровня ИЕ6 (со специальным яваскриптом, который укажет браузеру, что это блочные элементы).

И подскажите, пожалуйста, проверенные хаки (для поддержки формата HTML5 старыми браузерами), которые можно с уверенностью применять в реальных проектах.

http://html5shim.googlecode.com/svn/trunk/html5.js

[s0rr0w]

• Одиночные теги требуют закрытия то есть <br />
  
• Какие браузеры и начиная с каких версий поддерживают новые теги <header>, <footer>
  

И подскажите, пожалуйста, проверенные хаки (для поддержки формата HTML5 старыми браузерами), которые можно с уверенностью применять в реальных проектах.

Заранее спасибо.

1. Пофиг. Валидно и так и так.

2. Новые теги поддерживают IE9, FF4, Опера 11, Хром 9

для FF3.x - нужнен css-хак header { display: block }

для IE7,IE8 нужен JS-хак document.createElement("header");

Применять можно.

[alanvanduke]

Спасибо большое. Если есть еще какие ни будь уже наработанные особенности, связанные с этим форматом - буду рад узнать.

[swetlana]

Основное уже написали выше.

Ещё одна важная особенность:

ФФ версии до 4 имеет особенность считать себя умнее всех, и время от времени перекраивает DOM в соответствии со своими взглядами.

Решается эмпирически. Надо в каждом проекте просто внимательно смотреть на поведение этого чудо-браузера, да при необходимости корректировать.

[s0rr0w]

Основное уже написали выше.

Ещё одна важная особенность:

ФФ версии до 4 имеет особенность считать себя умнее всех, и время от времени перекраивает DOM в соответствии со своими взглядами.

Решается эмпирически. Надо в каждом проекте просто внимательно смотреть на поведение этого чудо-браузера, да при необходимости корректировать.

Никогда такого не замечал. Может проблема не в FF?

[swetlana]

хорошо, приведу пример. Из недавней работы.

Есть элемент <figcaption>.

Читаем спеку: http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-figcaption-element

внимательно читаем строку «Content model: Flow content.».

Проходим по ссылке и читаем, что же такое Flow content: http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html#flow-content

a abbr address area (if it is a descendant of a map element) article aside audio b bdi bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label link (if the itemprop attribute is present) map mark math menu meta (if the itemprop attribute is present) meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style (if the scoped attribute is present) sub sup svg table textarea time ul var video wbr text

Замечаем среди этого великолепия <article> и полный набор заголовков.

То есть, по спецификации спокойно можно ставить <article> и <h3> внутрь <figcaption>.

Если провести тест, всё и будет как задумано.

Читаем спецификацию дальше. На этот раз про <a>: http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-a-element

Обращаем внимание: «Content model: Transparent, but there must be no interactive content descendant.»

интерактивных элементов в тесте не присутствует, а про transparent тоже почитаем ещё внимательно: http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html#transparent

то есть, пофикк. Что допустимо в родителе, то и в <a>.

Казалось бы, <a> можно ставить спокойно куда угодно. Например, внутри <figcaption> обернуть <article>. По спецификации так можно делать. И мне в одном из недавних проектов было удобно сделать так.

И что же сделал ФФ?

А сделал он чёрт знает что:

Просто переколбасил DOM так, как ему захотелось.

При этом все остальные браузеры (и даже IE странных версий) отобразили всё как надо.

В ФФ4 при этом уже всё нормально.

Вот я о такого рода случаях. Это частный пример, но уже доводилось сталкиваться с аналогичными не раз.

[s0rr0w]

И что же сделал ФФ?

А сделал он чёрт знает что:

Просто переколбасил DOM так, как ему захотелось.

Странно требовать от трехлетнего браузера соответствие спецификации html5.

Насчет изменения DOM-дерева- это допустимо.

[psywalker]

Странно требовать от трехлетнего браузера соответствие спецификации html5.

Насчет изменения DOM-дерева- это допустимо.

А это не означает разве, что опасно использовать HTML5 в проектах?

[swetlana]

Странно требовать от трехлетнего браузера соответствие спецификации html5.

ну вообще-то сама спецификация разрабатывается уже давнее.

А мозильная команда позиционирует себя как прогрессивная.

Насчет изменения DOM-дерева- это допустимо.

Очень спорно.

Таким образом получается, что разработчик теряет контроль над результатом своей работы.

Правильным был бы один из последовательных и непротиворечивых подходов: либо делаем всё по правилам, не допуская никаких ошибок (любое несоответствие спеке — синий экран смерти), либо же допускаем несоответствие, обрабатываем в меру своего понимания, но с максимальным соответствием задумке автора.

А в данном случае ФФ действительно ведёт себя непоследовательно, нелогично — пытается сделать хорошую мину при плохой игре. Перекраивает DOM, якобы считая структуру ошибочной, при этом другие ошибки спокойно пропускает.

По какой спецификации он вообще работает? По каким правилам?

А это не означает разве, что опасно использовать HTML5 в проектах?

нет.

Это означает, что опасно не тестировать.

[psywalker]

нет.

Это означает, что опасно не тестировать.

А в каких именно моментах нужно или желательно тестировать?

[swetlana]

Капитан Очевидность подсказывает, что тестировать нужно весь сайт во всех моментах

[SelenIT]

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

В FF2 вообще вкладывать что-либо блочное в "незнакомые" теги можно было только в application/xhtml+xml. В FF3, насколько я понимаю, сделали некий компромисс — грубо говоря, если первый же потомок строчного/непонятного очевидно блочный, то со скрипом натянуть это строчное/непонятное на него, а если нет (потомок тоже строчный/непонятный) — действовать, как привыкли. В Опере, по-моему, по большому счету тоже, хотя и чуть "поинтеллектуальнее" (когда-то натыкался на обсуждение этого "новшества" мозилловцами, но сейчас сходу не нашел — видимо, затерялось за давностью)...

Так что лично я бы в проектах для серьезного заказчика™ с новыми тегами чуть повременил, вынужденно довольствуясь добрыми старыми дивами с соотв. классами (как когда-то HTML5-доктора советовали). Еще месяца три хотя бы. Зато уже к концу года браузеры с новым парсером составят не менее 70% рынка, и наступит всем счастье!

[psywalker]

Так что лично я бы в проектах для серьезного заказчика™ с новыми тегами чуть повременил, вынужденно довольствуясь добрыми старыми дивами с соотв. классами (как когда-то HTML5-доктора советовали). Еще месяца три хотя бы. Зато уже к концу года браузеры с новым парсером составят не менее 70% рынка, и наступит всем счастье!

Опаачкии, вот как мы заговорилии, а ведь кто то раньше советовал не боятся и смело переходить на HTML5. Как вы это объясните?

[Great Rash]

А вот я говорил всегда, что сырая эта технология еще. А уж CSS3 так вообще...

[swetlana]

осторожность — это однозначно хорошо, но в разумных пределах.

В отдельных случаях действительно имеет смысл писать на старом добром html4, но это именно отдельные случаи.

[psywalker]

А вот я говорил всегда, что сырая эта технология еще. А уж CSS3 так вообще...

И походу был прав

осторожность — это однозначно хорошо, но в разумных пределах.

В отдельных случаях действительно имеет смысл писать на старом добром html4, но это именно отдельные случаи.

А я не хочу о каждом случае размышлять, отдельный ли он или нет, я хочу спокойно писать код и не парится, зная, что я на 100% в нём уверен.

[swetlana]

…кто то раньше советовал не боятся и смело переходить на HTML5…

а чего его бояться?

вот уж его бояться не следует точно.

Это всего-навсего описанное в виде спецификации реальное положение вещей. И плюс некоторые плюшки.

Опять тут кэп подсказывает, что применять те или иные возможности языка можно лишь в том случае, если они корректно воспринимаются и обрабатываются браузером.

И это касается как html5, так и html4.

[Serlutin]

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

Edited March 18, 2011 by Serlutin

[SelenIT]

Я пропагандировал (и сейчас активно пропагандирую) новый доктайп, атрибуты типа autocomplete и data-что-угодно, вышеупомянутые блочные ссылки и т.п. — то, что и так давно работает везде, а по новому стандарту еще и валидно. За немедленное повсеместное внедрение новых тегов, новых элементов форм и прочих соблазнительных, но пока сильно экспериментальных вещей я никогда не ратовал. Спека большая, можно брать из нее те части, котороые лучше устоялись и лучше отвечают текущим практическим запросам — прагматично, без фанатизма (а там и не заметишь, как и другие части подтянутся). Просто остальные спеки, как правило, отвечают этим запросам еще хуже...

[swetlana]

Ой, да ладно. Нашли одну ошибку в FF и всё. Технология нестабильна,…

Просто ошибка значительная.

А про «технология нестабильна» — так будут говорить и после исправления этой ошибки в ФФ.

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

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

Вот и ругают новые технологии, в которых старые познания невостребованы.

По этой же причине многие сейчас в штыки воспринимают идею отказа от ИЕ6.

[SelenIT]

Имхо, есть замечательная и наглядная вещь CanIUse.com. Накладываем ее на свою (оринтировочную) статистику и смотрим: если ярко-зеленый явно преобладает — смело юзаем фичу, если же красные пятна расползаются больше чем на 10% — лучше повременить... месяцок-другой. И пользователи целы, и разработчик сыт.

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

Вот и ругают новые технологии, в которых старые познания невостребованы.

Имхо, извраты будут востребованы еще о-о-очень долго. Полет фантазии дизайнеров всегда будет на два шага обгонять штатные технические возможности: дали нам простые тени — дизайнеры захотят сделать их текстурными, дали круголки — дизайнеры захотят выгибать их внутрь и украшать барочными завитками, и т.д., и т.п. А тем более, когда отовсюду доносятся отголоски войны префиксов (а с безверсионной моделью развития префиксы будут всегда). А тут еще массовые 3D-экраны на подходе, штатные средства в CSS для этого появятся хорошо если года через три, а дизайнеры захотят сразу...

[Great Rash]

Ой, да ладно. Нашли одну ошибку в FF и всё.

Пока одну... а там хз чо вылезет.

[SelenIT]

а там хз чо вылезет.

Уже не вылезет. Не успеет

[psywalker]

SelenIT

Понял, спасибо. А расскажи плиз поподробнее вот об этом сервисе http://caniuse.com/#cats=HTML5