Изменения в псевдоэлементах

Псевдоэлементы существуют еще с версии CSS2, а в спецификации CSS3 синтаксис их применения был очень незначительно пересмотрен. Чтобы освежить вашу память, напомню, что до сих пор p:first-line позволял нацеливаться на первую строку в теге <p>, а p:first-letter — на первую букву. CSS3 требует разделять эти псевдоэлементы двойным двоеточием, чтобы их можно было отличить от псевдоклассов. Следовательно, взамен мы должны писать p::firstletter. Надо отметить, что браузер Internet Explorer версии 8 и ниже не понимает синтаксис с двойными двоеточиями, а способен разобрать только с одинарными.

Практичен ли :first-line для адаптивных веб-дизайнов? Весьма удобная особенность псевдоэлемента :first-line состоит в том, что он по-разному действует в зависимости от ширины области просмотра. Например, мы можем написать и применить следующее правило:

P::first-line { color: #ff0cff;

}

Как вы могли ожидать, первая строка окрашивается в ужасный розовый цвет (в тот момент я думал о фильме «Мулен Руж» (Moulin Rouge)) (рисунок 5.16).

Однако в более узкой области просмотра розовой становится уже более короткая первая строка текста (рисунок 5.17).

Первая строка окрасилась в розовый цвет.

Рисунок 5.17. При уменьшении ширины области просмотра окрашенная строка также становится меньше.

Таким образом, существует удобный способ сделать так, чтобы в адаптивном веб-дизайне первая отображаемая (в том виде, в каком ее визуализирует браузер, а не в том, в каком она представлена в разметке) строка текста была оформлена по-другому, нежели остальные. И при этом не надо прибегать к изменению разметки.

Надеюсь, этот краткий экскурс в область CSS3-селекторов продемонстрировал вам, как они помогают избежать использования дополнительной разметки в адаптивных веб-дизайнах, которая «утяжеляет» их код. В прошлом нам приходилось применять JavaScript-библиотеки вроде jQuery, чтобы осуществлять сложные выборки, однако CSS3 зачастую сводит эту необходимость на нет. Кроме того, отрадно знать, что модуль CSS3 Selectors уже имеет статус W3C Recommendation (REC). Таким образом, это весьма «зрелый» модуль, который вряд ли значительно изменится в дальнейшем.