html5 и css3. Часть 1

html5Доброго времени суток.

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

В голову пришла одна связка — html5 + css3. А что? Я ведь относительно недавно верстал свой шаблон, и верстал его в html5, с использованием этого самого css3. Объясню, почему я выбрал этот новый, еще, по сути, не распространенный стандарт. Правда, сначала придется написать, почему его можно было НЕ выбирать, как делают многие вебмастера.

Все дело в том, что многие наверняка слышали, что «html5 будет готов в 2022 году«. На самом деле, в этом самом 2022 году html5 получит статус «proposed recommendation», а это значит лишь то, что к этому времени все разумные разработчики браузеров просто обязаны внедрить поддержку html5 в свои продукты. А повсеместное использование стандарта начнется в 2012 году, когда ему присвоят статус «candidate recommendation».

Так вот, учитывая, что большую часть возможностей html5 УЖЕ поддерживают новейшие версии браузеров Mozilla Firefox, Opera и Google Chrome (а еще обещают поддержку стандарта в готовящемся IE9), я подумал, что пора набивать руку, строча код под новый стандарт.

«И что, просто послать пользователей, например, IE7, IE8?» — спросите вы, ведь этот браузер не поддерживает новые элементы страницы (section, nav, time, aside, footer и другие, о них подробнее — позже) и просто их игнорирует. Конечно же нет. Я бы с удовольствием так сделал, если бы этих самых пресловутых юзеров пресловутого IE7 (IE8) было мало.

Для нормального отображения сайта, сверстанного в html5, народными умельцами написан нехитрый яваскрипт, который вы найдете у меня на блоге:

<!--[if IE]>
<script type="text/javascript" src="http://frutality.ru/wp-content/themes/frutality/iehack.js"></script>
<![endif]-->

Также, в файл стилей необходимо добавить строку, определяющую элементы html5 в виде блочных:

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

Итак, пользователей IE мы не обделили. Конечно, они не видят в своем браузере всех красот css3 (закругленных углов, теней и т.д.), но блог никуда не разъехался, все блоки на месте — а значит материал читабелен. В конце концов, пользователь, зашедший на сайт через IE, никогда, ну или нескоро узнает, как сайт выглядит на самом деле :)

С кроссбраузерностью мы проблему решили. Кстати, пару слов о ней хочется сказать. Верстая сайт в html5, я с огромным удивлением обнаружил, что ни одного различия в отображении основных элементов в новейших версиях Firefox и Opera я не вижу. Эта мысль мень весьма порадовала — не зря получают свои деньги разработчики этих браузеров, все-таки не хочется использовать под каждый браузер свои уловки, хаки, чтобы сайт отображался одинаково правильно.

Кстати, я думаю, важно знать, в чем же принципиальное отличие html5 от html4. Дело в том, что в предыдущей версии языка гипертекстовой разметки страница просто разбивается на элементы. Параграфы, блоки, таблицы, ячейки таблиц и т.д. Абсолютно одинаковые блоки (div’ы, к примеру) используются для самых разных вещей — отдельным div’ом может быть шапка, футер, пост, изображение, да что угодно. Тем же поисковым системам сложно выделить — что является контентом, что — элементами меню, что — футером. Результатом этого бывает, что в выдачу попадает текст из футера сайта, а контент — не попадает.

В html5 же, присутствует несколько типов элементов, которые, по сути, являются тем же самым div’ом, но предназначены для конкретных элементов страницы — footer для нижней части, header для шапки, aside для сайдбара и т.д. Таким образом, структура страницы становится удобнее для «понимания» — поисковик будет скорее выдавать результаты в выдаче из элемента article, чем из footer. Это, конечно, еще не внедрено, но в теории — должно использоваться в обозримом будущем.

Вступительная часть цикла статей о html5 и css3 подходит к концу. Надеюсь, что я подтолкну хотя бы одного человека к переходу с html4 на html5 — ведь за ним будущее. Во второй части цикла я рассмотрю часть новых элементов страницы, подготовлю несколько иллюстраций (для наглядности).

Ну а сейчас, пойду выпью кружечку чая и продолжу чтение интересной книги за авторством Ника Перумова — «Череп в небесах». Всего вам доброго!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>