HTML5 – работает уже сегодня


Доктайп и новые таги

HTML5 – работает уже сегодняНа самом деле больше ничего и не изменилось. Ну, кроме, соответствующих изменений в CSS блога.
Доктайп не может не радовать, тем что его впервые в жизни можно выучить наизусть (невалидные не предлагать, я приличный верстальщик):

  1. <!DOCTYPE html>

Класс, да? =)

В HTML5 ввели несколько структурных тагов, собственно, они — почти единственное, что можно использовать из нового стандарта прямо сейчас. Потому я просто немного переписал HTML для блога, чтобы он стал более понятным.
Самые приятные новые таги будут: <header>,<footer>,<nav>,<article> — говорят сами за себя.

<aside> — вторичный контент, то, что обычно в сайдбаре.

<section> — какой-то смысловой раздел документа.

Собственно переход

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

  1. <!‐‐ BEGIN .hentry ‐‐>
  2. <div class=’hentry’>
  3. content
  4. </div>
  5. <!‐‐ END .hentry ‐‐>

То стало:

  1. <article class=’hentry’>
  2. content
  3. </article>

И комментарии вобщем излишни. Я и класс-то оставляю только ради микроформатов, но по-хорошему они должны будут понимать и сам таг article.
Таким же образом боковая колонка:

  1. <!‐‐ BEGIN .secondary ‐‐>
  2. <div class=’secondary’>
  3. боковая колонка
  4. </div>
  5. <!‐‐ END .secondary ‐‐>

превращается в:

  1. <aside>
  2. боковая колонка
  3. </aside>

И если все показать целиком:

HTML5 – работает уже сегодня

Их же можно увидеть если сделать View Source на этой страничке сейчас.
Есть в этом какая-то красота :) .

На самом деле оставшиеся классы и айди почти полностью мог бы заменить суперсемантичный атрибут role, но атрибутивные селекторы пока не всем доступны. А было бы красиво:

  1. <section role=”maincontent”>

А в CSS:

  1. section[role=maincontent] {
  2. bla:bla;
  3. }

Код почти читается.

Оговорки в использовании

IE по умолчанию не будет давать возможности стилизовать новые таги. Однако, с помощью джаваскрипта его можно заставить (возможно кто-то помнит, как это было с <acronym>):

  1. <!‐‐[if IE]>
  2. <script>
  3. document.createElement(’header’);
  4. document.createElement(’footer’);
  5. document.createElement(’section’);
  6. document.createElement(’aside’);
  7. document.createElement(’nav’);
  8. document.createElement(’article’);
  9. </script>
  10. <![endif]‐‐>

Это все новые таги, которые я использовал для блога.

Вторым нюансом является то, что эти элементы во всех браузерах по умолчанию будут инлайновыми. То есть вам придется написать в CSS что-то вроде:

  1. header, nav, article, footer,section {
  2. display:block;
  3. }

С этим можно жить.

Третий и последний нюанс. Некоторые браузеры (Camino, Firefox2) будут некорректно строить DOM c новыми тагами. Чтобы решить этот вопрос, по злой иронии, вам придется отсылать вашу HTML5 страничку с контент-тайпомapplication/xhtml+xml. Но я голосую за вариант: «Наплевать».

Сладкое

В HTML5 добавили таги <video> и <audio>:

  1. <video src=’xxx.yyy’ autoplay controls>
  2. <a href=”xxx.yyy”>Download this video (или другой альтернативный контент, если видео на загрузится)</a>
  3. </video>

Вот так выглядят сейчас дефолтовые проигрыватели видео в браузерах:

HTML5 – работает уже сегодня

В Сафари, не очень красивые дефолтовые контролы

HTML5 – работает уже сегодня

В Firefox 3.5b

Opera решила выпустить только одну версию своего браузера поддерживающую <video>. Потому чтобы увидеть видео в действии вам понадобится даунгрейдиться до 9.52. Спасибо @pepelsbey из Оперы за разъяснения ;)
Однако, вот так выглядит там проигрывание видео:

HTML5 – работает уже сегодня

В Opera 9.52, на иконку «Пауза» я навел курсор.

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

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

О том как использовать HTML5-видео уже сейчас читайте дальше.

Ссылки

Не стоит расстраиваться что HTML5 еще не стандарт, и получит статус «Proposed recommendation» лишь в 2022 году. Он уже частично поддерживается браузерами, и большие компании начинают с ним играться. Поиграйтесь и вы. ;)
На самом деле войдет в обиход гораздо раньше, не стоит пугаться 22го года.

Если с переходом на HTML5 что-то поломалось, я буду рад это услышать! Уж больно гладко все. Я даже прошел валидацию.
И, да, это все пока лишь эксперименты. Не для серьезного использования, конечно.

Но, с HTML5 снова стало приятно расставлять таги. Всё как в первый раз. :)

Реклама

Один ответ

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход /  Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход /  Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход /  Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход /  Изменить )

w

Connecting to %s

%d такие блоггеры, как: