CSS псевдоэлементы. Полное руководство.

Перевод статьи:  CSS Pseudo Elements — Full Guidance.
Автор:  Andy Walpole.

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

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

Но ситуация значительно улучшилась после снятия со счетов IE6, и единственным оставшимся ограничением в использовании псевдоэлементов является седьмая версия этого браузера — IE7, которая, надеемся, также вскоре будет упразднена.

Псевдоэлементы спецификации CSS 2.1.

Среди множества других, существует всего два псевдоэлемента, которые полномасштабно поддерживаются всеми самыми популярными браузерами, включая IE начиная с пятой версии – это :first-letter и :first-line.

Цель их применения вполне очевидна. Ниже приведены соответствующие примеры:

p:first-letter {
font-size: 120%;
}
p:first-line {
font-size:120%;
}

Первый пример позволяет увеличить размер первого символа элемента параграфа <p> до 120%, в то время, как использование второго подразумевает увеличение шрифта первой строки того же параграфа на те же 120%. Эти приемы, действительно, достойны внимания и позволяют придать дизайну страницы черты типографического оформления (*Буквица, авторская информация и т.д.).

Последние два псевдоэлемента первого релиза (спецификация CSS 2.1) – это :before и :after. А жизненно важным компонентом этих псевдоэлементов является декларация content. Примеры их использования:

p:before {
content: "Этот текст добавляется непосредственно перед элементом параграфом";
}
p:after {
content: "Этот текст добавляется непосредственно после элемента параграфа";
}

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

content: url("image.gif");

Для полного понимания важности этих псевдоэлементов нужно лишь немного поэкспериментировать с ними на практике. Попробуйте, допустим, руководствуясь приведенными выше примерами, добавить к существующим на странице элементам псевдоэлементы в качестве новых элементов изображений, создавая таким образом различные эффекты. Это могут быть необычные кавычки для оформления цитат, размеченных с помощью элемента <blockquote>, пиктограммы элементов навигационного меню и тому подобные дизайнерские решения. Необходимого интервала между псевдо и явным элементом можно добиться с помощью добавления внутренних отступов и полей (padding и margin).

Ощутить весь потенциал псевдоэлементов :before и after можно лишь в процессе их использования на практике. Но имейте ввиду, что они не поддерживаются в IE6 и IE7.

Псевдоэлементы спецификации CSS 3.0.

Согласно решению специалистов консорциума W3C, касающегося CSS 3.0 спецификации, псевдоэлементы должны использоваться с предшествующим им двойным двоеточием, а не одним, как это было предусмотрено в CSS 2.1. Это сделано с целью их визуального выделения на фоне псевдоклассов. В результате чего, рассмотренные выше псевдоэлементы принимают следующий вид:

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

Помимо измененного синтаксиса, в CSS 3.0 введены пять новых псевдоэлементов:

::selection
::value
::choices
::repeat-item
::repeat-index

Давайте рассмотрим их подробнее.

::selection

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

::selection {
background-color: red;
color: yellow;
}

::-moz-selection {
background-color: red;
color: yellow;
}

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

Помимо этого, при помощи псевдокласса ::selection можно изменять вид курсора и выделение контура для выбранного фрагмента текста. (*На момент перевода статьи ни один современный браузер не отреагировал на установленные в CSS правиле свойства cursor и outline, с псевдоэлементом ::selection. Возможно в будущем такая поддержка будет реализована.)

::value  /   ::choices  /   ::repeat-item  /   ::repeat

Эти четыре псевдоэлемента, хотя и предусмотрены новой CSS 3.0 спецификацией, но на данный момент не применяются. Причина в том, что они предназначены для использования в новой технологии представления пользовательских форм – XForms, которая является детищем инженеров W3C консорциума и представляет собой XML приложения, выполняющиеся на стороне клиента, при помощи которых реализуется совершенно новое поколение веб-форм.

XForms предусматривает использование специальных плагинов для браузеров, которые были запланированы для нового стандарта — языка XHTML 2.0, так и не вышедшего в свет.

* Примечание переводчика.

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

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