CSS3 के लिए समर्थन सक्षम करें :: बाहर छद्म छेद

Question

मैं ::outside स्यूडोलेमेंट का उपयोग करने में सक्षम होना चाहता हूं, लेकिन जाहिर है कि प्रमुख ब्राउज़र में से कोई भी इसका समर्थन नहीं करता है (आज मेरे परीक्षण के आधार पर)।

क्या कोई प्रकार का जेएस पॉलीफिल है जो इस चयनकर्ता को सक्षम बनाता है? या यह अनुकरण करने के लिए एक अच्छी तकनीक है?

Answer 1

आप सही हैं: अस्तित्व में कोई ब्राउज़र प्राचीन CSS3 Generated and Replaced Content module में किसी भी नई विशेषताओं को लागू नहीं किया है, इसलिए आप प्रस्तावित छद्म तत्वों को आजमाने में सक्षम नहीं होंगे। वास्तव में, वे मॉड्यूल को फिर से लिखने की योजना बना रहे हैं, इसलिए वर्तमान कार्यशील मसौदे को त्याग दिया जाना चाहिए, और दुर्भाग्य से इन प्रस्तावित सुविधाओं का भाग्य नहीं कह रहा है।

वैसे भी, मुझे इन छद्म तत्वों के लिए उपलब्ध किसी भी जेएस पॉलीफिल के बारे में पता नहीं है, इसलिए आप अपने सीएसएस में ::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

इस के लिए कुछ चेतावनियां हैं, तथापि:

• यह काफी हद तक डीओएम पर निर्भर है; आप परिस्थितियों के आधार पर दूसरों के आस-पास कुछ तत्वों को लपेटने में सक्षम नहीं होंगे। यहां तक ​​कि यदि आप कर सकते हैं, तो वे रैपर तत्व व्यवहार के साथ हस्तक्षेप कर सकते हैं या वास्तविक मूल तत्वों की स्टाइल भी कर सकते हैं।

  उदाहरण के लिए, यह इस तरह के मामलों में बच्चे चयनकर्ता का उपयोग करने से रोकता है:

  article > p 
  

  आप jQuery.wrap() उन p तत्वों को कहाँ करना चाहते हैं, तो के रूप में उन आवरण तत्वों article के बीच माता-पिता के बच्चे का रिश्ता टूट जाएगा और p।

• कल्पना कहा गया है कि ::outside छद्म तत्वों, ::before और ::after की तरह, तत्वों है कि उन्हें उत्पन्न से शैलियों के वारिस करने वाले हैं। यदि आप रैपर जोड़ने के लिए जावास्क्रिप्ट/jQuery का उपयोग करते हैं, तो वे रैपर उनके मूल तत्वों से शैलियों का उत्तराधिकारी होंगे, न कि वे लपेट रहे हैं। ::before और ::after पॉलीफिलिंग करते समय यह कभी समस्या नहीं हुई है, क्योंकि वे सामान्य रूप से विरासत नियमों के बाद, बाल तत्वों के रूप में डालने का इरादा रखते हैं।

Answer 2

मैं अंत में मेरा पेज को यह टुकड़ा कहा:

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

यह एक pli है, जो बच्चे को चयनकर्ताओं (कक्षाओं के लिए गूढ़ नाम तोड़ने, और की आवश्यकता होती है क्योंकि वहाँ की समस्या से बचा जाता है अंदर कहते हैं कोई माता पिता चयनकर्ता नहीं)। यह विरासत विरासत की समस्याओं से भी बचाता है, क्योंकि ::outside को ::before के साथ प्रतिस्थापित किया जा सकता है।

सही दृश्य प्रभाव प्राप्त करने के लिए, उत्पन्न सामग्री के स्तर पर आंतरिक p को बढ़ाने के लिए नकारात्मक मार्जिन की आवश्यकता होती है।

Answer 3

ऐसा लगता है कि आप jQuery का उपयोग कर रहे हैं, और जो मामले में, मैं अपने कोड

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

यह थोड़ा क्लीनर है और सरल का पालन करने के लिए एक छोटा सा संशोधन का सुझाव देते हैं, इतने सारे चर या समारोह कॉल के बिना।

संपादित करें: खौफ ठीक ही बताते हैं, यह Marcins जो समाधान के एक अनुकूलन ...

ली है, जो तोड़ने बच्चे चयनकर्ताओं