Уроки HTML5 – создаем макет
Перевод Виктории Шидловской статьи из журнала Smashing Magazine — Coding A HTML 5 Layout From Scratch
HTML5 и CSS3 все еще находятся в разработке, вот почему мы не можем применять их для рабочих проектов прямо сейчас. Тем не менее, доказано временем, что незавершенная спецификация все равно работает. Но при ее внедрении нужно пользоваться определенными приемами, в нашем случае это будут: Прогрессивное улучшение и Вежливое ухудшение.
Поэтому сегодня мы научимся применять эти две техники. После этого урока вы сможете:
- Использовать Вежливое ухудшение для того, чтобы вещи оставались на своих местах при отображении в действующих браузерах.
- Использовать Прогрессивное улучшение, чтобы оставаться на острие событий.
- Использовать HTML5 вместе с быстро-растущей технологией Microformats.
- Иметь четкое представление о самых замечательных возможностях, которые обещает нам появление HTML5 и CSS3.
Для начала лучше прочитать следующие статьи:
HTML5 – введение в новый язык разметки
HTML5 SHIV теперь в виде скрипта!
Я также расчитываю на то, что вы знаете основы HTML, CSS, включая все «старые» тэги и свойства.
До того, как мы начнем…
Есть пара вещей, которые вы должны знать о HTML5. Дело в том, что этот язык не для всех. Поэтому вы должны тщательно выбирать, где и когда его применять. Думайте о всех способах разметки, как об инструментах, которые находятся в вашем распоряжении и используйте нужный инструмент в нужном месте. Так что если, предположим, ваш документ написан на XHTML strict, то нет никакой необходимости переписывать его на HTML5.
Также необходимо помнить, что использование HTML5 прямо сейчас ввергает вас в состояние неопределенности, потому что даже если ваш браузер обрабатывает HTML5, это не значит, что он его понимает. То же самое касается скринридеров и поисковых роботов.
Так что если вы готовы сделать шаг вперед, не боитесь использовать новые технологии, то продолжайте читать.
Несколько слов о Прогрессивном улучшении и Вежливом ухудшении
Итак, что означают эти термины? Вежливое ухудшение – широко распространенная техника, когда сначала используют новейшую технологию, а потом подгоняют ее под старые браузеры. Мы делаем это ежедневно. Большинство из нас сначала пишут код под Firefox, а потом фиксируют и исправляют ошибки под Explorer. Это и есть Вежливое ухудшение в действии.
Прогрессивное улучшение – это манера сначала строить документ для менее развитого браузера, а потом подтягивать под новейшие технологии. Мы также используем этот прием каждый день. К примеру, мы начинаем с разметки документа в HTML, а потом применяем к нему листы стилей. Это Прогрессивное улучшение в действии.
Обе техники идут рука об руку и являются частью работы, которую мы выполняем годами.
1. Дизайн
Это шаблон, который мы сейчас будем собирать:
Данный шаблон включает все элементы, которые мы будем изучать в этом уроке, а именно: название страницы и ее слоган (name & slogan), рекламный блок (в оригинале featured block, не смогла подобрать аналог на русском, у нас обычно блоки «Новости» или «Акции» – прим. переводчика), список постов (post listing), экстра-раздел с линками (extras section), подвал с описанием страницы (about box) и, наконец, копирайт (copiright).
2. Разметка страницы
Стартовая разметка страницы, HTML5-скелет:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Smashing HTML5!</title> <link rel="stylesheet" href="css/main.css" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lte IE 7]> <script src="js/IE8.js"></script><![endif]--> <!--[if lt IE 7]> <link rel="stylesheet" media="all" href="css/ie6.css"/><![endif]--> </head> <body> </body> </html>
Несколько замечаний:
- 3 помеченных комментариями записи для IE. Первая встраивает html5 shiv из Google Code (читайте HTML5 SHIV теперь в виде скрипта!). Вторая включает IE8.js для лучшей обратной совместимости с IE7 и ниже. Третья – это файл CSS, который исправляет баги в IE6.
- Использование id “index” и class “home” в тэге <body>. Это просто привычка, которую я выработал за последний год, она упростила сборку сложных макетов.
- Упрощенный charset для лучшей обратной совместимости с действующими браузерами.
- Я использую синтаксис XHTML 1.0 при сборке шаблона на HTML5. Так как я МОГУ использовать этот синтаксис, то так я и делаю. Однако вы можете использовать обычный HTML. Отличия от HTML – закрывание самозакрывающихся тэгов (<br />, например) и отсутствие кавычек в размерных атрибутах (width = 200). Но это на ваш выбор.
Это основа для нашего будущего шаблона в HTML5. Теперь мы можем прописывать тэги в различных разделах сайта.
Если бы существовал рентген-аппарат для вебсайтов, то вот такой скелет вы бы увидели:
Шапка (header)
Понятие header так же элементарно, как его перевод с английского. В спецификации написано:
«Элемент header отображает группу презентационных элементов и навигацию».
Также мы будем использовать элемент <nav>.
Спецификация о nav:
«Элемент nav отображает часть страницы со ссылками на другие страницы или части в пределах страницы. Не все группы ссылок обязаны быть заключенными в тэги nav, только те, которые представляют собой главные навигационные блоки».
Было много бурчанья по поводу спецификации элемента nav, так как фраза «главные навигационные блоки» слишком раплывчата. Но так как сейчас мы говорим о главной навигации всего сайта, то ничего главнее быть не может. Так что после пары id и классов наш header выглядит так:
<header> <h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1> <nav><ul> <li><a href="#">home</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">blog</a></li> <li><a href="#">contact</a></li> </ul></nav> </header><!-- /#banner -->
Рекламный блок (featured)
Его лучше всего разметить как <aside>, так как спецификация aside гласит:
«Элемент aside отображает раздел страницы, содержимое которого поверхностно касается основного содержимого страницы вне элемента aside, и который может существовать отдельно от этого содержимого. Такие разделы в печатной продукции обычно являются боковыми колонками».
В спецификации достаточно много обоснований для использования этого элемента в нашем случае. А внутри этого блока происходит много чего еще. Во-первых, внутри будет заметка, а значит мы будем использовать тэг <article>.
У нас также есть два последовательных заголовка: «Featured Article» и «HTML5 in Smashing Magazine!», так что мы будем использовать еще один элемент — <hgroup>. Это прекрасный тэг, предназначенный для группирования тэгов <h#>, — как раз наш случай. Он существует для маскирования элемента h2 (заголовка второго уровня), что спасет разработчиков от лишней головной боли в будущем.
И последний элемент в этом блоке – логотип журнала Smashing Magazine. Для этого у нас есть еще один элемент разметки — <figure>. Этот тэг предназначен для включения контента, обычно с заголовком, который самодостаточен и отделен от остального содержимого. Мы также могли бы использовать тэг <legend> для заголовка. К сожалению, он не работает в некоторых браузерах, которые пытаются добавить <fieldset>, и этот баг невозможно преодолеть силам простого CSS (читайте Что такое HTML5 SHIV – уроки HTML5). Поэтому я предлагаю обойтись без <legend>, остановимся пока на использовании <figure>.
Код рекламного блока будет выглядеть так:
<aside><article> <figure> <img src="images/temp/sm-logo.gif" alt="Smashing Magazine" /> </figure> <hgroup> <h2>Featured Article</h2> <h3><a href="#">HTML5 in Smashing Magazine!</a></h3> </hgroup> <p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p> </article></aside><!-- /#featured -->
Основное содержимое (body)
Следующий этап – создание «тела» нашего документа. Так как этот блок отображает главное содержимое, а оно представляет собой группу тематических сообщений, то без сомнения здесь можно применить тэг <section>.
Для постов мы используем элемент <ol>, так как это обычный список статей. Каждый <li> будет содержать <article>, а внутри у нас будут располагаться <header> для заголовка поста, <footer> для информации о посте и <div> для содержимого поста. Да, <div>. Причина использования <div> очень проста: мы будем использовать hAtom 0.1 Microformat, а он требует div-а для того, чтобы контент растягивался. Так как никакой другой элемент не подходит для этого (это не section, не article и не footer), то мы возьмем <div> — он не несет никакой семантической нагрузки и отобразит разметку максимально чисто.
Со всеми этими тэгами и вставленным hAtom microformat код будет выглядеть так:
<section> <ol> <li><article> <header> <h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2> </header> <footer> <abbr title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ --> 10th October 2005 </abbr> <address> By <a href="#">Enrique Ramírez</a> </address> </footer><!-- /.post-info --> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p> </div><!-- /.entry-content --> </article></li> <li><article> ... </article></li> <li><article> ... </article></li> </ol><!-- /#posts-list --> </section><!-- /#content -->
Для продвинутых: да, я не использовал элемент <time>. Этот тэг сравнительно новый и несовместим с текущим microformat. Так как я в самом деле использую hAtom, то вместе ни microformat, ни новый тэг не будут работать. Если вы не используете microformat, то можно использовать <time>.
Экстра-раздел
Экстра-блок – еще один раздел нашего сайта. Вы можете посомневаться немного, какой тэг лучше сюда подойдет: <aside> или <section>. В конце концов, так как раздел не совсем тематически отделен от основного содержимого (все же это тематические линки и социальная сеть), то лучше используем тэг <section>.
Здесь мы найдем другое применение тэгу <div>. В целях стилизации и разделения на группы мы добавим два дива: один для блогролла и один для социального раздела.
Что касается остального, то здесь нечего решать: используем наш обычный <ul> для списка ссылок в обоих разделах. Выглядит это так:
<section> <div> <h2>blogroll</h2> <ul> <li><a href="#" rel="external">HTML5 Doctor</a></li> <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li> <li><a href="#" rel="external">Smashing Magazine</a></li> <li><a href="#" rel="external">W3C</a></li> <li><a href="#" rel="external">Wordpress</a></li> <li><a href="#" rel="external">Wikipedia</a></li> <li><a href="#" rel="external">HTML5 Doctor</a></li> <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li> <li><a href="#" rel="external">Smashing Magazine</a></li> <li><a href="#" rel="external">W3C</a></li> <li><a href="#" rel="external">Wordpress</a></li> <li><a href="#" rel="external">Wikipedia</a></li> <li><a href="#" rel="external">HTML5 Doctor</a></li> <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li> <li><a href="#" rel="external">Smashing Magazine</a></li> <li><a href="#" rel="external">W3C</a></li> <li><a href="#" rel="external">Wordpress</a></li> <li><a href="#" rel="external">Wikipedia</a></li> </ul> </div><!-- /.blogroll --> <div> <h2>social</h2> <ul> <li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li> <li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li> <li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li> <li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li> <li><a href="http://website.com/feed/" rel="alternate">rss</a></li> <li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li> </ul> </div><!-- /.social --> </section><!-- /#extras -->
Описание страницы и копирайт (about box & copyright)
подвал (футер) шаблона HTML5
Подвал не являет собой ничего сложного. Мы используем новый тэг <footer>, чтобы растянуть блок с описанием страницы и копирайт, так как в спецификации сказано:
«Элемент footer отображает контент, относящийся к ближайшему «родителю». Обычно footer содержит информацию о разделе, такую как: кто его написал, ссылки на относящиеся к нему статьи, копирайт и все в таком духе».
Так как ближайшим «родителем» нашего <footer> является <body>, то более чем правильно разместить оба элемента здесь, указывая автора и владельца сайта.
Для блока «о сайте» мы используем тэг <address>, который будет содержать контактную информацию о своем ближайшем «родителе» — элементов <article> или <body>. Мы также используем hCard Microformat (для того, чтобы роботы и люди могли иметь более полное представление о контактной информации; о микроформатах будет написано позже – прим. переводчика). Для копирайта мы используем обычный тэг <p>. Так что в конце концов подвал выглядит так:
<footer> <address> <span> <strong><a href="#">Smashing Magazine</a></strong> <span>Amazing Magazine</span> </span><!-- /.primary --> <img src="images/avatar.gif" alt="Smashing Magazine Logo" /> <span>Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span> </address><!-- /#about --> <p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p> </footer><!-- /#contentinfo -->
Собираем все вместе
Итак, после всех этих манипуляций код выглядит так:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Smashing HTML5!</title> <link rel="stylesheet" href="css/main.css" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lte IE 7]> <script src="js/IE8.js"></script><![endif]--> <!--[if lt IE 7]> <link rel="stylesheet" media="all" href="css/ie6.css"/><![endif]--> </head> <body> <header> <h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1> <nav><ul> <li><a href="#">home</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">blog</a></li> <li><a href="#">contact</a></li> </ul></nav> </header><!-- /#banner --> <aside><article> <figure> <img src="images/temp/sm-logo.gif" alt="Smashing Magazine" /> </figure> <hgroup> <h2>Featured Article</h2> <h3><a href="#">HTML5 in Smashing Magazine!</a></h3> </hgroup> <p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p> </article></aside><!-- /#featured --> <section> <ol> <li><article> <header> <h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2> </header> <footer> <abbr title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ --> 10th October 2005 </abbr> <address> By <a href="#">Enrique Ramírez</a> </address> </footer><!-- /.post-info --> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p> </div><!-- /.entry-content --> </article></li> <li><article> ... </article></li> <li><article> ... </article></li> </ol><!-- /#posts-list --> </section><!-- /#content --> <section> <div> <h2>blogroll</h2> <ul> <li><a href="#" rel="external">HTML5 Doctor</a></li> <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li> <li><a href="#" rel="external">Smashing Magazine</a></li> <li><a href="#" rel="external">W3C</a></li> <li><a href="#" rel="external">Wordpress</a></li> <li><a href="#" rel="external">Wikipedia</a></li> <li><a href="#" rel="external">HTML5 Doctor</a></li> <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li> <li><a href="#" rel="external">Smashing Magazine</a></li> <li><a href="#" rel="external">W3C</a></li> <li><a href="#" rel="external">Wordpress</a></li> <li><a href="#" rel="external">Wikipedia</a></li> <li><a href="#" rel="external">HTML5 Doctor</a></li> <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li> <li><a href="#" rel="external">Smashing Magazine</a></li> <li><a href="#" rel="external">W3C</a></li> <li><a href="#" rel="external">Wordpress</a></li> <li><a href="#" rel="external">Wikipedia</a></li> </ul> </div><!-- /.blogroll --> <div> <h2>social</h2> <ul> <li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li> <li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li> <li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li> <li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li> <li><a href="http://website.com/feed/" rel="alternate">rss</a></li> <li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li> </ul> </div><!-- /.social --> </section><!-- /#extras --> <footer> <address> <span> <strong><a href="#">Smashing Magazine</a></strong> <span>Amazing Magazine</span> </span><!-- /.primary --> <img src="images/avatar.gif" alt="Smashing Magazine Logo" /> <span>Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span> </address><!-- /#about --> <p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p> </footer><!-- /#contentinfo --> </body> </html>
3. CSS
Как и основной код, наш CSS сначала выглядит очень просто. Это шаблон, который я открываю в начале работы над любым проектом:
/*
Name: Smashing HTML5
Date: July 2009
Description: Sample layout for HTML5 and CSS3 goodness.
Version: 1.0
Author: Enrique Ramírez
Autor URI: http://enrique-ramirez.com
*/
/* Imports */
@import url("reset.css");
@import url("global-forms.css");
/***** Global *****/
/* Body */
body {
background: #F5F4EF url('../images/bg.png');
color: #000305;
font-size: 87.5%; /* Base font size: 14px */
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;
}
/* Headings */
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1em} /* 14px */
h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}
/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
color: #C74350;
padding: 0 1px;
text-decoration: underline;
}
a:hover, a:active {
background-color: #C74350;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #333;
}
/* Paragraphs */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}
strong, b {font-weight: bold;}
em, i {font-style: italic;}
::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}
/* Lists */
ul {
list-style: outside disc;
margin: 1em 0 1.5em 1.5em;
}
ol {
list-style: outside decimal;
margin: 1em 0 1.5em 1.5em;
}
dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}
/* Quotes */
blockquote {font-style: italic;}
cite {}
q {}
/* Tables */
table {margin: .5em auto 1.5em auto; width: 98%;}
/* Thead */
thead th {padding: .5em .4em; text-align: left;}
thead td {}
/* Tbody */
tbody td {padding: .5em .4em;}
tbody th {}
tbody .alt td {}
tbody .alt th {}
/* Tfoot */
tfoot th {}
tfoot td {}
Это наш первый шаг на пути приведения макета в порядок. Мы можем применить стили к большинству базовых элементов, так мы и поступим. Несколько замечаний:
- Для оптимального кодирования некоторая информация обо мне в начале файла.
- 2 импорта в начале файла. Первый — Eric Meyer’s CSS reset. Второй – персонализированные глобальные формы, смысл которых я объясню позже.
- Базовые стили для основных тэгов.
Объяснение некоторых свойств
Во-первых, я использую свойство CSS3 text-shadow. Для объяснения прилагаю пример:
text-shadow: 1px 5px 2px #333;
Благодаря этому мы получим тень цветом #333, отбрасываемую текстом на 1 пиксель вправо, 5 пикселей вниз и с размытием в два пикселя. Просто, не так ли? Вы можете использовать значения hex и rgba плюс CSS unit (кроме %).
Также у нас в распоряжении эта крошка:
* p:last-child {margin-bottom: 0;}
Эта строка удалит margin вниз в тэге <p>, если он является последним дочерним элементом (child) у своего «родителя» (parent). Дя тех, кто незнаком с ООП: пример – child таблицы – это <tr> или <td>; соответственно, <table> — их родитель. Последний child таблицы – это последний tr, то есть – последняя строка. То, что мы сделали в нашем примере — полезно для избежания слишком больших вертикальных расстояний между параграфом (текстом) и нижней границей таблицы.
Наконец, у нас есть пара селекторов:
::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}
::selection – это CSS3 selector, который позволяет нам задавать стиль выделяемого текста. Имеет только две возможности – задавать цвет фона и цвет шрифта. ::-moz-selection тоже должен быть прописан, так как Мозилла не распознает селектор ::selection.
Запускаем HTML5
Как я уже говорил ранее, HTML5 пока еще не распознается браузерами. А если браузер не распознает элемент, он не может применить к нему стили.
Справедливо предположить, что все браузеры будут применять что-то вроде display:inline для нераспознанных элементов. Это не тот стиль, который мы хотели бы видеть в действии для таких элементов, как <section>, поэтому мы должны объяснить браузеру, как он должен отображать эти элементы:
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
display: block;
}
Ну вот! Теперь мы можем стилизовать наши элементы так, как если бы они были обычными div-элементами!
Некоторые из вас наверное заметили, что я добавил атрибут class=”body” в главном разделе нашего макета. Я хочу, чтобы «тело» моего сайта было определенной ширины – 800 пикселей. И я никогда не был фанатом использования огромных растянутых div-ов для этих целей. Поэтому мы используем базовую технику центрирования с помощью margin-ов. Также я добавлю пару общих классов, которые будут использованы для второстепенного контента.
/***** Layout *****/
.body {clear: both; margin: 0 auto; width: 800px;}
img.right figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; margin: 0 0 2em 2em;}
Стилизозвание header
Начнем с header. Это просто. Мы всего лишь зададим отступы и кое-какое стилизование текста. Ничего такого, чего мы не делали до сих пор.
/*
Header
*****************/
#banner {
margin: 0 auto;
padding: 2.5em 0 0 0;
}
/* Banner */
#banner h1 {font-size: 3.571em; line-height: .6;}
#banner h1 a:link, #banner h1 a:visited {
color: #000305;
display: block;
font-weight: bold;
margin: 0 0 .6em .2em;
text-decoration: none;
width: 427px;
}
#banner h1 a:hover, #banner h1 a:active {
background: none;
color: #C74350;
text-shadow: none;
}
#banner h1 strong {font-size: 0.36em; font-weight: normal;}
Сейчас стилизуем навигацию. Опять ничего особенного:
/* Main Nav */
#banner nav {
background: #000305;
font-size: 1.143em;
height: 40px;
line-height: 30px;
margin: 0 auto 2em auto;
padding: 0;
text-align: center;
width: 800px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
#banner nav li {float: left; display: inline; margin: 0;}
#banner nav a:link, #banner nav a:visited {
color: #fff;
display: inline-block;
height: 30px;
padding: 5px 1.5em;
text-decoration: none;
}
#banner nav a:hover, #banner nav a:active,
#banner nav .active a:link, #banner nav .active a:visited {
background: #C74451;
color: #fff;
text-shadow: none !important;
}
#banner nav li:first-child a {
border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
Здесь мы используем новую возможность CSS3: border-radius. Это новое свойство CSS3 позволяет нам создавать скругленные углы для блоков без необходимости использовать семантически-неверные тэги, которые превращают в хаос весь наш код, миллионы изображений или фоновое расположение картинок. Нет, это все в прошлом. Теперь мы просто задаем радиус скругления угла обводки и все.
Конечно, border-radius еще не широко распространен, поэтому мы будем применять эквиваленты для браузеров Mozilla и Webkit. Существует несколько вариантов этого свойства, и ваш код может стать слишком длинным, но если вы хотите получить скругленные углы в большинстве браузеров, то добавляйте все.
Вы могли также заметить !important. Используется для отмены стиля по умолчанию (text-shadow) без сложных уточнений. В данном примере — больше в обучающих целях.
Стилизование блоков Featured и Body
Далее – CSS для обоих блоков. Заметьте, там нет стилей для постов, только для основного контента.
/*
Featured
*****************/
#featured {
background: #fff;
margin-bottom: 2em;
overflow: hidden;
padding: 20px;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#featured figure {
border: 2px solid #eee;
float: right;
margin: 0.786em 2em 0 5em;
width: 248px;
}
#featured figure img {display: block; float: right;}
#featured h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;}
#featured h3 {font-size: 1.429em; margin-bottom: .5em;}
#featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}
#featured h3 a:hover, #featured h3 a:active {color: #fff;}
/*
Body
*****************/
#content {
background: #fff;
margin-bottom: 2em;
overflow: hidden;
padding: 20px 20px;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Опять-таки, — ничего нового, обычные стили: margin, background, color и text. Повторяю это для того, чтобы вы поняли, что стили в HTML5 такие же простые как были до этого.
Стили для блока Extra
Наконец что-то интересное. Но начнем с базового стилизования.
/*
Extras
*****************/
#extras {margin: 0 auto 3em auto; overflow: hidden;}
#extras ul {list-style: none; margin: 0;}
#extras li {border-bottom: 1px solid #fff;}
#extras h2 {
color: #C74350;
font-size: 1.429em;
margin-bottom: .25em;
padding: 0 3px;
}
#extras a:link, #extras a:visited {
color: #444;
display: block;
border-bottom: 1px solid #F4E3E3;
text-decoration: none;
padding: .3em .25em;
}
/* Blogroll */
#extras .blogroll {
float: left;
width: 615px;
}
#extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}
/* Social */
#extras .social {
float: right;
width: 175px;
}
Как вы видите на картинке, у меня трехколоночный макет для блока blogroll с плавающими <li>, и последняя колонка с социальной информацией гораздо Уже двух остальных. Макет хорош и так, но меня беспокоит одна вещь: я про border под каждой строкой.
Голубым выделена область, которая мне не нравится. Я добавил по одному border-у под каждым элементом: <li> и <a> тэги имеют подчеркивание снизу шириной в один пиксель, но разного цвета, и я не хочу этого подчеркивания в самой последней строке. Так что мы удалим border у последних двух элементов в блогролле и одного в социалке.
Сначала удалим подчеркивание у последних <li> каждого блока. С использованием селектора CSS3 :last-child, мы можем вычленить последний <li> у родительского <ul>.
#extras li:last-child, /* last <li>*/
#extras li:last-child a /* <a> of last <li> */
{border: 0}
Таким образом мы удалили подчеркивание для ‘li’ и ‘li a’ в последнем элементе. Но как удалить его для двух предыдущих?
Встречайте :nth-last-child().
#extras .blogroll li:nth-last-child(2),
#extras .blogroll li:nth-last-child(3),
#extras .blogroll li:nth-last-child(2) a,
#extras .blogroll li:nth-last-child(3) a {border: 0;}
Выглядит сложно? На самом деле мы просто указываем на последние два элемента с конца, как раз те, где я хочу удалить border.
Как и следовало ожидать, этот прием не работает в IE, хотя IE8.js поддерживает :last-child, он не поддерживает :nth-last-child, так что подчеркивание в нем появится. Но это не главная дизайнерская проблема, так как информация на сайте все равно доступна. Так что не будем заострять внимание на удалении border-ов в IE.
Добавление иконок в социальный раздел
Добавим немного специй. Мы все знаем, как здорово выглядят маленькие иконки напротив каждой ссылки. Мы везде встречаем этот дизайнерский прием. Существует миллион способов сделать это, но мы воспользуемся новым селектором CSS3.
Знакомьтесь: a[n='b'] выделит все <a> с атрибутом n значения b. Например, если мы используем a[href='picture.jpg'], то мы укажем CSS3 на элемент <a href="picture.jpg">. Это здорово, но не свовсем то, чего мы хотим добиться, так как в нашем случае URL-ы картинок могут различаться. Вот несколько селекторов, которые могут нам пригодиться:
a[n]выделит все<a>с атрибутомn, независимо от его значения.a[n='b']выделит все<a>с атрибутомnзначенияb.a[n~='b']выделит все<a>с атрибутомn, который равенb, аbв свою очередь – одно из значений в списке разделенных пробелами чисел (или букв).a[n^='b']выделит все<a>с атрибутомnкоторый начинается со значенияb.a[n*='b']выделит все<a>с атрибутомnсо значениемbгде-либо в пределах имени (или значения).
Последний вариант подходит нам как нельзя лучше. Так что мы будем выделять все <a> тэги с кусочком текста где-нибудь в пределах URL. Вот наш код:
#extras div[class='social'] a {
background-repeat: no-repeat;
background-position: 3px 6px;
padding-left: 25px;
}
/* Icons */
.social a[href*='delicious.com'] {background-image: url('../images/icons/delicious.png');}
.social a[href*='digg.com'] {background-image: url('../images/icons/digg.png');}
.social a[href*='facebook.com'] {background-image: url('../images/icons/facebook.png');}
.social a[href*='last.fm'], .social a[href*='lastfm'] {background-image: url('../images/icons/lastfm.png');}
.social a[href*='/feed/'] {background-image: url('../images/icons/rss.png');}
.social a[href*='twitter.com'] {background-image: url('../images/icons/twitter.png');}
Первый кусок кода добавит отступ (padding) к социальным ссылкам, чтобы появилось место для иконок. Он также добавит фон по умолчанию, чтобы мы не делали этого потом. Вам наверное интересно, почему я написал div[class='social']вместо того, чтобы написать div.social. Просто потому, что некоторые браузеры (IE, как всегда) не поддерживают этот вид селектора, а мы не хотим появление белого зазора перед сдвинутыми ссылками. Поэтому прописывание того же фона, что и для фона иконок, будет нашей страховкой. IE в таком случае не выполнит ни padding, ни background image, а все остальные браузеры выполнят.
Второй раздел кода использует объясненный выше селектор, чтобы выделить каждую ссылку социальной сети и добавить к ним иконки. Эта техника CSS не представляет собой ничего нового, она не так часто используется (я даже видел использование ява-скриптов для достижения тех же целей), хотя заслуживает вашего внимания.
Стилизуем footer
И наконец – footer. Как и прежде – обычный CSS, ничего нового, кроме border radius:
/*
About
*****************/
#about {
background: #fff;
font-style: normal;
margin-bottom: 2em;
overflow: hidden;
padding: 20px;
text-align: left;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#about .primary {float: left; width: 165px;}
#about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
#about .photo {float: left; margin: 5px 20px;}
#about .url:link, #about .url:visited {text-decoration: none;}
#about .bio {float: right; width: 500px;}
/*
Footer
*****************/
#contentinfo {padding-bottom: 2em; text-align: right;}
Список постов
Остался последний элемент, требующий стилизования. Опять базовый CSS, но на этот раз добавим быстрый эффект, который проявляется, когда пользователь проводит мышкой над постами.
/* Blog */
.hentry {
border-bottom: 1px solid #eee;
padding: 1.5em 0;
}
li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
#content > .hentry {padding: 1em 0;}
.entry-title {font-size: 1.429em; margin-bottom: 0;}
.entry-title a:link, .entry-title a:visited {text-decoration: none;}
.hentry .post-info * {font-style: normal;}
/* Content */
.hentry footer {margin-bottom: 2em;}
.hentry footer address {display: inline;}
#posts-list footer address {display: block;}
/* Blog Index */
#posts-list {list-style: none; margin: 0;}
#posts-list .hentry {padding-left: 200px; position: relative;}
#posts-list footer {
left: 10px;
position: absolute;
top: 1.5em;
width: 190px;
}
Я удаляю все margin и padding для последнего поста (чтобы исчез большой зазор внизу блока). Также я использую селектор ‘>’, который указывает на конкретный дочерний элемент (child). Например #content > .hentry укажет на элемент a.hentry, находящийся прямо внутри #content. Если бы .hentry находился, к примеру, в списке, то это правило уже бы не сработало, так как .hentry в таком случае был бы «внуком» (grandchild), а не прямым наследником (child) элемента #content. Так что мы указываем именно на пост.
Продолжаем код:
#posts-list .hentry:hover {
background: #C64350;
color: #fff;
}
#posts-list .hentry:hover a:link, #posts-list .hentry:hover a:visited {
color: #F6CF74;
text-shadow: 1px 1px 1px #333;
}
Этот код изменит фон <li>, цвет текста и цвет ссылок, когда мышка находится над <li>.
HTML5 позволяет пользователям заключать в тэг <a> целые блоки информации. Так что мы можем заставить весь элемент <hentry> вести себя как единая ссылка. Но после нескольких тестов я выяснил, что Firefox 3.5.1 не готов к таким экспериментам, возможно, от слишком большого количества неизвестных эелементов внутри .hentry. Safari, Opera и даже IE6 вели себя правильно. Взгляните на тестовую страницу. Ниже несколько скриншотов, если у вас есть только один браузер.
Opera 9.64:
Safari 4.0.2:
Internet Explorer 6:
Firefox 3.5.1:
Так что в Firefox выделение блоков информации в качестве ссылок не работает. Однако мы можем добавить хороший эффект элементу <li>.
Оптимизация под IE6
Наконец, мы должны как-то довести все это до IE6. Ниже файлы ie.css и ie6.css, каждая строка имеет комментарий справа или сверху, который объясняет, что происходит.
Это код для ie.css:
#banner h1 {line-height: 1;} /* Fixes Logo overlapping */
Этот для ie6.css
#featured figure {display: inline;} /* Double margin fix */
#posts-list footer {left: -190px;} /* Positioning fix */
/* Smaller width for Social block
so it won't jump to next line */
#extras .social {width: 165px;}
Итак, как выглядит теперь наш макет? Взгляните на финальный продукт. Он был протестирован на IE6, Firefox 3, Firefox 3.5, Opera 9.64 и Safari 4.0.2, везде отображается правильно.
Теперь можно сказать, что с помощью HTML5 и CSS3 вы можете уже сегодня достичь результатов, которые будут без проблем работать в устаревших, текущих и будущих версиях браузеров. Мы все еще далеки от полного использования крутых возможностей HTML5, но мы можем использовать его уже сейчас.
Читать далее:
Новинка! Презентация HTML5 Тестирование новых возможностей HTML5 онлайн!
HTML5 – введение в новый язык разметки
HTML5 SHIV теперь в виде скрипта!
Если хотите понять причины засилия минимализма, массового перехода с флэша на ява-скрипт и jQuery, истерию вокруг HTML5, а также разобраться во Второй Холодной войне между Apple и Microsoft – читайте статью «Почему минимализм, или какой сайт делать».
Awebdesign's Blog 
Right here is the right webpage for everyone who really wants to find out about this topic.
You understand so much its almost hard to argue with you (not that I personally
would want to…HaHa). You definitely put a fresh spin on a subject that has been discussed for decades.
Excellent stuff, just wonderful!
НравитсяНравится
Есть некоторые не совсем верные применения тегов (http://habrahabr.ru/blogs/html5/124993/), а в целом статейка понравилась. Спасибо.
НравитсяНравится
Ребят, ну это же перевод! К тому же со Smashing Magazine — вряд ли там могут быть некорректные использования тегов. К тому же спецификация пока что «плавающая» — могут быть произвольные использования, как в статье про то, как сделан сайт Nike Better World.
НравитсяНравится
[…] Уроки HTML5 – создаем макет « Awebdesign’s Blog. Share this:TwitterFacebookLike this:НравитсяБудьте первым, кому […]
НравитсяНравится
Статья хорошая, все понятно. Но на мой взгляд еще достаточно рано использовать html5 🙂 А приобщаться к нему можно и нужно!
НравитсяНравится
Совершенно верно! Спасибо за позитивный комментарий! 🙂
НравитсяНравится
Всегда пожалуйста 🙂
НравитсяНравится
Я переверстал свой макет на html5 добавил ссылку на html5shiv для IE, но почему-то в моём IE8 это никак не помогло, блоки с тэгами от html всё-равно не имеют никакой стилизации, и просто слетают.
НравитсяНравится
Я сама не пробовала переверстывать документы, но начала бы не с целого документа, а с простых примеров, как в статье про HTML5shiv. Возможно, нужно вставлять строку document.createElement(«blah»)? Или включаемый яваскрипт делает это для любых не распознаваемых DOM-элементов? В общем, мне кажется, нужно попробовать все это делать методом тыка, и начинать с малого.
НравитсяНравится
отличный длог почерпнул много нового!
НравитсяНравится
Хороший блог, только вот шрифт слегка напрягает глаза при чтении, но в целом немало времени провёл здесь, добавил в закладки 🙂
НравитсяНравится
Очень понравился дизайн вашего блога, но вот некоторые блоки помоему даже лишние!
НравитсяНравится
Все понятно, мне лично всё понравилось, только вот один минус, сайт слегка подтормаживает у вас, а так всё норм! 😉
НравитсяНравится
Спасибо! 🙂 Тормозит если высота экрана меньше заложенной у меня, картинкам приходиться на ходу подстраиваться под требуемую высоту экрана, поэтому и прокрутка тормозить начинает!
НравитсяНравится
Вот небольшой пример сайта на HTML5. Это скорее даже не сайта, а визиточка..
http://yakud.ru/html5/
НравитсяНравится
Я вот не понял только одного. Второй импорт в ксс «персонализированные глобальные формы» но я как то так и не нашёл объяснений что это позже. Как обещалось.
НравитсяНравится
Читаю исходник урока — такой же вопрос и ноль ответа. Стала искать в Гугле — не нашла. Единтсвенное, что нашла — http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html — это оформление форм. Но чтобы сделать эо глобально — не нашла. Но по идее, если есть проблема с оформлением форм — эта ссылка как раз то, что нужно. в конце тьютора — скачать исходник, там все понятно.
НравитсяНравится
Очень доступно для новичков типа меня. Благодарю. А не планируется ли подобное руководство по созданию тем на WordPress на html 5 и css 3?
НравитсяНравится
Темы — это просто дизайнерская одежка для блога. Если вы в сети ВордПресс, то у вас нет доступа к листам стилей. А если вы скачали блог и установили на своем сайте, то вот какой он есть — такой и есть — на нынешней версии HTML и CSS. Вы там можете сами уже добавлять стили, даже из CSS3, но сама основа останется такой же. А если вы прямо специализируетесь на создании тем для ВордПресс, то уж тут я профан, ничего не могу посоветовать.
НравитсяНравится
все новое — дается с трудом, но обучение — благодарно! Спасибо! Представляю, что еще нужно поднять css3 %)
НравитсяНравится
I have been surfing online more than three hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. In my opinion, if all webmasters and bloggers made good content as you did, the internet will be much more useful than ever before.
НравитсяНравится
Good English for native russian 😉
НравитсяНравится
Действительно интересно. Хотелось бы еще почитать чего-нибудь по этой же теме.
НравитсяНравится
Скоро будет конкурс на лучший блог 2010 “бла бла бла”. Я думаю — вы должны поучаствовать!
НравитсяНравится
Большое спасибо! Буду теперь заходить на ваш блог почаще! 🙂
НравитсяНравится
А что такое трекбэк и где его смотреть? У меня блог на бесплатном блогспот, там всё автоматизировано без меня.
НравитсяНравится
Извините, вы про какой трекбэк? Что-то в тексте я не нашла. Или это по поводу РСС-ленты?
НравитсяНравится
Я подписался на вашу РСС ленту, но сообщения почему-то в виде каких-то значков непонятных 😦 Как это исправить?
НравитсяНравится
Вы ленту на блог поставили или на свой сайт? Если на сайт, то у нас разные кодировки. Лента идет в кодировке UTF-8.
Если вы захотите поменять кодировку сайта, то нужно скачать с сервера файл .htaccess и исправить там строку, должно быть написано: AddDefaultCharset UTF-8. Но на каждой странице сайта придется прописывать кодировку вручную.
Как прописать кодировку в Dreamweaver Macromedia:
Нужно зайти в пункт меню Modify -> Page Properties (или Ctrl+J), в диалоговом окне открыть Title/Encoding (пункты меню слева), там:
Document Type: XHTML 1.0 (Transitional)
Encoding: Юникод (UTF-8)
Unicode Normalization Form: C (или None)
НравитсяНравится
прошу меня извинить, но мне кажется, что первый комментарий, это всего лишь спам.
Спасибо за статью, начнем изучение!
НравитсяНравится
Можно подумать как будто вроде и удался пост) загляните и ко мне на чай)
НравитсяНравится