10+ тонкостей HTML верстки

О HTML верстке существует непомерное количество талмудов, учебников, уроков и статей. Конкретно моя статья посвящена некоторым тонкостям, с которыми приходится сталкиваться во время верстки новых проектов. Почему и откуда вообще возникают эти тонкости? В основном из-за отсутствия знаний, не желания их применять или просто лени использовать семантическую структуру документа и соответствующие HTML-теги из спецификации W3C. Именно эти мелочи пополняют исходный код ненужной кучей, захламляющих строк, что в свою очередь приводит к увеличению времени загрузки странички. Так вот, чтобы избежать неприятных моментов во время работы над новым проектом я и написал  эту статью.

1. Верстка галерей

Галереи изображений или видео с подписями (caption), присутствует буквально на каждом сайте. Для их создания я настоятельно рекомендую использовать список определений — DL:

<div id="gallery">
	<dl>
		<dt><img src="img/some-img.jpg" alt="" /></dt>
		<dd>Картинка номер 1</dd>
	</dl>
	<dl>
		<dt><img src="img/some-img.jpg" alt="" /></dt>
		<dd>Картинка номер 1</dd>
	</dl>
	<dl>
		<dt><img src="img/some-img.jpg" alt="" /></dt>
		<dd>Картинка номер 1</dd>
	</dl>
	<dl>
		<dt><img src="img/some-img.jpg" alt="" /></dt>
		<dd>Картинка номер 1</dd>
	</dl>
</div>

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

#gallery dl {
	float: left;
	width: 48%;
	margin-right: 4%;
}
#gallery dt {
	border: 1px solid #f9f9f9;
	padding: 2px;
	background: #fff;
}
#gallery dd {
	text-align: center;
	color: #444;
}

А в конце добавим небольшой скрипт JS который будет убирать отступ справа у каждого второго элемента:

<script type="text/javascript">
	jQuery('#gallery').find('dl:nth-child(2n)').css({'margin-right':'0'});

В итоге получаем отличную кроссбраузерную галерею.

2. Псевдоэлемент :first-child

:first-child — это волшебный псевдоэлемент, который работает для первого элемента какого-нибудь блока или списка. Почему он? Я постоянно его использую потому, что в отличии от :last-child, браузер ИЕ-7 его поддерживает. Пользуюсь им при стилизации списков:

.list li {
	border-top: 1px solid #e8e8e8;
	padding: 5px 0;
}
.list li:first-child {
	border-top: none;
}

3. Псевдоэлемент :first-letter

Так же поддерживается браузером ИЕ-7, что очень радует. Основное назначение этого псевдоэлемента — стилизация первой буквы абзацев или заголовков, или чего Вам в голову прийдет. В стилях применяется так:

p:first-letter {
	font: bold 14px Helvetica;
	color: #ff0000;
}
h2:first-letter {
	font: normal 30px Helvetica;
	color: #006699;
}

И получаем красивую первую буковку.

4. Сбрасываем обтекание (float)

Как Вы могли заметить из первого примера, мы делали галерею в две колонки, с помощью правила CSS float. Это правило довольно плотно вжилось в современную верстку, но чтобы его применять нужно понимать, что если обтекание элемента не сбросить, то это правило будет ламать Ваш проект. Ну, и нужно иногда стилизировать родителя плавающего элемента, а если у родительского блока все элементы плавающие, то он имеет нулевую высоту, а если добавить ему рамку, то увидим льшь одну сплошную линию.

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

<div class="clear"></div>

А в файле стилей нужно добавить такие правила для этого класса:

.clear {
	clear: both;
	height: 1px;
	margin-top: -1px;
}

Теперь можно стилизовать родителя на Ваш вкус и цвет)

5. Вставка flash в HTML страницу

Этот пункт я пишу в первую очередь для себя, потому, что запомнить наизусть это нереально. Приходится гуглить или смотреть старые проекты, а написав, буду подсмаривать сюда:

<object>
<EMBED 
	pluginspage='http://www.macromedia.com/go/getflashplayer' 
	src='swf/some-flash.swf' 
	width='120' 
	height='150' 
	type='application/x-shockwave-flash' 
	wmode="transparent" 
	menu="false" 
	quality="high">
</EMBED>
</object>

Имейте ввиду, что нужно указать правильный путь (src) к SWF файлу, ширину (width) и высоту (height).
И запомните, что разные браузеры по разному интерпретируют положение вашей вставки, поэтому желательно обрамлять флэш-вставку в контейнер и для точности макета с шириной и высотой флэша нужно будет поиграться. Для ИЕ7 нужно использовать хаки CSS.

6. Прибиваем footer к низу страницы

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

Стандартная структура страницы:

<!Doctype HTML>
<html>
<head>...</head>
<body>
	<div id="header"></div>
	<div id="main"></div>
	<div id="footer"></div>
</body>
</html>

Ну и совсем немного стиля для футера:

html {
	height: 100%;
}
body {
	position: relative;
	padding-bottom: 200px;
	height: 100%;
}
#footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 180px;
	background: #f0f0f0;
}

И все круто работает.

7. Кроссбраузерный inline-block

Благодаря правилу inline-block строчный элемент можно сделать блочно-строчным, а строчный — строчно-блочным))). Это свойство очень удобно использовать при стилизации практически любых элементов на странице. Работает отлично, великолепная альтернатива обтеканию (float).

Но, есть один нюанс: не все браузеры его понимают, поэтому нужно писать все корректно, вот так:

.someBlock {
	display: inline-block;
	vertical-align: top;
	width: 200px;
	height: auto;
	margin-right: -4px;
	zoom: 1;
	*display: inline;
}

8. Создаем  самое простое модальное окно

Модальные окна — это всплывающие (выпадающие / проявляющиеся) блоки, которые вызываются при клике на ссылку. В модальном окне Вы можете написать любой текст, вставить форму, галерею и т.д. по Вашему вкусу. Очень полезный функционал. Я покажу, как его сделать на примере «правил использования сайта».

Так вот, для того, чтобы создать модальное окно нужно:

8.1. Создать html разметку:

<!--
В атрибуте name указываем что это модальое окно.
В атрибуте href указываем, какой блок нам нужно показать.
-->
<a name="modal" href="#terms">terms of payment</a>

<!--
А это и есть наше модальное окно, которое появится при клике по ссылке.
В <span> поместим кнопку закрытия модального окна.
-->
<div id="terms">

	<h2>Terms of Payment</h2>

	<h3>Program Payment</h3>
	<p>Lorem Ipsum.</p>
	<p>Lorem Ipsum.</p>

	<h3>Refund Policy</h3>
	<p>Lorem Ipsum.</p>
	<p>Lorem Ipsum.</p>
	<p>Lorem Ipsum.</p>
	<p>Lorem Ipsum.</p>

	<span class="close">OK</span>

</div>

8.2. Напишем jQuery скрипт, который заставит работать модальное окно:

/* Находим все ссылки, которые содержат модальные окна */
$('a[name=modal]').click(function(){

// В конец html документа добавляем маску, она затемнит весь документ
// для выделения модальноого окна
$('body').append('<div id="mask"></div>');

// Заносим в переменную значение атрибута href ссылки
var openBox = $(this).attr('href');

// Показываем маску и модальное окно
$('#mask').fadeIn();
$(openBox).fadeIn();

// Удаляем маску и скрываем модальное окно
// при клике по закрывающему элементу
$('.close').click(function(){
	$('#mask').remove();
	$(openBox).fadeOut();
});	

// Запрещаем обычное поведение ссылки
	return false
});

8.3. Стилизируем все оптимально и правильно

#mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .7;
	filter: alpha(opacity=70);
	z-index: 1000000;
}
#terms {
	display: none;
	position: fixed;
	z-index: 1111111;
	top: 80px;
	left: 50%;
	margin-left: -400px;
	width: 800px;
	height: 540px;
	padding: 20px 40px;
	background-color: #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	zoom: 1;
}

Вот и модальное окошко готово.

9. Корректное использование правила @font-face

С введением правила @font-face в мире WEB произошла типографическая революция, в результате которой, практически любой шрифт можно использовать на страницах своего блога (сайта). Главное убедиться, что шрифт поддерживает русский (украинский) алфавит. В этом разделе я кратко и доходчиво объясню как пользоваться этим правилом.

Первое, что нужно это достать где-то шрифт в формате .ttf, который Вы хотите использовать. После того, как нагуглите и скачаете шрифт, создайте папку fonts в корне проекта и скопируйте в нее шрифт. Следующим этапом открывайте файл стилей и, после сброса дефолтных стилей, пишите правила для шрифта:

/* = Font Face */
@font-face {
font-family: 'NewFont';
	src: url('../fonts/some-font.eot');
	src: url('../fonts/some-font.eot?#iefix') format('embedded-opentype'),
             url('../fonts/some-font.woff') format('woff'),
	     url('../fonts/some-font.ttf') format('truetype'),
	     url('../fonts/some-font.svg#NewFont') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* А так его применяют */

p {
	font: bold 24px 'NewFont';
}

Как Вы могли заметить, помимо формата шрифта .ttf, нужны еще три формата .woff, .svg и .eot — для Webkit браузеров, Оперы, Интернет эксплорера. А получить их можно на следующих сервисах бесплатной генерации:

• FreeFontConverter
• Font 2 Web
• FontSquirrel

После генерации, обязательно просмотрите файл с расширением .woff, если в нем отображается шрифт неверно, то сгенерируйте его другим сервисом.

И если Вы генерировали шрифт из формата .otf, то из него реально ничего не получится — шрифт будет сильно размазанный и явно Вас не устроит, поэтому важно иметь конкретно шрифт .ttf.

Вот и все тайны.

10. Включаем сглаживание шрифтов в браузерах

Единтсвенное, чем меня привлекают браузеры семейства MSIE (ИЕ) это отображение шрифтов. Я в них буквально влюблен. А вот для остальных популярных браузеров нужно включать сглаживание и отключать рендеринг шрифтов в стилях, и помимо этого еще нужна правильная настройка видеокарты.

Так вот чтобы убрать зернистость (пиксельность) больших букв нужнодобавить следующие правила в Ваш файл стилей к тегу body:

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeSpeed;
}

Замечу, что если видеокарта «слабенькая» или настроена «коряво», то никакого эффекта Вы не заметите, абсурд))

11. Подключаем фавикон

Помимо логотипа фавикон это второе, жизненно необходимое каждому сайту, изображение, которое отображается в названии вкладок любого браузера, так сказать лицо сайта. И когда на его месте присутствует стандартная картинка браузера, согласитесь не сильно приятно. Чтобы избежать неловкостей, просто добудьте где-нибудь изображение, будущий фавикон (в формате .png или .jpg) воспользуйтесь сервисом http://www.favicon.cc/ и сохраните свой favicon.ico в папке с фоновыми изображениями Вашего проекта.

И в тег head добавьте такую строку:

<link rel="Shortcut Icon" type="image/x-icon" href="http://ваш-сайт.юа/img/favicon.ico" />

12. Поворачиваем текст на 90 градусов

Тоже часто применяемая фича) на всяких картинках подписи и т.д. и т.п., не будем многословными, а просто добавим класс .vertical-text к нужному текстовому блоку и напишем ему такие стили:

.vertical-text {
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	writing-mode: tb-rl;
	width: auto;
	text-align: center;
}

Заключение:

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