CSS селекторы: псевдоэлементы

CSS селекторы: псевдоэлементы

От автора: спецификация CSS Pseudo-elements Module Level 4 проливает свет на поведение существующих псевдоэлементов и предоставляет новые. Тем не менее, только несколько из новых псевдоэлементов имеют хоть какую-то поддержку в последних версиях браузеров.

Сегодня мы поговорим о следующих псевдоэлементах:

::before — вставляет генерируемый контент перед контентом элемента

::after — вставляет генерируемый контент после контента элемента

::first-letter — выбирает первую букву элемента

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

::first-line — выбирает первую строку элемента

::selection — стилизует текст, выделенный курсором

Из них элементы ::first–letter, ::first–line и ::selection влияют на контент, который входит в исходники. Псевдоэлементы ::before и ::after, наоборот, вставляют контент в документ, которого нет в исходниках. Разберем поподробнее все псевдоэлементы.

Замечание: синтаксис с одним двоеточием

Вы могли видеть версии ::first–letter, ::first–line, ::before и ::after с одним двоеточием в старом CSS. В CSS2 эти псевдоэлементы задавались через одноразовое двоеточие :. IE8 требует синтаксис с одинарным двоеточием, хотя большая часть других браузеров поддерживает оба варианта. Лучше использовать синтаксис с двойным двоеточием.

Псевдоэлементы ::before и ::after

Большая часть псевдоэлементов позволяет выбирать контент, который уже присутствует в исходниках документа, но не задан с помощью языка (другими словами, ваш HTML). Однако ::before и ::after работают по-другому. Эти псевдоэлементы добавляют генерируемый контент в дерево документа. Созданный контент не существует в HTML исходниках, но он отображается.

Зачем использовать генерируемый контент? Например, можно помечать обязательные поля формы, добавляя контент после лейблов:

/* Применяется к лейблу, ассоциирующемуся с требуемым полем */
.required::after {
 content: ' (Required) ';
 color: #c00;
 font-size: .8em;
}

В нужном поле формы необходимо использовать HTML свойство required. Так как данная информация уже доступна в DOM, то ::before и ::after выступают в роли помощников. Это не критический контент, поэтому его можно и не вносить в исходники.

Замечание: генерируемый контент и доступность

Некоторые скрин ридеры и браузеры распознают и читают генерируемый контент, однако большая часть этого не умеет. Не используйте псевдоэлементы ::before и ::after для предоставления генерируемого контента для пользователей с ограниченными возможностями. Более подробно этот вопрос можно изучить в статье Leonie Watson «поддержка доступности для генерируемого CSS контента».

Другой способ применения ::before и ::after – добавление префикса или суффикса в контент. Вышеупомянутая форма может использовать вспомогательный текст, как показано ниже:

<form method="post" action="/save">
<fieldset>
 <legend>Change Your Password</legend>
 <p>
  <label for="password">Enter a new password</label>
  <input type="password" id="password" name="password">
 </p>
 <p>
  <label for="password2">Retype your password</label>
  <input type="password" id="password2" name="password2">
 </p>
 <p class="helptext">Longer passwords are stronger.</p>
 <p><button type="submit">Save changes</button></p>
</fieldset>
</form>

Заключим наш вспомогательный текст в парные скобки с помощью ::before и ::after.

.helptext::before {
 content: '( ';
}
.helptext::after {
 content: ')';
}

Результат.

CSS селекторы: псевдоэлементы

Возможно, самый полезный способ применения ::before и ::after – очистка обтекаемых элементов. Nicolas Gallagher представил эту технику (которая основана на работе Thierry Koblentz) в своем посте «новый микро clearfix хак»:

/* Для поддержки IE <= 9 используйте :before и :after */

.clearfix::before,
.clearfix::after {
 content: " "; /* Обратите внимание на пробел между кавычек. */ 
 display: table;
}
.clearfix::after {
 clear: both;
}

Добавьте класс clearfix к любому элементу, который необходимо очистить после обтекаемого элемента.

Псевдоклассы ::before и ::after ведут себя полностью, как дочерние элементы тега, за которым они закреплены. Они наследуют все возможные свойства родителя и расположены внутри блока родителя. Они также взаимодействуют с другими блоковыми элементами, как если бы они были настоящими тегами. Свойства display: block или display: table на ::before и ::after работают точно так же, как и на других элементах.

Предупреждение: один псевдоэлемент на селектор

На данный момент на один селектор разрешается применять только один псевдоэлемент. То есть запись типа p::first-line::before неправильная.

Создание типографических эффектов с помощью :first-letter

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

Замечание: первая буква и буквицы

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

Стили ниже добавляют первую заглавную букву во все параграфы p в документе:

p::first-letter {
 font-family: serif;
 font-weight: bold;
 font-size: 3em;
 font-style: italic;
 color: #3f51b5;
}

CSS селекторы: псевдоэлементы

Из скриншота можно заметить, что ::first-letter изменяет line-height первой строки, если элементу было задано значение line-height без единиц измерения. В данном случае все теги p наследуют значение line-height 1.5 от тега body.

Существует три способа сгладить эту проблему:

уменьшить значение line-height для псевдоэлемента ::first–letter, почти всегда подойдет значение .5;

задать line-height с единицами измерения для псевдоэлемента ::first–letter;

задать line-height с единицами измерения для body или родителя ::first–letter.

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

В нашем случае давайте уменьшим значение line-height для p::first-letter до .5 (и перепишем свойства в файле, будем использовать сокращенное свойство font):

p::first-letter {
 font: bold italic 3em / .5 serif;
 color: #3f51b5;
}

Результат можно посмотреть ниже. Заметьте, что нам также нужно было настроить нижний margin каждого параграфа p, чтобы компенсировать уменьшенное значение line-height на p::first-letter.

CSS селекторы: псевдоэлементы

Для создания буквиц понадобится чуть больше строк CSS. В отличие от первых заглавных букв, прилегающий текст к буквице обтекает ее. То есть нам нужно добавить float: left; в наши стили. Также мы добавим верхний, правый и нижний margin:

p::first-letter {
 font: bold italic 3em / .5 serif;
 font-style: italic;
 color: #607d8b; 
 float: left;
 margin: 0.2em 0.25em .01em 0;
}

Плавающий элемент, или в нашем случае псевдоэлемент, заставляет остальной текст обтекать его, как показано ниже.

CSS селекторы: псевдоэлементы

Если вы не используете px или rem для установки размеров, margin и line-height, будет очень сложно идеально стилизовать ::first-letter во всех браузерах.

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

<p>&#8220;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#8221; Fusce odio leo, sollicitudin vel mattis eget, ...</p>

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

CSS селекторы: псевдоэлементы

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Тем не менее, результат будет отличаться, когда знак пунктуации генерируется элементом. Рассмотрим следующую разметку:

<p><q>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</q> Fusce odio leo, sollicitudin vel mattis eget, iaculis sit ...</p>

На данный момент браузеры отрисовывают тег q в виде кавычек, использующихся в определенном языке, которые будут открываться и закрываться. Однако не все браузеры одинаково распознают такие кавычки. В Firefox 42 (см. ниже), Safari 8 и более ранних версиях ::first-letter изменяет только открывающую кавычку.

CSS селекторы: псевдоэлементы

В Chrome, Opera и Yandex открывающая кавычка тега q и первая буква параграфа не стилизуются. Ниже показан скриншот в Chrome.

CSS селекторы: псевдоэлементы

IE применяет стили как к открывающей кавычке, так и к первой букве параграфа. Смотрите ниже.

CSS селекторы: псевдоэлементы

В спецификации CSS Pseudo-elements Module Level 4 говорится, что знак пунктуации, предшествующий или следующий сразу после первой буквы или символа должен стилизоваться. Однако в спецификации нет точного разъяснения насчет применения стилей к генерируемым знакам пунктуации.

Баги браузеров при использовании ::first-letter

По большей части ::first-letter работает во всех браузерах ровно так, как ожидаешь. Как и со всеми CSS свойствами, у данного псевдоэлемента есть парочка багов и случаев неправильного использования, о которых нужно знать.

В Firefox 39 и раньше некоторые символы заставляют Firefox игнорировать правило ::first–letter: ‑,$,^,_,+,`,~,>,<.

Это относится к случаям, когда первый символ задан через ::before и свойство content, а также если он прописан в исходниках документа. Фикса этого бага нет. Если используете ::first-letter, вам придется избегать этих символов в начале параграфа.

Замечание: баги в Blink браузерах

Некоторые версии Blink браузеров не применят правило ::first–letter, если у родителя задано свойство display со значением inline или table. Баг есть в Chrome 42, Opera 29 и Yandex 15. Баг пофиксили в Chrome 44, однако релиз увидит свет не раньше, чем эта книга окажется у вас в руках. Самый простой способ обойти баг – добавить к родителю свойство display: inline-block, display: block или display: table-cell.

Создание типографических эффектов с помощью ::first-line

Псевдокласс ::first-line работает почти как ::first-letter, только эффект распространяется на всю первую строку элемента. Можно, например, делать первую строку каждого параграфа больше и изменять цвет текста:

p::first-line {
 font: bold 1.5em serif;
 font-style: italic;
 color: #673ab7; 
}

Результат можно посмотреть ниже. Заметьте, что изменениям подверглась первая строка каждого параграфа, а не первое предложение. Количество символов, вмещаемых на первой строке, определяется размером шрифта и шириной элемента.

CSS селекторы: псевдоэлементы

Можно принудительно поставить конец первой строки с помощью br или hr, как показано ниже. К сожалению, это не всегда работает. Если ваш элемент может вместить только 72 символа, то тег br после 80-го символа никак не повлияет на псевдоэлемент ::first-line. Вы просто получите странный разрыв строки.

CSS селекторы: псевдоэлементы

Точно так же и с неразрывным пробелом (&nbsp;), который вставляется, чтобы не разрывать слова между строк. Это никак не повлияет на ::first-line. Слово, которое расположено перед &nbsp; будет принудительно перемещено на строку, где расположен текст после неразрывного пробела.

Генерируемый контент, добавленный через ::before, будет отображаться на первой строке, как показано ниже.

CSS селекторы: псевдоэлементы

Если генерируемый текст достаточно длинный, он полностью заполнит первую строку. Однако если добавить display: block (например, p::before {content: ‘!!!’; display: block;}), то контент займет всю первую строку целиком.

CSS селекторы: псевдоэлементы

К сожалению, этот баг до сих пор есть в Firefox 40 и более ранних версиях. Firefox полностью игнорирует правило.

Забавные интерфейсы с помощью ::selection

Псевдоэлемент ::selection относится к так называемым «подсвечивающим» псевдоэлементам, прописанным в спецификации CSS Pseudo-Elements Module Level 4. Данный подсвечивающий псевдоэлемент ранее входил в спецификацию Selectors Level 3, единственный, поддерживающийся в браузерах.

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

CSS селекторы: псевдоэлементы

С ::selection можно использовать не все свойства. В спецификации прописаны только следующие свойства:

color

background-color

cursor

outline и расширенные свойства

text-decoration и ассоциирующиеся свойства (такие как text-decoration-style)

text-emphasis-color

text-shadow

На практике только color и background-color реализованы в браузерах. Разберем пример:

::selection {
 background: #9f0; 
 color: #600;
}

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

CSS селекторы: псевдоэлементы

Совет: комбинации цветов

Помните о доступности при выборе цвета переднего фона и заднего фона для ::selection. Некоторые комбинации цветов дают плохой контраст для слабо видящих людей. Другие комбинации могут быть неразборчивыми для дальтоников. Перед конечным выбором цветов используйте инструмент проверки контраста и симулятор дальтонизма.

В Pseudo-Elements Module также прописаны псевдоклассы ::spelling-error и ::grammar-error. Когда они будут реализованы, мы сможем стилизовать текст с ошибками, проверяемыми по словарю браузера.

Автор: Tiffany Brown

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree