CSS советы и приёмы, часть 2

В этой части я дам тебе несколько советов по группированию селекторов, горизонтальному выравниванию текста, импортированию CSS и по нескольким другим проблемным вопросам. Если ты чего-то здесь не нашёл, попробуй почитать первую часть (CSS советы и приёмы, часть 1).

Группирование селекторов в CSS

Ты можешь группировать селекторы, чтобы не указывать одинаковые свойства элементов несколько раз. Это поможет значительно сэкономить место в объёмных CSS-файлах. Можно прописывать все селекторы на одной строке или разделять их запятой и переносить каждый из них на новую строку.

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

h1,h2,h3,h4,h5,h6 {
font-family: Lucida Grande, Lucida, Arial, Helvetica, sans-serif;
color: #333;
margin: 1em 0;
}

Теперь ты понимаешь, как группировка может сэкономить довольно приличный объём свободного места. Если одинаковых свойств много, то экономия соответственно возрастает.

Несовпадающие свойства можно отдельно указать сразу после группы заголовков:

h1 { font-size:2em; }
h2 { font-size:1.6em; }

Стиль ссылок по порядку

Когда стиль ссылок прописывается в CSS, необходимо помнить о порядке расположения всех правил. В основном, лучше всего указывать их в следующем порядке: :link :visited :hover :active. Если выделить первую букву каждого из правил, то получится аббревиатура “LVHA” после чего можно преобразовать эту аббревиатуру в “LoVe HAte” (“Любовь Ненависть”) или другое легко запоминающееся словосочетание. О порядке состояний ссылок хорошо написал Ерик Майер в своей статье Link Specificity (англ.).

Чтобы стало удобнее передвигается по ссылкам с помощью клавиатуры, можно подумать о состоянии :focus. Благодаря :focus возможно различать выделенную ссылку и обычную ссылку. Выбор порядкового места для :focus зависит от желаемого результата. Для того, чтобы сфокусированные элементы показывали :hover эффект, необходимо указать :focus перед :hover. Чтобы сфокусированные элементы не обращали внимания на эффект :hover, необходимо :focus указывать после :hover.

Выравнивание по центру

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

<div id="wrap">
<!-- контент страницы -->
</div>

то ты можешь сделать горизонтальное выравнивание по центру, используя следующий CSS:

#wrap
width:760px; /* любое другое значение */
margin:0 auto;
}

Ширина #wrap вычитается из всей ширины окна браузера, и разница равномерно распределяется между правым и левым отступами. Ширина не обязательно должна быть фиксированной — ты можешь использовать любую единицу измерения.

Internet Explorer 5-ой версии для Windows не может обрабатывать эти значения, но у этого браузера есть полезная ошибка в парсере, которую можно использовать для того, чтобы присвоить свойство text-align для элементов блочного уровня. Если тебе необходимо, чтобы разметка страницы отображалась в этом браузере по центру, то вместо предыдущего кода используй следующий CSS:

body {
text-align:center;
}
#wrap {
width:760px; /* любое другое значение */
margin:0 auto;
text-align:left;
}

Первое правило заставляет IE5/Win выравнивать по центру всё, что находится внутри элемента body. Остальные браузеры выравнивают по середине только текст. И поскольку свойство text-align является наследуемым, весь текст в документе будет выровнен по центру. Выравнивание текста всей страницы по центру необходимо в редких случаях, поэтому следующее правило (text-align:left) перезаписывает этот эффект и выравнивает весь текст, находящийся в контейнере #wrap, по левому краю.

Соответственно этот приём может быть использован, чтобы горизонтально выравнивать элементы блочного уровня относительно друг друга.

(По теме: CSS: точно посередине страницы)

Импортирование и скрытие CSS

Общепринятым методом, скрывающим CSS-файл от старых браузеров, является метод @import. Но этот приём часто используется таким образом, что CSS не скрывается от Internet Explorer 4:

@import url("main.css");

Я долго думал о возможном решении этой проблемы. Где-то я читал, что метод @import прячет CSS от устаревших браузеров, но когда я проверял результаты этого приёма в IE4, то обнаружил, что этот браузер сильно искажает импортированный CSS. Вместо этого я использую следующий синтаксис для @import:

@import "main.css";

Благодаря этому, Internet Explorer 4 больше не импортирует CSS-файл. В качестве дополнительного бонуса, этот приём экономит пару байтов. Чтобы узнать, какие браузеры задействованы этим синтаксисом, смотрите таблицу фильтров.

Специально для Internet Explorer

Иногда (чаще всего), чтобы решить проблему некорректной обработки CSS в Internet Explorer, необходимо прописывать альтернативные CSS-правила именно для этого браузера.

Существует много CSS-хаков (обходных путей), но я предпочитаю использовать несколько из них, и только в том случае, когда я не могу найти иного способа достичь нужного результата. Скоро появится Internet Explorer 7, в котором будет улучшена поддержка CSS. Также разработчики рекомендуют не использовать обходные пути (CSS-хаки) вообще. Поэтому самым безопасным будет использование специальных комментариев для IE (conditional comments) — все подробности ниже.

Чтобы спрятать что-либо от IE, можно воспользоваться child selector (англ.):

html>body p {
код CSS
}

Звёздочка и html спрячут правило от всех браузеров, кроме IE:

* html p {
код CSS
}

Иногда тебе может понадобиться прописать CSS для IE/Win, но не для IE/Mac. Для этого можно использовать закомментированный обход с обратным слэшом:

/* \*/
* html p {
код CSS
}
/* */

Ещё одно решение — я использую его всё чаще и чаще, так как считаю, что следующий способ наиболее устойчив к будущим изменениям, нежели CSS-хаки. Я говорю о специальных комментариях (conditional comments). Ты можешь использовать эти комментарии, чтобы выдавать для IE/Win совсем иной CSS-файл, содержащий все необходимые правила, предназначенные для правильной работы именно этого браузера. Я считаю, что это самый лучший способ, предотвращающий использование обманных путей и мусора в CSS-файлах. Также, ты избегаешь возможности испортить “настоящий” CSS-файл собственными расширениями IE, такими как выражения (expressions), которые иногда нужны.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Также этот метод предотвращает мерцание страницы (Flash of Unstyled Content), которое появляется в IE/Win в том случае, если в элементе head нет элементов link или script.

Каков размер этого квадрата?

Если что-то пошло не так, начни с проверки CSS. Любой может допустить ошибку.

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

Ещё одно возможное средство для поиска проблем — свойство outline. Очертание контура очень похоже на кромку, но не влияют на объём и позиционирование элементов. Единственный минус — отсутствие поддержки свойства outline во многих браузеров. Насколько я знаю, на данный момент это свойство поддерживают только Safari, OmniWeb, и Opera.

Стиль CSS кода

При написании CSS, можно использовать много различных стилистических приёмов. За всё время я использовал разные методы, но остановился на следующем стиле (на данный момент):

selector1,
selector2 {
property:value;
}

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

Я заканчиваю каждое объявление точкой с запятой. Можно не ставить точку с запятой после самого последнего объявления, но при этом очень легко забыть о добавлении точки с запятой, если в будущем добавить новое объявление, что обычно приводит к появлению в CSS трудно находимых ошибок.

Наконец, закрывающая скобка ставиться на отдельную строку.

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

— перевод: umade.ru | оригинал на английском: CSS tips and tricks, Part 2