Каков статус псевдоэлемента ::selection?
С тех пор, как в распространенный фронтэнд-шаблон HTML5 Boilerplate был включен псевдоэлемент ::selection, многие CSS-разработчики до сих пор включают это селектор в свои универсальные стилевые наборы.
В целях кроссбраузерности псевдоэлемент ::selection (который используется для смены стилей выделенного пользователем текста) нужно использовать таким образом:
1. ::-moz-selection {
2. color: white;
3. background: hotpink;
4. }
5. ::selection {
6. color: white;
7. background: hotpink;
8. }Все самые популярные браузеры, исключая IE7/8, поддерживают псевдоэлемент ::selection. Как видно из примера выше, только Firefox требует наличия вендорного префикса и такая ситуация продолжается уже довольно долго. Важно заметить, что два объявления в листинге выше должны быть разделены. То есть для них нельзя использовать группировку селекторов.
К сожалению, хотя ::selection используется очень большим количеством веб-разработчиков, многие не понимают, что данный псевдоэлемент не является частью каких-либо спецификаций.
Что говорит спецификация?
Давайте подтвердим вышесказанное, обратившись к спецификации «Selectors Module, Level 3». Перейдя по ссылке, мы увидим следующий текст:
«This section intentionally left blank. (This section previously defined a ::selection pseudo-element.)»
Перевод: «Данная секция намеренно оставлена пустой (ранее она была определена под описание псевдоэлемента ::selection)»
Это версия «TR» спецификации (TR означает «технический отчет»). Другая же версия является черновиком, но говорит то же самое.
По большому счету, аналогичное утверждается и в документации Mozilla Developer Network (MDN):
«This is currently a “non-standard” feature».
Что переводится как: «На данный момент эта возможность (псевдоэлемент ::selection) не стандартизирована.»
Почему псевдоэлемент ::selection не является частью спецификации?
Как обычно, MDN предоставляет более полное описание, чем можно найти в официальных спецификациях по поводу причины удаления ::selection (надпись “раздел намеренно оставлен пустым” не очень информативна). MDN поясняет: Хотя данный псевдоэлемент был в черновиках спецификации «CSS Selectors Level 3», он был удален во время прохождения фазы кандидата в рекомендации, поскольку оказалось, что его поведение нестабильно, особенно в применении к вложенным элементам.
Это также обсуждалось в одном из мейллистов W3C, посвященном обсуждению данной темы.
Вырезки о псевдоэлементе ::selection из различных источников
Ниже приводятся некоторые интересные факты на тему этого, уникального в своем роде, селектора:
- Псевдоэлемент ::selection не является частью спецификации «Selectors Level 4», что вносит еще больше неопределенности в его будущее;
- Имела место еще одна дискуссия о псевдоэлементе ::selection датированная январем 2012 года, где обсуждалось почему он был вычеркнут и был предложен новый синтаксис, который по всей видимости не получил никакой отдачи;
- Спецификация «CSS3 UI» имеет «секцию, посвященную псевдоэлементам», где также упоминается о причинах удаления псевдоэлемента ::selection;
- На момент написания этой статьи, ::selection все еще является частью основного CSS-файла HTML5 Boilerplate;
- При обсуждении возможности удаления псевдоэлемента из H5BP, Paul Irish ответил: “H5BP это манифест практического подхода к разработке интерфейсов. Статус спецификации W3C имеет мало общего с действующей реализацией данной функции в проекте”.
Некоторые технические заметки об использовании ::selection
Несмотря на шаткое будущее, многие любят этот псевдоэлемент. Другие же предпочитают не использовать ::selection из-за присущей ему нестабильности. Тем не менее, вот некоторые вещи, которые вам стоит знать об этом:
- Внутри ::selection могут быть использованы только такие свойства, как: color, background, background-color и text-shadow;
- Хотя background работает нормально, background-image не поддерживается;
- Так как псевдоэлемент ::selection не является стандартом и не выглядит перспективным, браузер Firefox, возможно, никогда не будет поддерживать стандартный синтаксис;
- Псевдоэлемент ::selection не будет работать при использовании синтаксиса с одним двоеточием. В CSS3, все новые псевдоэлементы используют синтаксис с двойным двоеточием, чтобы отличать их от псевдоклассов.
Заключение
Лично мне нравится ::selection. Он дает мне широкие возможности при разработке уникального дизайна сайта. Данный псевдоэлемент работает почти как «пасхальное яйцо» (от английского easter egg), что не всегда хорошо.
Очевидно, что браузеры будут поддерживать ::selection еще очень долго. Я думаю, нужна очень веская причина, чтобы W3C оказала давление на разработчиков браузеров и заставила их полностью прекратить поддержку этого псевдоэлемента.
Поэтому, мой совет таков: используйте ::selection, но будьте готовы к тому, что его поддержка может прекратиться в любой момент.