css3pie डोम को गड़बड़ कर देता है, परिणामस्वरूप jQuery चयनकर्ता त्रुटियों

Question

आईई 6/7/8 पर CSS3 प्रभाव (सीमा-त्रिज्या, बॉक्स-छाया ...) प्राप्त करने के लिए, मैं css3pie का उपयोग कर रहा हूं।

हालांकि, css3pie DOM में css3-container (v1)/css3pie (v2) टैग उत्पन्न करता है, जो अपेक्षित आर्किटेक्चर को विकृत करता है।

सीएसएस

pre { 
    border: 1px solid #aaa; 
    border-radius: 5px; 
    behavior: url(pie.htc); 
} 

एचटीएमएल

<div class="foo">bar</div> 
<p class="getme">paragraph</p> 
<pre>preformatted</pre> 

jQuery

// undefined  expected: getme 
alert($("pre").prev().attr("class")); 

// css3-container expected: p 
alert($("pre").prev()[0].tagName); 

// getme   expected: foo 
alert($("pre").prev().prev().attr("class")); 

// 4    expected: 3 
alert($("body").children().size()); 

// will not set  expected: Impact 
$("p+pre").css({fontFamily: "Impact"}); 

// it almost affects all such jQuery selctors 

वास्तविक gener: यहाँ एक उदाहरण है एटेड स्रोत इस तरह है:

<DIV class="foo">bar</DIV> 
<P class="paragraph">paragraph</P> 
<css3-container...> 
    <border...> 
     <shape...><stroke></stroke><stroke></stroke></shape> 
    </border> 
</css3-container> 
<PRE>preformatted</PRE> 

क्या किसी को इस तरह की समस्याओं का सामना करना पड़ा है? कोई कामकाज? आईई 6/7/8 पर CSS3 काम करने के लिए css3pie का कोई विकल्प है?

Answer 1

मैंने CSS3PIE का भी उपयोग करने की कोशिश की, और इसी तरह की समस्याओं का सामना करना पड़ा (ज्यादातर jquery और mediaqueries के साथ)। वास्तव में, सभी समस्याओं के कारण मुझे कोई आसान/व्यावहारिक समाधान नहीं मिला।

मेरी सलाह पुराने आईई के उपयोगकर्ता अनुभव को क्रमिक रूप से बढ़ाने के लिए Modernizr's load का उपयोग करना होगा। इसे एक कठिन/लंबी प्रक्रिया की आवश्यकता होती है, क्योंकि आपको प्रत्येक CSS3 फीचर के लिए एक पॉलीफिल सेट करना होगा। mario.tco ने पहले ही आपको बताया है, मॉडर्निजर रेपो पर list of cross-browser polyfills है। और यहां feature detection स्निपेट की एक सूची है।

html5please और caniuse पर भी एक नज़र डालें।

आईई 6 और 7 के संबंध में, जब तक कि आपकी साइट के आंकड़े कुछ अलग न हों, उपयोग दर below 1% on average (कुछ अपवादों के साथ, ie6countdown देखें), ताकि आप उन्हें लगभग अनदेखा कर सकें। हालांकि, conditional comments के साथ आप प्रत्येक आईई < 10 संस्करण को विशिष्ट फ़ॉलबैक के साथ लक्षित कर सकते हैं।

ध्यान रखें कि आपको आईई < 9 पर बॉक्स-छाया और अन्य दृश्य सजावट (जब तक उन्हें उपयोगिता के लिए जरूरी नहीं है) की आवश्यकता नहीं है। दरअसल, किसी भी फॉलबैक से शायद एक बड़ी प्रदर्शन समस्या हो सकती है (इसके बारे में सोचें आईई 7 उपयोगकर्ता क्या हार्डवेयर हो सकता है)। Websites don't need to look exactly the same in any browser।

Answer 2

के बजाय सिर्फ कच्चे prev() के लिए यह खोज

$("pre").prevUntil('p').attr("class"); 
// OR 
$("pre").prevUntil('.paragraph').attr("class"); 

को कम करने के लिए आप एक CSS3 का उपयोग करें "हैक" आईई 6/7/8 व्यवहार सही ढंग से बनाने के लिए करने जा रहे हैं एक सीएसएस चयनकर्ता जोड़ने का उपयोग कर डीओएम चलने पर अपेक्षित डीओएम संरचना पर कोशिश न करें और भरोसा न करें और अधिक विशिष्ट होने का प्रयास करें।

संपादित

prevUntil() को prev() समारोह कॉल बदल

Answer 3

CSS3PIE एक बहुत ही उपयोगी तरीका और शक्तिशाली CSS3 के गोल कोनों अनुकरण करने के लिए है - और मेरी कंपनी में यह एक है कि हम चुना है, लेकिन वहां ऐसा करने के कई अन्य तरीके हैं।

रास्ता CSS3PIE गोलाकार कोनों यह तत्व व्यवहार विशेषता है कि करने के लिए पिछले भाई के रूप में <css3-container> टैग बनाएगा बनाता है, तो यह DOM संरचना बदल सकते हैं और अपने prev() कॉल टूट जाएगा। सीएसएस-कंटेनर महत्वपूर्ण है क्योंकि यह आपके <pre> टैग के पीछे गोल कोने पृष्ठभूमि की एक वीएमएल ड्राइंग है।

एक तरह से आप ऐसा कर सकता है एक <div> की तरह कुछ और ही में अपने <pre> टैग रैप करने के लिए और उसके बाद का उपयोग करें कि <div>prev() समारोह का उपयोग कर डोम नेविगेट करने के लिए होगा।

एक और तरीका है कि आप ऐसा कर सकता है इस

/* This adds a plugin prevPie and nextPie - it is the same as the 
    existing prev and next, but it will ignore css3-containers. */ 
(function($){ 
    function addPlugin(name) { 
     $.fn[name + 'Pie'] = function() { 
      var result = []; 
      this[name]().each(function(i,el){ 
       if (el.tagName == 'css3-container') { 
        var val = $(el)[name]()[0]; 
        val && result.push(val); 
       } else { 
        result.push(el); 
       } 
      }); 
      return $(result); 
     } 
    } 
    addPlugin('prev'); 
    addPlugin('next'); 
})(jQuery); 

की तरह एक jQuery प्लगइन बनाने के लिए अब निम्नलिखित काम करना चाहिए जैसे आप यह सभी ब्राउज़रों में करना चाहता था होगा।

// undefined  expected: getme 
alert($("pre").prevPie().attr("class")); 
// css3-container expected: p 
alert($("pre").prevPie()[0].tagName); 

// getme   expected: foo 
alert($("pre").prevPie().prevPie().attr("class")); 
// P    expected: div 
alert($("pre").prevPie().prevPie()[0].tagName)); 

Answer 4

यह शायद इस सवाल का जवाब आप देख रहे हैं नहीं है, लेकिन इसके बजाय jQuery अनदेखी करने के लिए पाई के इंजेक्शन तत्वों प्राप्त करने की कोशिश की, मैं (पुनः) लेखन अपने jQuery वर्गों/आईडी अधिक का उपयोग करें और कम निर्भर होना अनुशंसा करते हैं पेज संरचना पर।यह आपके कोड को अन्य पेज संरचना परिवर्तनों के साथ-साथ आपके कोड को थोड़ा अधिक पोर्टेबल और पुन: प्रयोज्य बनाने के लिए अधिक लचीला बनाने का लाभ है।

$("pre").prevUntil('*', 'not(css3-container)') 

$("body").children('not(css3-container)') 

Answer 5

आप इस प्रयास किया है::

आप डोम पार करना होगा, सबसे (यदि सभी नहीं) jQuery's traversal methods के एक फिल्टर चयनकर्ता दलील है कि आप पाई के तत्वों को निकालने के लिए उपयोग कर सकते, उदाहरण के लिए

:

http://blog.reybango.com/2010/10/11/how-polyfills-fill-in-the-gaps-to-make-html5-and-css3-usable-today/

यहाँ आप अन्य सुविधाओं के लिए इस्तेमाल कर सकते हैं polyfills की एक सूची है