HTML 5 и CSS3: Техники, которые мы скоро будем использовать

topВ сегодняшней статье мы собираемся создать страницу блога, используя техники нового поколения – HTML5 и CSS3. Статья продемонстрирует вам процесс разработки веб-сайтов, после того как окончательно утвердят спецификации и поставщики браузеров начнут их поддерживать. Если вы знакомы с HTML и CSS, то вам будет легко продолжить обучение.

Что мы собираемся создавать

Вот так будет выглядеть наша страница, когда мы закончим:

rezult

Практически обычный дизайн вашего ежедневного блога. Заголовок с названием, горизонтальная навигация, контент с комментариями и формой отправки, сайдбар и подвал. Ничего особенного. Давайте начнем. Ничего особенного. Давайте начнем.

HTML 5

HTML 5 является следующей версией HTML. Он включает в себя множество новых элементов, которые сделают наши страницы более семантическими. Это значительно облегчит навигацию по странице для поисковых систем и голосовых модулей. Кроме того, HTML 5 также будет включать API для рисования графиков на экране, хранения данных на клиенте, технологию drag-and-drop, и многое другое. Давайте начнем разметку для нашего блога.

Основная структура

Прежде чем мы создадим разметку страницы, нужно представить общую структуру:

basic

В HTML5 есть специальные тэги для создания разметки заголовка, навигации, сайдбара и подвала. Сначала взгляните на разметку, а затем я объясню, что это значит:

<!doctype html>   
<html>   
<head>   
    <title>Page title</title>   
</head>   
<body>   
    <header>   
        <h1>Page title</h1>   
    </header>   
    <nav>   
        <!-- Navigation -->   
    </nav>   
    <section id="intro">   
        <!-- Introduction -->   
    </section>   
    <section>   
        <!-- Main content area -->   
    </section>   
    <aside>   
        <!-- Sidebar -->   
    </aside>   
    <footer>   
        <!-- Footer -->   
    </footer>   
  
</body>   
</html>

Это выглядит как обычная HTML-разметка, но есть несколько моментов, которые стоит отметить:

  • В HTML 5, есть только один doctype. Он объявляется в начале страницы через <!doctype html!>. Он просто сообщает браузеру, как интерпретировать HTML-документ.
  • Новый тэг header, является контейнером для вступительных элементов, таких как заголовок или логотип. Он также может содержать оглавление или поисковую форму. Каждый заголовок обычно содержит теги заголовков от <h1> до <h6>. В данном случае заголовок используется только для представления страницы, немного позднее мы добавим его в различные секции страницы.
  • Тэг nav используется для содержания навигационных элементов, таких как основная навигация сайта или более специализированная навигация, как ссылки на следующую/предыдущую страницы.
  • aside – используется для обертывания содержимого, связанного с основным контентом страницы, которое всегда находится на одном месте. В данном случае мы используем его для сайдбара.
  • Тэг section используется для обозначения секции документа. Он может содержать все виды разметки, и множество секций могут быть вложены друг в друга.
  • Тэг footer должен содержать дополнительную информацию об основном контенте, такую как информацию об авторе, копирайты, ссылки на похожие документы и тому подобное.

Вместо того чтобы использовать тэг <div> для различных секций страницы, мы будем использовать соответствующие, семантические теги. Их использование значительно облегчит жизнь поисковым системам, в выяснении типа контента, расположенного на странице.

Разметка для Навигации

Разметка навигации создается точно так же как и в HTML 4 или XHTML, с использованием маркированного списка. Ключ в том, что этот список располагается внутри тэгов nav.

<nav>   
    <ul>   
        <li><a href="#">Blog</a></li>   
        <li><a href="#">About</a></li>   
        <li><a href="#">Archives</a></li>   
        <li><a href="#">Contact</a></li>   
        <li class="subscribe"><a href="#">Subscribe via. RSS</a></li>   
    </ul>   
</nav>

Разметка для Вступления

Мы уже описали новую секцию документа, используя тег section. Теперь просто добавим немного контента.

<section id="intro">   
    <header>   
        <h2>Do you love flowers as much as we do?</h2>   
    </header>   
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>   
</section>

Мы добавили ID к тэгу section, чтобы потом можно было назначить ему определенный стиль. Мы используем тэг header, для заключения элемента h2. Кроме описания основного документа, тэги заголовков всегда должны использоваться для описания отдельных секций.

Разметка Основного контента

Наш контент содержит три секции: запись, комментарии и форму отправки комментариев. Используя наши знания о новой структуре тэгов в HTML 5, сделать разметку будет очень легко .

Разметка для Записи

Посмотрите разметку, и я расскажу о новых элементах ниже.

<section>   
    <article class="blogPost">   
        <header>   
            <h2>This is the title of a blog post</h2>   
            <p>Posted on <time datetime="2009-06-29T23:31:45+01:00">June 29th 2009</time> by <a href="#">Mads Kjaer</a> - <a href="#comments">3 comments</a></p>   
        </header>   
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p>   
    </article>   
</section>

Мы откроем новую секцию и поместим всю статью блога в тэги article. Тэг article используется для обозначения независимой записи в блоге, обсуждении, энциклопедии и т.д., и он идеален для использования здесь. Так что, если мы просматриваем отдельную запись, у нас на странице один тэг article, а на главной странице блога, мы должны заключить в него каждый пост.

Элемент header, используется для представления заголовка и метаданных о записи. Мы сообщаем пользователю, когда статья была написана, кто ее написал, и как много комментариев она имеет. Обратите внимание, что время заключено в соответствующий тэг. Этот тег также новый в HTML 5, и используется для разметки определенного участка во времени. Содержимое атрибута datetime должно быть следующим:

time

Год, затем тире (знак минус)

  1. Месяц, затем тире
  2. Дата
  3. Прописная T, для определения того, что мы собираемся указывать местное время
  4. Местное время в формате hh:mm:ss
  5. Часовой пояс по Гринвичу. Я нахожусь в Дании, где GMT+1, поэтому я пишу +01.

Разметка для Комментариев

Разметка для комментариев очень простая. Никаких новых тэгов и атрибутов не используется.

<section id="comments">   
    <header>   
        <h3>Comments</h3>   
    </header>   
    <article>   
        <header>   
            <a href="#">George Washington</a> on <time datetime="2009-06-29T23:35:20+01:00">June 29th 2009 at 23:35</time>   
        </header>   
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>   
    </article>   
    <article>   
        <header>   
            <a href="#">Benjamin Franklin</a> on <time datetime="2009-06-29T23:40:09+01:00">June 29th 2009 at 23:40</time>   
        </header>   
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>   
    </article>   
</section>

Разметка для Формы Комментирования

В HTML 5 был представлен ряд усовершенствования для форм. Вам больше не нужно заботиться о валидации необходимых полей на клиентской стороне. Браузер все сделает за вас.

<form action="#" method="post">   
    <h3>Post a comment</h3>   
    <p>   
        <label for="name">Name</label>   
        <input name="name" id="name" type="text" required />   
    </p>   
    <p>   
        <label for="email">E-mail</label>   
        <input name="email" id="email" type="email" required />   
    </p>   
    <p>   
        <label for="website">Website</label>   
        <input name="website" id="website" type="url" />   
    </p>   
    <p>   
        <label for="comment">Comment</label>   
        <textarea name="comment" id="comment" required></textarea>   
    </p>   
    <p><input type="submit" value="Post comment" /></p>   
</form>

Появилось два новых типа input-ов, email и url. Email указывает на то, что пользователь должен ввести валидный E-mail, а в поле url — валидный адрес сайта. Если вы добавите атрибут required, пользователь не сможет отправить пустое поле. «Required» — это логический атрибут, новый в HTML 5. Это всего лишь значит, что поле обязательно должно иметь какое-то значение.

Разметка Сайдбара и Подвала

Разметка сайдбара и подвала очень простая. Несколько секций, с некоторым контентом, внутри соответствующих тэгов aside и footer.

Вы можете взглянуть на окончательный результат разметки. Теперь перейдем к стилям.

Стилизация с CSS3

CSS 3 основывается на принципах стиля, селекторов и каскада, как нам хорошо известно из предыдущих версий CSS. CSS3 содержит множество новых функций, селекторов, псевдо-классов и свойств. Использование новых возможностей, значительно облегчит верстку ваших макетов. Давайте начнем.

Основные настройки

Для начала, нам понадобится определить некоторые основные правила, касающиеся типографии, фонового цвета страницы и т.д. Все это должно быть вам известно еще из CSS 2.1.

/* Makeshift CSS Reset */   
{   
    margin: 0;   
    padding: 0;   
}   
  
/* Tell the browser to render HTML 5 elements as block */   
header, footer, aside, nav, article {   
    display: block;   
}   
  
body {   
    margin: 0 auto;   
    width: 940px;   
    font: 13px/22px Helvetica, Arial, sans-serif;   
    background: #f0f0f0;   
}   
  
h2 {   
    font-size: 28px;   
    line-height: 44px;   
    padding: 22px 0;   
}   
  
h3 {   
    font-size: 18px;   
    line-height: 22px;   
    padding: 11px 0;   
}   
  
p {   
    padding-bottom: 22px;   
}

Сначала мы, простым правилом, обнуляем значения свойств margin— и padding-.

Затем, мы указываем браузеру, возвращать все новые элементы HTML 5 в качестве блоков. Браузеры нормально относятся к неизвестным элементам, но им неизвестно как эти элементы должны быть отрисованы по умолчанию. Нам придется сообщать об этом браузерам до тех пор, пока HTML 5 официально не будет утвержден.

Также обратите внимание, что я выбрал размер шрифта в пикселях, вместо em или %. Это сделано специально, для придания статье прогрессивного характера. Когда, в один прекрасные день, все основные браузеры будут осуществлять полную поддержку HTML 5 и CSS3, у нас появится возможность масштабирования страницы, вместо простого ресайзинга текста. Благодаря этому исчезнет необходимость указывать единицы измерения в относительных единицах, поскольку браузер в любом случае сможет масштабировать страницу.

Вот так будет выглядеть страница с применением базового стиля. Теперь можно переходить к стилизации остальной части страницы. Для заголовка не требуется никакого специально стиля, так что мы сразу переходим к навигации.

Стилизация Навигации

Обязательно обратите внимание, что ширина у body задана 940px, и он располагается по центру. Нашему блоку навигации нужно растянуться по всей доступной ширине окна, так что мы должны применить необходимые для этого стили:

nav {   
    position: absolute;   
    left: 0;   
    width: 100%;   
    background: url("nav_background");   
}

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

nav ul {   
    margin: 0 auto;   
    width: 940px;   
    list-style: none;   
}

После этого мы добавим некоторые дополнительные стили, чтобы навигационный список выглядел красивее, и расположим его в сетке, на которой основан наш макет. Я также добавил стиль для подсветки текущей страницы и настроил внешний вид RSS-ссылки.

nav ul li {   
    float: left;   
}   
  
    nav ul li a {   
        display: block;   
        margin-right: 20px;   
        width: 140px;   
        font-size: 14px;   
        line-height: 44px;   
        text-align: center;   
        text-decoration: none;   
        color: #777;   
    }   
  
        nav ul li a:hover {   
            color: #fff;   
        }   
  
        nav ul li.selected a {   
            color: #fff;   
        }   
  
        nav ul li.subscribe a {   
            margin-left: 22px;   
            padding-left: 33px;   
            text-align: left;   
            background: url("rss.png") left center no-repeat;   
        }

Стилизация Предисловия

Разметка для предисловия очень простая. Секция с заголовком и абзацем текста. Тем не менее, мы будем использовать немного новых CSS3-свойств, чтобы сделать ее более привлекательной.

#intro {   
    margin-top: 66px;   
    padding: 44px;   
    background: #467612 url("intro_background.png") repeat-x;   
    background-size: 100%;   
    border-radius: 22px;   
}

Мы использовали два новых свойства. Первое, это background—size, которое позволит вам масштабировать фоновое изображение. В нашем случае, мы будем масштабировать его на 100% по обеим осям. Если при добавлении контента, бокс растянется, то лежащий в фоне градиент будет масштабироваться вместе с боксом. Это как раз то, что нельзя реализовать в CSS 2.1 не нарушая семантики разметки.

images_myВторое новое свойство это – border—radius, которое применяет закругленные углы к элементу. Радиус наших закругленных углов равен 22px, для каждого угла. Вы можете назначить различные значения для любого угла, или назначить закругленными только определенные углы.

image

К сожалению, ни одно из этих свойств, полностью не поддерживается в популярных браузерах. Тем не менее, мы можем получить некоторую поддержку, используя специфические расширения для браузеров. Background—size поддерживается в последней версии Safari, Opera и Konqueror. Border—radius поддерживается в последней версии Safari и Firefox.

#intro {   
    ...   
    /* Background-size not implemented yet */   
    -webkit-background-size: 100%;   
    -o-background-size: 100%;   
    -khtml-background-size: 100%;   
  
    /* Border-radius not implemented yet */   
    -moz-border-radius: 22px;   
    -webkit-border-radius: 22px;   
}

После того как мы указали свойство background—color, можно не боятся проблем с отображением страницы в браузерах, не поддерживающих background—size, таких как Firefox. Теперь нам нужно стилизовать заголовок и текст.

#intro h2, #intro p {   
    width: 336px;   
}   
  
#intro h2 {   
    padding: 0 0 22px 0;   
    font-weight: normal   
    color: #fff;   
}   
  
#intro p {   
    padding: 0;   
    color: #d9f499;   
}

Картинку цветка можно легко поместить на страницу, путем добавления второго фонового изображения, то, что поддерживается в CSS3, для секции #intro.

#intro {   
    ...   
    background: #467612 url("intro_background.png") top left (287px 100%) repeat-x,   
            url("intro_flower.png") top rightright (653px 100%) no-repeat;   
    ...   
}

Мы назначили два фоновых изображения, измерив напоследок, чтобы убедиться, что они не перекрывают друг друга. Обратите внимание на короткую запись свойства background-size.

image2

К сожалению ни один из браузеров полностью не поддерживает этого. Поэтому нам пока придется действовать по старинке: будем использовать картинку и позиционировать ее с использованием CSS.

Стилизация Контента и Сайдбара

Контент и сайдбар должны быть расположены рядом друг с другом. Обычно это делается с помощью float, но в CSS3 это можно сделать с помощью таблиц!

«Что?! Таблицы?», наверное, удивитесь вы. Потому что давным-давно знаете, что использование таблиц для создания раскладки очень и очень плохая идея, и это до сих пор так. Вы никогда не должны использовать элементы таблицы для верстки раскладки. Однако, с помощью CSS3, мы можем сделать элементы похожими на таблицы, без появления таблиц в разметке. Для начала, нам потребуется немного элементов div, чтобы сгруппировать секции, более логичным образом.

<div id="content">   
    <div id="mainContent">   
        <section>   
            <!-- Blog post -->   
        </section>   
        <section id="comments">   
            <!-- Comments -->   
        </section>   
        <form>   
            <!-- Comment form -->   
        </form>   
    </div>   
    <aside>   
        <!-- Sidebar -->   
    </aside>   
</div>

Вся разметка остается семантической, но теперь мы можем ее стилизовать. Нам нужно сделать блок #content похожим на таблицу, с колонками из блоков #mainContent и aside. С CSS3 это очень легко:

css

#content {   
    display: table;   
}   
  
    #mainContent {   
        display: table-cell;   
        width: 620px;   
        padding-right: 22px;   
    }   
  
    aside {   
        display: table-cell;   
        width: 300px;   
    }

Вот и все! Больше никаких флоатов, фоновых картинок, чистки потока или отрицательных полей. Мы сделали элементы похожими на таблицу, и благодаря этому разметка стала гораздо проще.

Стилизация Записи

Стилизация заголовка записи вполне тривиальна, поэтому я пропущу ее и перейду к интересной части: многоколоночная раскладка.

Множественные колонки

Множественные колонки текста раньше невозможно было создать без ручного разделения текста, но с CSS3 это очень просто, все, что нам понадобится это завернуть параграфы в элемент div, для работы с текущими браузерами.

<div>   
    <p>Lorem ipsum dolor sit amet...</p>   
    <p>Pellentesque ut sapien arcu...</p>   
    <p>Vivamus vitae nulla dolor...</p>   
    ...   
</div>

Теперь мы можем добавить два простых свойства.

.blogPost div {   
    column-count: 2;   
    column-gap: 22px;   
}

Нам нужно создать 2 колонки с расстоянием 22px между ними. Дополнительный div нужен, потому что на данный момент нет поддерживаемого способа выстраивания элементов в несколько колонок. В будущем, возможно, вам будет достаточно указать свойство column—span, и написать всего лишь:

.blogPost {   
    column-count: 2;   
    column-gap: 22px;   
}   
  
    .blogPost header {   
        column-span: all;   
    }

Конечно, свойства column—count и column—gap поддерживаются только некоторыми браузерами, Safari и Firefox. Нам, пока что, придется использовать специальные расширения браузеров.

.blogPost div {   
    /* Column-count not implemented yet */   
    -moz-column-count: 2;   
    -webkit-column-count: 2;   
  
    /* Column-gap not implemented yet */   
    -moz-column-gap: 22px;   
    -webkit-column-gap: 22px;   
}

Box-shadow

Если вы внимательно взгляните на картинку статьи, вы увидите тень. Мы можем сгенерировать ее используя CSS3 и свойство box—shadow.

.blogPost img {   
    margin: 22px 0;   
    box-shadow: 3px 3px 7px #777;   
}

shadow_rendering_my

Первые «3px» сообщают браузеру, где мы хотим расположить тень по горизонтали. Вторые «3px», сообщают, где мы хоти расположить тень по вертикали. Последние «7px», как должна быть размыта рамка. Если вы установите последнее значение в ноль, рамка будет сплошной. Последнее, но не по значению, указывается основной цвет тени. Этот цвет конечно тускнеет, в зависимости от того насколько большое размытие тени вы установили.

Наверное, вы не удивитесь, узнав, что это свойство еще не поддерживается во всех браузерах. Фактически оно работает только в Safari, и вам опять придется использовать специфические расширения браузеров.

.blogPost img {   
    margin: 22px 0;   
    -webkit-box-shadow: 3px 3px 7px #777;   
}

Полосатые Комментарии

Полосатая раскраска или подсветка каждого второго элемента в последовательности, традиционно связана с выбором всех элементов, с помощью JavaScript, затем прогон их в цикле и подсветка всех четных элементов. CSS3 предоставляет псевдо-класс «nth—child», который делает это до смешного легко, без использования JavaScript. Мы используем его для полосатой раскраски комментариев.

section#comments article:nth-child(2n+1) {   
    padding: 21px;   
    background: #E3E3E3;   
    border: 1px solid #d7d7d7;   
  
    /* Border-radius not implemented yet */   
    -moz-border-radius: 11px;   
    -webkit-border-radius: 11px;   
}

Таинственное значение «2n+1», на самом деле очень простое, если вы понимаете что это значит:

2n – выбор каждого второго элемента списка. Если вы напишете 3n, будет выбран каждый третий элемент, 4n – четвертый, и так далее.

+1 сообщает браузеру, что начать нужно с первого элемента. Если вы знакомы с программированием, то должны знать, что все массивы начинаются с 0, здесь точно так же. Это значит что элемент с номером 1, на самом деле второй элемент в последовательности.

В качестве альтернативы, вы можете написать просто:

section#comments article:nth-child(odd) { ... }

Здесь используется один из наиболее часто используемых стандартных значений, odd и even. Стилизация остальной части комментариев довольно проста для понимания, с вашими новыми знаниями.

Стилизация Формы отправки комментариев, Подвала и Сайдбара

Для стилизации подвала сайдбара и формы комментариев, была использована пара CSS3-техник. В форме комментариев и в подвале, я использовал ту же технику табличной раскладки, что и в основном макете. В сайдбаре использовался border—radius, для добавления закругленных углов различным секциям.

Финальный Дизайн

Смотрите результат нашей работы, со всеми стилями.

Заключение

Когда HTML 5 и CSS3 однажды начнут поддерживать все браузеры, жизнь разработчика веб-сайтов станет гораздо проще. Мы, наконец, перестанем использовать флоаты для раскладки (которые вообще не предназначены для этого), терять значительное количество времени на написание JavaScript-кода, для масштабирования фоновых изображений, или полосатой раскраски таблиц.

Перевод статьи «HTML5 and CSS3: The Techniques You’ll Soon Be Using«, автор Mads Kjaer.

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

  1. Отлично! Все разжевано и объяснено, хотя пока рановато внедрять стили и теги новых версий. Но знать надо. Распечатал для изучения.

    Ответить

  2. спасибо. честно признаюсь, впечатлило своей прекрасной семантикой. а насчет CSS3… ну, вот display:table давно уже есть, а верстать-то приходится, я извиняюсь, и под IE6, и под IE7, так что такую верстку только в сказке увидишь…

    Ответить

  3. ну с одной разницей, это сказка, которая все-таки станет реальностью, правда неизвестно когда

    Ответить

  4. Лет через 10 такая сказка наступит + костыли под осликов. Хотя если в скором времени победит Google Chrome OS и винда совсем умрет, то может и раньше. Будем надеяться на лучшее.

    Ответить

  5. Как то html5 плавно перетекает в xml.

    Вообще читал спецификацию на html5 особенно понравилось про грид.

    Ответить

  9. мда…
    было бы хорошо, но мечтать не вредно…
    на самом деле лет 10 ждать широкого внедрения, как пришлось ждать с css2.
    и все равно будут личности, использующие таких троглодитов, как ие6, как и сейчас, потому, что будут ставить старые пиратские ОС (как сейчас с хп) десятилетней давности и даже не понимать чем они пользуются в инете и не понимать почему все так криво и почему у них такое количество вирусов… И ничем таким беднягам не поможешь… Приходится подстраиваться под них, фактически, вытягивая за собой далекое никчемное прошлое.
    С другой стороны, будет оставаться как и сейчас множество кое-каких сайтов в инете, то ли заброшенных, то ли сделанных школьниками за бутерброды, устаревших и кривых, попадание на которые сродни попаданию в старый развалившийся, но с жителями, жуткий дом в самом центре современного города, но глубже в подворотне.

    Ответить

  10. кстати, замечание:
    самих авторов страничка не проходит валидацию в в3ц как хтмл5, непорядок.

    Ответить

  14. Перешел он, называется…
    Последние версии Оперы УЖЕ поддерживают HTML5, в том числе компоненты контроля.

    Ответить

  15. Мы, наконец, перестанем использовать флоаты для раскладки (которые вообще не предназначены для этого)

    можно подумать что display:table; display:table-cell; display:table-cell; предназначены для этого.

    Ответить

    1. можно подумать что display:table; display:table-cell; display:table-cell; предназначены для этого.

      свойства отображения более предназначены для построения отображения, чем семантические структуры (теги), предназначенные для передачи семантики и смысла.

      Ответить

  19. Автору спасибо, но я не до конца понял.

    Скажите пожалуйста, вы выделили The Flower Blog в самом верху, т.е. в шапке сайта, и заключили его в .

    Но у большинства сайтов стандартная структура такая, что в шапке находится контактная информация, а заголовок находится непосредственно перед основным текстом (возьмем для примера эту страницу )

    В какие теги в данном случае следует заключать шапку сайта с контактной информацией?

    Ответить

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

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