Я бы хотел использовать псевдоэлемент ::outside, но, по-видимому, ни один из основных браузеров не поддерживает его (на основе моего тестирования сегодня).
Есть ли какой-то JS polyfill, который позволяет этот селектор? Или есть хорошая техника для имитации этого?
Вы правы: ни один браузер не реализовал какие-либо новые функции в древнем CSS3 Generated and Replaced Content module, так что вы не сможет попробовать предложенные псевдоэлементы. Фактически, они планируют переписать сам модуль, поэтому текущий рабочий проект следует считать заброшенным, и, к сожалению, не сообщается о судьбе этих предлагаемых функций.
Во всяком случае, я не знаю ни одного полиса для JS, доступного для этих псевдоэлементов, так что вам не повезло при написании селекторов, использующих ::outside в вашем CSS.
Самое близкое, что вы можете получить, это обернуть фактические элементы вокруг элементов, для которых вы хотите создать стиль с контейнером... это дешево выполняется с помощью, например, jQuery .wrap() или .wrapAll().
Итак, вместо этого:
p::outside {
display: block;
border: 3px solid #00f;
}
Вы бы сделали это:
$('p').wrap('<div class="outside-p" />');
/*
* Notice that you can't select only .outside-p that contains p:only-child,
* so you'll have to come up with esoteric class names.
*/
.outside-p {
border: 3px solid #00f;
}
Есть некоторые оговорки к этому, однако:
Это во многом зависит от DOM; вы не сможете обернуть некоторые элементы вокруг других в зависимости от обстоятельств. Даже если вы можете, эти элементы-обертки могут вступить в противоречие с поведением или даже с дизайном фактических родительских элементов.
Например, он не позволяет использовать дочерний селектор в следующих случаях:
article > p
Если вы намерены jQuery.wrap() те p элементы, так как тогда эти элементы-оболочки будут разбивать отношения между родителями и дочерними элементами между article и p.
Спецификация утверждает, что ::outside псевдоэлементы, такие как ::before и ::after, должны наследовать стили из элементов, которые их генерируют. Если вы используете JavaScript/jQuery для добавления оберток, эти оболочки будут наследовать стили из своих родительских элементов, а не те, которые они обертывают. Это никогда не было проблемой при полифинге ::before и ::after, поскольку они должны быть вставлены как дочерние элементы в любом случае, следуя правилам наследования обычно.
Я наконец добавил этот фрагмент к своей странице:
$('ol > li').each(function(){
var $this = $(this);
var $content = $($this.contents());
$content.wrapAll('<p class="liwrap"/>');
});
Это добавляет p внутри li, что позволяет избежать проблемы с разбиением дочерних селекторов и требует эзотерических имен для классов (потому что нет родительского селектора). Он также избегает проблем не наследующих стилей, потому что ::outside можно заменить на ::before.
Для достижения правильного визуального эффекта, однако, требуется отрицательный запас, чтобы поднять внутренний p до уровня сгенерированного содержимого.
Похоже, вы используете jQuery, и в этом случае я бы предложил небольшую модификацию вашего кода
$('ol > li').wrapInner("<p class='liwrap' />");
Это немного чище и проще, без каких-либо переменных или вызовов функций.
Изменить: Как благоразумительно указывает, это оптимизация решения Marcins, которое...
добавляет p внутри li, что позволяет избежать проблемы с разбиением дочерних селекторов