Автор: Roger Johansson
Перевод: Вакорин Никита
![]()
Источник: http://umade.ru/
В этой части я дам тебе несколько советов,
содержание которых включает в себя группирование селекторов,
горизонтальное выравнивание текста, импортирование CSS и ещё несколько
проблемных вопросов. Если ты чего-то здесь не нашёл, попробуй
почитать первую часть.
Группирование селекторов
Когда у нескольких типов,
классов или идентификаторов элемента прописаны одни и те же
свойства, ты можешь
сгруппировать
селекторы, чтобы не указывать одинаковые свойства
несколько раз. Это сэкономит место - потенциально очень много.
Ты можешь прописывать все селекторы на одной строке или
разделять их переносом на другую строку.
Например, чтобы
для всех элементов заголовков указать семейство шрифтов (font
family), цвет и отступы, ты можешь написать
CSS следующим
образом:
h1,H3,h3,h4,h5,h6 {
font-family:"Lucida
Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
Если сравнивать с ситуацией,
когда все свойства прописываются отдельно для каждого
элемента, то группировка экономит приличный объём свободного
места. Если одинаковых свойств много, то экономия места
возрастает.
Затем ты можешь отдельно указать любые
свойства, несовпадающие с другими элементами, например размер
шрифта (
font-size):
h1 { font-size:2em; }
H3 { font-size:1.6em; }
Указывай стили ссылок в правильном порядке
Когда
применяешь
CSS для разных
состояний ссылок, необходимо подумать о порядке расположения
правил. В основном, лучше всего указывать их в следующем
порядке:
:link :visited
:hover :active. Если выделить первую
букву каждого из состояний, то получится аббревиатура "LVHA"
после чего можно преобразовать эту аббревиатуру в "LoVe HAte"
("Любовь Ненависть"
alt=
src="http://www.umade.ru/images/smilies/smiley002.gif"
border=0> или другое легко запоминающееся словосочетание. О
порядке состояний ссылок хорошо написал Ерик Майер в своей
статье
Link
Specificity (англ.).
Чтобы облегчить понимание тем,
кто передвигается по ссылкам с помощью клавиатуры, можно
подумать о состоянии
:focus. Благодаря
:focus возможно различать выделенную ссылку и
обычную ссылку. Выбор порядкового места для
:focus зависит от желаемого результата. Если ты
хочешь, чтобы сфокусированные элементы показывали
:hover эффект, то необходимо указать
:focus перед
:hover. Если ты хочешь,
чтобы
:focus перезаписывал эффект
:hover, то указывай
:focus после
:hover.
Выравнивание по центру
Это довольно простой способ
выравнивания элементов по центру, но он заслуживает повторного
внимания, так как я вижу, что у многих новичков возникают с
этим проблемы. Для того чтобы элемент выравнивался
горизонтально по центру, необходимо указать ширину и
горизонтальные отступы этого элемента. Если вся разметка вашей
страницы заключена в контейнер следующим образом:
<div id="wrap">
<!-- Your layout goes here -->
</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-файлов от
старых браузеров является использование приёма
@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 {
/* declarations */
}
Звёздочка и html спрячет
правило от всех браузеров, кроме
IE:
* html p {
/* declarations */
}
Иногда тебе может
понадобиться выдать определённый
CSS для
IE/Win,
но не для
IE/Mac.
Для этого тебе нужно использовать закомментированный обход с
обратным слэшом:
/* \*/
* html p {
declarations
}
/* */
Ещё одно решение - я
использую его всё чаще и чаще, так как я считаю, что следующий
способ наиболее устойчив к будущим изменениям, нежели
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 трудно
находимых ошибок.
Наконец, закрывающая скобка ставиться на
отдельную строку.
Да, пустое пространство может быть
хорошим фактором для удобочитаемости кода, но мне нравится,
когда всё как можно проще, без особого негативного влияния на
удобочитаемость.
Обсудить
в форуме...>>>>
