Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Html5 » Oformlenie-css-dlya-novyx-tegov-html5

Оформление стилей для новых элементов

Оформление CSS для новых тегов HTML5 является очень увлекательным занятием. Оформлять внешний вид структурных элементов также просто, как и блочных. Единственное надо отметить, что по умолчанию в CSS все элементы являются строковыми (display:inlinе), чтобы это исправить нужно указать что элемент является блочным (display:block). После этого можно смело задавать высоту и ширину элемента, поля и отступы, как для блочного элемента div. Указать, что элемент является блочным можно вот так:

header, nav, footer, article {display:block;}

После того как вы задали все значения для новых элементов наша страничка HTML5 готова! Она будет отображаться одинаково во всех браузерах, кроме одного. Как вы наверное догадались — это Internet Explorer 8-ой версии и ниже. Более того, все элементы вообще не будут оформлены. Дело в том, что браузер Internet Explorer вообще никак не поддерживает новый стандарт HTML5. Но не огорчайтесь, можно обмануть IE при помощи JavaScript.

CSS для Internet Explorer

Я вам покажу три способа, как можно обмануть IE.

Первый способ:
Нужно добавить следующий скрипт между тегами <head></head>, но при условии, что в разметке документа есть тег body:

<script>
document.createElement('header') ;
document.createElement('nav') ;
document.createElement('article');
document.createElement('footer') ;
</script>

И помните если вы хотите внести другие неизвестные браузеру IE элементы, то придется добавлять к скрипту новую надпись document.createElement(‘Новый элемент’). После этого стили, применяемые к новым элементам, начнут волшебным образом работать.

Второй способ:
Согласитесь, каждый раз добавлять новый элемент не совсем удобно. Поэтому на то же самое место можно вставить другой скрипт, который написал Реми Шарп:

<!--[if lt IE 9]>
<script>
var e = ("abbr,article,aside,audio,canvas,datalist,details," +
"figure,footer,header,hgroup,mark,menu,meter,nav,output," +
"progress,section,time,video").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->

Третий способ:
Самый простой из вышеупомянутых способ. Реми Шарп уменьшил этот скрипт и разместил его на одном из сайтов. Теперь каждый может воспользоваться и загрузить скрипт на прямую с самого сайта:

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/
svn/trunk/html5.js"></script>
 <![endif]-->

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

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



наверх