启用对CSS3 :: external伪元素的支持 [英] Enable support for CSS3 ::outside pseudoelement

问题描述

我想能够使用 :: outside 伪元素，但显然没有一个主要的浏览器支持它（基于我今天的测试）。

是否有某种JS​​ polyfill启用此选择器？或者有一个很好的技术来模拟这个？

解决方案

你是正确的：没有浏览器已经实现了任何新的功能在古代的 CSS3生成和替换内容模块中，因此您将无法尝试提出的伪元素。事实上，他们正在计划重写模块本身，所以当前的工作草案应该被视为放弃，不幸的是没有告诉这些建议的功能的命运。

无论如何，我不知道任何JS polyfills可用于这些伪元素，所以你运气不好运使用 :: outside 在CSS中选择器。

你可以得到的最接近的是将实际的元素包裹在你想要使用容器来为其设计风格的元素上。这可以通过例如jQuery的 .wrap（） 或 .wrapAll（） 。

所以，而不是这样：

  p :: outside {
 display：block; 
 border：3px solid＃00f; 
} 
  

您可以这样做：

  $（'p'）。wrap（'< div class =outside-p/>'）; 
  

  / * 
 *请注意，你不能只选择包含p：only-child，
 *的.outside-p，因此你必须提供深奥的类名。 
 * / 
 .outside-p {
 border：3px solid＃00f; 
} 
  

jsFiddle preview

但是有一些注意事项：

• 这在很大程度上取决于DOM;您将无法根据具体情况将某些元素包围其他元素。即使可以，那些包装元素可能会干扰行为，甚至干扰实际父元素的样式。

  
  
  

  例如，它阻止您使用子元素选择器：

    article> p 
    

  您打算 jQuery.wrap（）那些 p 元素，因为那些包装器元素将破坏文章和<$ c之间的父子关系$ c> p 。




• 伪元素，如 :: before 和 :: after 之后，应该从生成元素的样式继承。如果你使用JavaScript / jQuery来添加包装器，这些包装器将继承父元素的样式，而不是它们包装的样式。这从来不是一个问题，当polyfilling :: before 和 :: after ，因为他们打算插入作为子元素。

I'd like to be able to use the ::outside pseudoelement, but apparently none of the major browsers support it (based on my testing today).

Is there some kind of JS polyfill that enables this selector? Or is there a good technique for simulating this?

解决方案

You are correct: no browser in existence has implemented any of the new features in the ancient CSS3 Generated and Replaced Content module, so you won't be able to try the proposed pseudo-elements. In fact, they're planning to rewrite the module itself, so the current working draft should be considered abandoned, and unfortunately there's no telling the fate of these proposed features.

Anyway, I'm not aware of any JS polyfills available for these pseudo-elements either, so you're out of luck on writing selectors using ::outside in your CSS.

The closest you can get is to wrap actual elements around the elements for which you want to style with a container... this is cheaply accomplished with, for example, jQuery's .wrap() or .wrapAll().

So, instead of doing this:

p::outside {
    display: block;
    border: 3px solid #00f;
}

You'd do this:

$('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;
}

jsFiddle preview

There are some caveats to this, however:

• This is largely dependent on the DOM; you won't be able to wrap certain elements around others depending on the circumstances. Even if you can, those wrapper elements may end up interfering with the behavior or even the styling of the actual parent elements.

  For example, it prevents you from using the child selector in cases like this:

  article > p
  

  Where you intend to jQuery.wrap() those p elements, as then those wrapper elements will break the parent-child relationship between article and p.

• The spec states that ::outside pseudo-elements, like ::before and ::after, are supposed to inherit styles from the elements that generate them. If you use JavaScript/jQuery to add wrappers, those wrappers will inherit styles from their parent elements and not the ones they're wrapping. This has never been a problem when polyfilling ::before and ::after, as they're intended to be inserted as child elements anyway, following inheritance rules normally.

这篇关于启用对CSS3 :: external伪元素的支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！