Awebdesign's Blog

Что такое HTML5 SHIV – уроки HTML5

Автор John Resig, перевод Виктории Шидловской

Так как многие браузеры некоторое время не будут распознавать HTML5, нам нужно придумать способ строить страницы на HTML5 и заставить браузеры «видеть» его обходным путем. Для этого прибегнем к помощи JavaScript и CSS.

Итак, Internet Explorer не в состоянии применить стили к элементам, которые он не распознает. К примеру, следующий элемент — “blah” – не будет никак стилизован:

<html>
<head>
<style>blah { color: red; }</style>
</head>
<body>
<blah>Hello!</blah>
</body>
</html>

Результат:

HTML5 shiv - учебник HTML5

Благодаря Sjoerd Visscher у нас теперь есть одна интересная техника, с помощью которой можно заставить IE применять стили к необходимым элементам. Если вы создадите новый DOM-элемент (с тем же именем, что и восновном документе), то листы стилей заработают. Вам даже не нужно вставлять этот элемент в документ для того, чтобы стили сработали. Пример:

<html>
<head>
<style>blah { color: red; }</style>
<script>document.createElement(«blah»)</script>
</head>
<body>
<blah>Hello!</blah>
</body>
</html>

Результат:

HTML5 shiv - учебник HTML5

Это очень важно. Это значит, что мы теперь можем применять стили к элементам HTML5, не распознанным Интернет Эксплорером.

Элемент <figure/>

Взгляните на простой пример. Претворимся, что хотим применить HTML 5 figure element. Элемент очень простой, только требует небольшой стилизации. (Не уверен, как элемент figure должен конкретно выглядеть, просто беру картинку для примера):

<html>
<head>
<style>
figure { border: 1px inset #AAA; padding: 4px; }
</style>
<script>document.createElement(«figure»);</script>
</head>
<body>
<figure>
<img src=»http://ejohn.org/files/jeresig-wordpress-sm.jpg»/>
</figure>
</body>
</html>

Результат:

HTML5 shiv - учебник HTML5

С помощью CSS и простой JavaScript DOM формулы мы смогли внедрить хотя бы часть спецификации HTML5. Хоть это и не решение всех проблем, но уже многообещающая техника.

Я попытался применить ее к некоторым элементам, уже определенным в IE. К примеру, я решил создать legend child element. Применить стили к нему было действительно трудно, так как функциональность и применение стилей к легендам уже определены для элементов fieldset в Internet Explorer. В моих простых тестах, если legend element находился вне полей формы, он никак не стилизовался.

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

Читайте далее

HTML5 SHIV теперь в виде скрипта!

HTML5 – введение в новый язык разметки

Уроки HTML5 – создаем макет

Если хотите понять причины засилия минимализма, массового перехода с флэша на ява-скрипт и jQuery, истерию вокруг HTML5, а также разобраться во Второй Холодной войне между Apple и Microsoft – читайте статью «Почему минимализм, или какой сайт делать»

комментариев 7

Subscribe to comments with RSS.

  1. internet said, on 13.04.2013 at 10:12 дп

    Thanks for one’s marvelous posting! I seriously enjoyed reading it, you might be a great author.I will be sure to bookmark your blog and will come back very soon. I want to encourage that you continue your great writing, have a nice morning!

    Нравится

  2. GOJA said, on 07.04.2013 at 1:23 пп

    Думаю, такие костыли уже не актуальны на сегодня. Не может браузер HTML5 ну и не надо. Не стоит оно того. Делайте сайты в HTML5 и не заморачивайтесь.

    Нравится

  3. Armen said, on 05.11.2010 at 11:25 дп

    java rulit:) HTML5 xarosh kanechno no JSF 2.0 luchshe!

    Нравится

  4. Vesnarema said, on 03.05.2010 at 1:54 дп

    Уважаемый админ сайта: awebdesignsblog.wordpress.com, хочу разместить у вас рекламу, свяжитесь пожалуйста со мной.

    Нравится

  5. Rill said, on 17.04.2010 at 4:30 дп

    Да я верю в НЛО ) Да мне снеснятся зеленые человечки в белых бикини =)

    Нравится


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

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

Логотип WordPress.com

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

Фотография Twitter

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

Фотография Facebook

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

Google+ photo

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

Connecting to %s

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