CSS3 :: outside擬似要素のサポートを有効にする

Question

擬似要素::outsideを使用したいと思っていますが、主要なブラウザのどれもそれをサポートしていないようです（今日のテストに基づいています）。

このセレクタを有効にするJSポリフィルがありますか？または、これをシミュレートするための良いテクニックがありますか？

Answer 1

あなたは正しいです：存在するブラウザには古代のCSS3 Generated and Replaced Content moduleの新機能が実装されていないため、提案された擬似要素を試すことはできません。実際、彼らはモジュール自体を書き直すつもりであるので、現行の作業草案は放棄されるべきだと思うべきです。残念ながら、これらの提案された機能の運命は分かりません。

とにかく、これらの擬似要素に使用可能なJSポリフィルも認識していないので、あなたのCSSに::outsideを使用してセレクタを書くのは大変です。

最も近いのは、コンテナでスタイルを設定する要素の周りに実際の要素をラップすることです。これは、たとえば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; 
} 

がjsFiddle preview

これにはいくつかの注意点があり、しかし：

• これは主にDOMに依存します。状況によっては、他の要素の周りに特定の要素をラップすることはできません。可能であれば、それらのラッパー要素は実際の親要素の振る舞いやスタイリングを妨害することになります。

  例えば、それはこのような場合には、子セレクタを使用してからあなたを防ぐ：

  あなたにそれらのラッパー要素がarticle間の親子関係を壊すだろう、jQuery.wrap()にそれらのp要素を意図し

  article > p 
  

  およびp。

• スペックは::beforeと::afterなどの::outside擬似要素は、それらを生成元素からスタイルを継承することになっていると述べています。 JavaScript/jQueryを使用してラッパーを追加すると、それらのラッパーはラッパーではなく親エレメントからスタイルを継承します。これは、継承規則に通常従って、子要素として挿入されることを意図しているので、::beforeと::afterをポリ充てんするときに問題になることはありません。

Answer 2

私はようやく私のページに、このスニペットを追加しました：

$('ol > li').each(function(){ 
     var $this = $(this); 
     var $content = $($this.contents()); 
     $content.wrapAll('<p class="liwrap"/>'); 
    }); 

これがありますので、子セレクタを破壊し、（クラスに対して難解な名前を必要とする問題を回避li、内部pを追加親セレクターなし）。 ::outsideは::beforeに置き換えることができるため、スタイルを継承しないという問題も回避します。

しかし、適切な視覚効果を実現するには、内側を生成されたコンテンツのレベルに上げるには負のマージンが必要です。

Answer 3

あなたはjQueryのを使用しているように見えます、そして、私はあなたのコードに小さな変更を示唆している

$('ol > li').wrapInner("<p class='liwrap' />"); 

その場合には、それは非常に多くの変数や関数呼び出しなしで、従うことを少しクリーンで簡単です。

編集： 畏敬の念が正しく指摘するように、これは

は、子セレクタ