HTML | Верстаем правильно

Краткий обзор некоторых приёмов вёрстки и идей веб-разработки
(По мотивам habrahabr.ru – Вредная верстка)

Верстать шрифты в px, в процентах или в em
Переопределение стилей
Правильный onclick
Раскрашиваем ссылки
img вместо background

Верстать шрифты в px, в процентах или в em

Извечая тема-проблема – как правильно сверстать шрифты. Практикой доказано, что верстать шрифты можно в каких угодно единицах измерения, коль скоро это свойство поддерживается во всех нинешних браузерах. Конечно, любой браузер скажет верстальщику «спасибо», если страница будет свёрстана только в пикселах, или только в em-ах. Но, вот такое простое правило, оказывается труднее всего выдерживать. Тем более, что единиц измерения для работы со шрифтами в CSS гораздо больше, нежели здесь указано. Обратил внимание, что во многих шаблонах CMS DLE используется конструкция вида (в сокращении), где размер всего шрифта задан в пикселах, а заголовки и шрифты в дочерних блоках – в em-ах:

body {font: 13px/17px;}
h1 {font-size: 1.25em;}
h2 {font-size: 1.2em;}
h3 {font-size: 1.15em;}
h4 {font-size: 1.1em;}
h5 {font-size: 1em;}
.myclass {font-size: 0.85em;}

Возможно, это и есть самый оптимальный вариант образмеривания шрифта, позволяющий получить максимально гибкий и настраиваемый шаблон, в котором изменение только одной цифры (17px) масштабирует сразу все шрифты веб-документа.

Переопределение стилей

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

html,body,div,ul,ol,li,dl,dt,dd,pre,form,p {margin: 0; padding: 0;}
и ниже:

p {margin-bottom: 0.4em;}
ul {margin: 0 0 18px 2em;}
ol {margin: 0 0 18px 2.1em;}

Смысл такого кода совершенно непонятен, хотя, повторяю, это и не является явной ошибкой.

Правильный onclick

Правильное подключение javascript в HTML при вёрстке кода веб-страницы – не последнее дело. Эта тема вынесена в отдельную статью «HTML | Правильный onclick» из-за своей важности и обширности.

Раскрашиваем ссылки

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

img вместо background

Давно ставший «притчей во языцех», принцип разделения в шаблоне сайта кода HTML от непосредственного присутствия в нём кода CSS. Например, классический код вставки рисунка (тег img) в тело HTML-документа выглядит так:

или так (если взять вопрос пошире):

Но, такой код допустим только для вставки рисунков (тег img) в новостную (контентеную, изменяемую) часть текста страницы, но не в сам её шаблон. Потому что, новостной блок (content) всё время разный, он загружается индивидуально для каждой веб-страницы и поэтому, в него можно подгружать требуемые рисунки только таким способом – прямо и непосредственно в HTML-код.

С шаблоном сайта – ситуация, несколько иная. Шаблон сайта общий для всех его страниц и, практически все рисунки и код CSS шаблона сайта – повторяются на каждой его странице. Это значит, что их нужно загрузить в браузер пользователя только один раз за сессию и просто периодически обращаться к ним, например при просмотре остальных страниц сайта или при их обновлении. Поэтому-то, с точки зрения оптимизации вёрстки – код CSS можно напрямую использовать в теле HTML-документа только в самом крайнем случае. Таким образом, напрашивается логическое решение – убрать весь код CSS в содержимое файла styles.css, заменить img вместо background-image и отказаться таким образом от постоянной загрузки повторяющихся файлов и стилей. Выглядеть это может, примерно так:

Код HTML:

<a href="#" title="Рисунок" class="risynok" >Рисунок</a>

Код CSS:

.risynok {margin: 0 auto; background:url(../adress/risynok.jpg) no-repeat;}

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