На сайте, посвященном кино, заметил, что заголовок сниппета Яндекс взял из h4 тега, коих на странице было 5 штук. При этом текст сниппета был сформирован из релевантного запросу текста несколькими абзацами выше. Нужно отметить, что сформированный таким образом сниппет получился релевантнее запросу пользователя, чем если бы он был сформирован на основе всей страницы.

Следующий пост будет о WAI-ARIA, затем об имитационных играх. Тематика блога отныне – интернет-маркетинг и управление ИТ.

За прошедшие полгода все мои 3 сайта постигла та же участь, что и этот блог. Новые сайты сделал на .рф, Яндекс подозрительно долго их индексирует, Гугл подозрительно низко ранжирует.

Итак, начнём:

Вы когда-нибудь попадали в ситуацию, когда вы пытались применить CSS-стиль к элементу, но элемент их не использовал? Выходит, что Ваши стили игнорируются, но вы не можете понять почему. Может быть, вы решали эту проблему воспользовавшись атрибутом !improtant, или, в качестве последнего аргумента, inline-стилями. Очень вероятно, что проблема, с которой вы столкнулись, была связана с приоритетностью CSS-стилей.

Лучшее понимание того, какой из CSS-стилей получит больший приоритет, может привести к меньшим трудностям с CSS и более чистому и организованному CSS-коду, поэтому, давайте взглянем на три свойства, которые и решают, какое CSS-правило будет применено к HTML-элементу:

• Определённость;
• Наследование;
• Каскадность.

Понимание этих правил приведёт вас на следующий уровень в познании CSS.

Определённость

Допустим, у вас есть HTML-код, содержащий абзац с применённым к нему классом 'bio'. Кроме того, у вас есть следующие два CSS-правила:

p {font-size: 12px}
p.bio {font-size: 14px}

Какого размера вы ожидаете увидеть шрифт в абзаце, 12 или 14 пикселей? Вы можете предположить, что в данном случае размер шрифта будет 14 пикселей. Вторая строчка 'p.bio' определена точнее, чем первая, когда дело доходит до абзаца с классом 'bio'. Однако зачастую понять какова определённость не так просто.

Рассмотрим, например, следующий код:

<div id="sidebar">
<p class="bio">Ваш текст</p>
</div>

div p.bio {font-size: 14px}
#sidebar p {font-size: 12px}

На первый взгляд, первая строка CSS-кода выглядит более определённой, но, на самом деле, точнее определено правило во второй строке. Почему?

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

Определённость подсчитывается путём сложения разных компонентов селектора и выражения их в форме (a,b,c,d). На примерах ниже будет понятнее, но для начала компоненты:

• Элемент, псевдоэлемент: d=1 — (0,0,0,1);
• Класс, псевдокласс, атрибут: c=1 — (0,0,1,0);
• Идентификатор (#id): b=1 — (0,1,0,0);
• Inline-стиль: a=1 — (1,0,0,0);

Идентификатор определён точнее, чем класс, а класс определён точнее, чем элемент.

Вы подсчитываете определённость складывая каждый из выше приведённых компонентов селектора. Важно помнить, что (0,0,1,0) более определено, чем (0,0,0,15). Давайте взглянем на некоторые примеры, чтобы сделать подсчёты понятнее:

• p: 1 элемент — (0,0,0,1);
• div: 1 элемент — (0,0,0,1);
• #sidebar: 1 идентификатор — (0,1,0,0);
• div#sidebar: 1 элемент, 1 идентификатор – (0,1,0,1);
• div#sidebar p: 2 элемента, 1 идентификатор — (0,1,0,2);
• div#sidebar p.bio: 2 элемента, 1 класс, 1 идентификатор — (0,1,1,2);

Теперь вернёмся к примеру, рассмотренному нами выше:

div p.bio {font-size: 14px} — (0,0,1,2)
#sidebar p {font-size: 12px} — (0,1,0,1)

Правило во второй строке определено точнее и, поэтому, оно является приоритетным.

И последний пункт, перед тем как мы перейдём к наследованию. Когда вы помечаете CSS-свойство атрибутом !important, вы переписываете правила определённости, таким образом в следующем коде

div p.bio {font-size: 14px !important}
#sidebar p {font-size: 12px}

приоритет получает правило в первой строчке. !important по прежнему является средством для обхода базовых правил CSS и не должен применяться, если вы понимаете CSS.

Наследование

Идею наследования понять относительно легко. Элементы наследуют стили от родительского контейнера. Установив красный цвет для тэга body, вы, если не задано иное, получите красный текст внутри всех элементов тэга body.

Но не все CSS-свойства наследуются. Например внешние и внутренние отступы не наследуются. Если вы установите свойства margin или padding для div’а, абзацы внутри этого div’а не будут наследовать эти свойства. Абзац будет использовать стандартные браузерные значения margin и padding, пока вы не установите иные.

Однако можно явно указать, что элемент наследует стиль родительского контейнера. Например, вы можете объявить:

p {margin: inherit; padding: inherit}

Тогда абзац будет наследовать отступы родительского контейнера.

Каскадность

Каскадность контролирует распределение приоритетов CSS-стилей и работает следующим образом:

1. Найти все CSS-стили, применяемые к элементу, и свойство, для которого определяется приоритет.
2. Отсортировать стили по происхождению и весу. Происхождение говорит об источнике стилей (авторские, пользовательские, стандартные браузерные стили), вес говорит о важности стиля. Авторский стиль имеет больше веса, чем пользовательский, который имеет больший вес, чем браузерный. Стили помеченные атрибутом !important имеют больший вес, чем обычные. (Примечание переводчика) Если все стили помечены !important, авторские стили имеют больший вес, чем браузерные, но меньший вес, чем пользовательские.
3. Подсчитать определённость.
4. Если и определённость и происхождение одинаковы, стиль, объявленный позже, имеет больший приоритет. CSS-код, объявленный в самом HTML-коде, всегда „позже“ подключаемых стилей, несмотря на относительный порядок объявления.

#3му шагу вы должны уделять наибольшее внимание.

#2 Просто поймите, что стиль будет выбран в зависимости от того, как пользователь настроил свой браузер.

Несмотря на то, что стандартные стили будут переписаны вашими, стандартные стили существуют и часто становятся причиной проблем с кросс-браузерностью. Исключить из расчётов стандартные стили можно, воспользовавшись такими CSS reset’ами, как CSS Reset Eric’а Meyer’а или YUI Reset CSS от Yahoo.

Резюме

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

Главное правило, которого нужно придерживаться в работе с CSS — использовать как можно меньшую определённость, нужную для стилизации ваших элементов. Например, используйте #sidebar вместо div#sidebar. Я позволяю себе нарушать это правило гораздо чаще, чем следовало бы, но использование наименьшей определённости сделает дополнение стилей правилами с большей определённостью гораздо более удобным.

Если вы будете использовать наибольшую определённость, в последующем вы можете столкнуться с проблемами, которые вновь будете решать с помощью атрибута !important или inline-стилей. Начинайте с наименьшей определённости и увеличивайте её по мере необходимости.