Cтатьи по тегу «псевдоэлемент»

Вдогонку статье о нестандартных (но иногда полезных) штуках с префиксом -webkit- пришла новость от разработчиков Firefox: они собираются изменить свой парсер CSS, чтобы любые псевдоэлементы вида ::-webkit-что-угодно считались валидными селекторами и не заставляли весь блок правил игнорироваться. Причина всё та же — совместимость: так делают WebKit и Blink, многие авторы пишут код в расчете на это поведение, и в Firefox этот код предсказуемо ломается (хотя по текущему стандарту так и должно быть). Так что не полагайтесь на хаки вида ::-webkit-nonsense, .something-useful {/*код только для «вебкитят»*/} и на всякий случай проверьте, не осталось ли подобного в ваших проектах!

Добавлено 28.08.2018: это требование совместимости пришлось закрепить в спецификации CSS-селекторов 4 уровня.

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

Рабочая группа CSS в W3C выпустила второй публичный черновик модуля псевдоэлементов 4 уровня. Этот модуль выделен из CSS-селекторов 4 уровня и дополняет его.

По сравнению с селекторами 3 уровня добавились псевдоэлементы ::selection и ::placeholder (наконец его стандартизируют!). А вторая версия черновика добавила еще ::marker для списков (этого инструмента ждали еще с 2002 года, правда, в новом черновике возможности его оформления сильно урезаны — позиционировать его по-прежнему нельзя…) и отдельный вариант ::selection для неактивного окна — ::selection-inactive. И немного упростила поведение ::first-letter, поскольку для оформления первых букв (буквиц) появился другой механизм, описанный в другом, новом CSS-модуле строчного форматирования 3 уровня.

Новый модуль также расширяет объектную модель CSS для работы с псевдоэлементами из скриптов: должен появиться отдельный интерфейс CSSPseudoElement, который, помимо свойств «тип псевдоэлемента» и «его CSS-код», будет обязан поддерживать интерфейс EventTarget из DOM2 (т.е. на псевдоэлементах наконец можно будет «ловить» события отдельно от их элементов!). Правда, этот раздел модуля пока очень слабо проработан. Но вы можете предложить свое решение любого из спорных вопросов и даже предложить свою правку спецификации на GitHub!