CSS: советы и приёмы, часть 2
Группирование селекторов
Когда у нескольких типов, классов или идентификаторов элемента прописаны одни и те же свойства, ты можешь сгруппировать селекторы, чтобы не указывать одинаковые свойства несколько раз. Это сэкономит место - потенциально очень много. Ты можешь прописывать все селекторы на одной строке или разделять их переносом на другую строку. Например, чтобы для всех элементов заголовков указать семейство шрифтов (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-файл. В качестве дополнительного бонуса, этот приём экономит пару байтов. Чтобы посмотреть, какие браузеры задействованы этим синтаксисом, смотрите таблицу фильтров.
Продолжение
Данная статья разрешена для публикации только на http://visavi.net/