CSS приемы, которые известны не всем.

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

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

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

Сокращаем объем CSS кода.

Начать хотелось бы с напоминания некоторых возможностей CSS спецификации, о существовании которых могут не знать начинающие веб-разработчики. Для уменьшения объема CSS файла, старайтесь применять сокращенный вариант записей для правил, которые это допускают (background, border, font, list-style, margin, outline и padding). Вот пример форматирования текста элемента:

.some-class {
font-weight: bold;
font-variant: small-caps;
font-style: italic;
font-size: 30pt;
line-height: 2em;
font-family: Courier, monospace;
}

Это развернутый вариант CSS правила, который можно значительно сократить:

.some-class {
font: bold italic small-caps 30pt/2em Courier, monospace;
}

Все уместилось в одну строку. Единственное, чем приходится жертвовать, используя сокращенную форму записи CSS правила – это его читабельность. Кроме того, необходимо принимать во внимание следующие условия составления сокращенных вариантов. Во первых, такая форма записи будет работать только в том случае, если в ней будут указаны значения для обеих CSS свойств — font-size и font-family, а очередность их определения должна быть такой же как в приведенном примере (font-family должно определяться в самом конце правила, а font-size непосредственно перед ним. Во вторых, если вы не указываете явно значения для свойств font-style, font-weight или font-variant, то их значения будут автоматически установлены в normal.

Для удобства html верстки, можно каждому элементу страницы назначать несколько CSS классов для его форматирования. Имена классов должны разделяться пробелом (никогда не используйте для этого запятую):

<div class="className-1 className-2 className3"> … </div>

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

Размещение блока по центру.

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

#content-wrap {
width: 750px;
margin: 0 auto;
}

После этого все элементы, входящие в тело документа (находящиеся между тегами <body>  … </body>) необходимо поместить внутрь контейнера <div id="content-wrap">. После этого браузер будет автоматически добавлять одинаковые отступы (margin) справа и слева, что обеспечит центрирование контентного блока сайта относительно окна браузера при любом его размере. Секрет приема в том, что при определении свойства margin с двумя параметрами, первый указывает на отступы от вертикальных границ элемента, а второй отвечает за значения горизонтальных отступов (слева и справа). Вроде бы все просто, но не совсем. Проблемы корректного отображения такой разметки связаны с особенностями работы ранних версий браузера Internet Explorer (до шестой версии включительно), которые все еще нужно учитывать в процессе верстки документов. Для того чтобы добиться того же результата в этих браузерах, необходимо использовать несколько CSS правил:

body {
text-align: center;
}
#content-wrap {
text-align: left;
width: 750px;
margin: 0 auto;
}

Первое правило позволит выровнять контентный блок по центру рабочей области в IE ранних версий, но его побочным эффектом является то, что весь текст внутри блока будет тоже размещен по центру. Второе CSS правило содержит строку text-align: left;, которая определяет необходимое положение текста внутри контентного блока.

Версия CSS файла для печати.

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

В таком случае в заголовке html документа должны присутствовать две строки, привязывающие к странице два CSS файла — один для отображения на экране монитора и второй для печати:

<link type="text/css" rel="stylesheet" href="display_stylesheet.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print_stylesheet.css" media="print" />

Первая строка кода подключает файл CSS форматирования документа для отображения на экране (атрибут media="screen"), а вторая подключает к документу CSS файл, предназначенный для распечатки страницы (media="print").

Что же должен содержать CSS файл предусматривающий форматирование страницы для печати? Чтобы облегчить процесс создания такого варианта файла, необходимо для начала создать пустой документ и сохранить его с именем print_stylesheet.css (или ваш вариант названия, но с расширением .css). После этого нужно подключить вновь созданный CSS файл к коду документа, для того чтобы мы видели вариант оформления веб-страницы для печати на экране и могли вносить необходимые коррективы в его визуальную структуру. Для этого в заголовок html файла документа вставляем следующую строку:

<link type="text/css" rel="stylesheet" href="print_stylesheet.css" media="screen" />

Затем, скопируйте полностью весь код из файла display_stylesheet.css во вновь созданный CSS файл для печати. После этого останется лишь внести необходимые изменения в структуру CSS кода нового файла print_stylesheet.css. К примеру, для тех компонентов веб-страницы, которые не нужно отображать при выводе на печать (элементы меню; изображения, выполняющие декоративную функцию; фоновое оформление документа и/или отдельных его элементов; и др.) необходимо определить CSS правило: display: none;, что позволит убрать их из распечатанной на принтере веб-страницы. Кроме того, это могут быть и другие изменения, касающиеся версии документа для печати, которые, по вашему мнению, необходимо внести в экранный вариант форматирования веб-страницы.

Значения границ элемента по умолчанию.

В заключение данной статьи рассмотрим ситуации, когда необходимо учитывать значения CSS свойств устанавливаемых по умолчанию. Иногда, создавая правило для границ элемента, вы определяете в его рамках несколько параметров (порядок не имеет значения):

border: solid 3px #000;

В результате получим черную сплошную границу элемента шириной в 3 пикселя. Но в данном случае правило можно значительно упростить, учитывая то, что если цвет и толщина границ элемента не указаны явно, то они принимают значения по умолчанию. Что же это за значения? Согласно CSS спецификации ширина границ по умолчанию эквивалентна ключевому слову medium (это 34 пикселя), а их цвет соответствует цвету текста, находящегося в пределах форматируемого элемента. Поэтому, если эти значения являются приемлемыми для вашего случая, то нет необходимости явно определять их и ваше правило будет выглядеть значительно проще:

border: solid;

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

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

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