2011-12-14 7 views
8

मुझे CSS3 ग्रेडिएंट बनाने के लिए http://www.colorzilla.com/gradient-editor/ मिला है। हालांकि, इसके बारे में एक बात है जो महान होगा अगर कोई मेरे लिए स्पष्टीकरण दे।क्या मुझे आईई 9 के लिए कलरज़िला द्वारा उत्पन्न एसवीजी ग्रेडियेंट का उपयोग करना चाहिए?

जैसा कि मैं इसे समझता हूं, IE9 उसी तरह से फ़िल्टर का समर्थन नहीं करता है जिस तरह से IE6-8 ने किया था, और CSS3 ग्रेडियेंट का समर्थन नहीं करता है। कोलिज़िला सीएसएस में ढाल के लिए एसवीजी डेटा सहित, एमई 9 को मल्टी स्टॉप ग्रेडिएंट के साथ काम करने के लिए मजबूर करने का एक बहुत चालाक तरीका प्रदान करता है, और ढाल का उपयोग कर किसी भी तत्व पर आईई 9 के लिए फ़िल्टर को सेट नहीं करता है। IE9 समर्थन चेकबॉक्स, background: url(data ... लाइन को IE9 के लिए जो जोड़ा गया है, उसे टिकने पर कलरज़िला उत्पन्न करता है इसका एक उदाहरण नीचे दिया गया है।

background: #1e5799; /* Old browsers */ 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ 
background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0); /* IE6-8 */ 
के साथ HTML में <head> तत्व को जोड़ा गया निम्नलिखित

<!--[if gte IE 9]> 
    <style type="text/css"> 
    .gradient { 
     filter: none; 
    } 
    </style> 
<![endif]--> 

मैं सोच रहा हूँ कि क्या यह, IE9 के लिए इस कोड को शामिल करने या बजाय एक नियमित रूप से छवि वापस आने पर भरोसा करने की आम तौर पर प्राथमिकता दी जाती है? क्या ऐसी कोई परिस्थिति है जहां एक दृष्टिकोण दूसरे की तुलना में बेहतर हो सकता है? साथ ही, क्या यह एसवीजी कोड CSS3 गुणों का उपयोग करने वाले अन्य ब्राउज़रों के प्रदर्शन को प्रभावित कर सकता है, या क्या वे इस लाइन को अनदेखा कर देंगे?

कलरज़िला इस कोड के कोड को शामिल करने के प्रभावों को समझाने के लिए प्रतीत नहीं होता है, शायद कोई नहीं है और यह हर समय ऐसा करने का सही तरीका है? अगर ऐसा होता है तो मुझे लोगों के समय को बर्बाद करने के लिए खेद है, लेकिन तथ्य यह है कि यह एक कठिन विकल्प है जिससे मुझे लगता है कि इसका उपयोग न करने का कोई कारण हो सकता है।

+1

यह देखते हुए कि आईई 10 सशर्त टिप्पणियों के लिए समर्थन छोड़ देगा, आपको मौजूदा आईई संस्करणों के लिए इसे फिर से ओवरराइड करने के बजाय पुराने आईई संस्करणों के लिए 'फ़िल्टर' विशेषता' शामिल करनी चाहिए। – Joey

+0

आपका स्वागत है। मंच शिष्टाचार तोड़ना असंभव है क्योंकि * यह एक मंच * नहीं है। बेशक, यह महसूस नहीं करना शिष्टाचार का एक गंभीर उल्लंघन है;) – robertc

उत्तर

3

आईई 9 आईई 6-8 फिल्टर का समर्थन करता है हालांकि आईई 10 नहीं होगा। आप सही हैं कि IE9 CSS3 ग्रेडियेंट का समर्थन नहीं करता है लेकिन IE10 ऐसा करेगा।

चूंकि आईई 9 आईई 6-8 फिल्टर का समर्थन करता है, इसलिए जब आप ऑब्जेक्ट पर एसवीजी फ़िल्टर डालते हैं तो रंगीन को आईआई 6-8 फ़िल्टर को बंद करने की आवश्यकता होती है। IE6-8 फ़िल्टर पृष्ठभूमि संपत्ति का उपयोग कर सेट किए गए सीएसएस फ़िल्टर के विपरीत एक फ़िल्टर प्रॉपर्टी का उपयोग करके सेट किया गया है। <head> अतिरिक्त इसलिए आईई 9 पर डुप्लिकेट आईई 6-8 फ़िल्टर बंद कर देता है। विभिन्न संपत्ति नामों को देखते हुए अंतिम चयनकर्ता मैच नियम लागू नहीं होता है।

यह कोड नियमित छवि फ़ॉलबैक से तेज़ होना चाहिए क्योंकि एसवीजी कोड हार्डवेयर त्वरित हो सकता है। एसवीजी कोड अंतिम चयनकर्ता मैचों के रूप में अन्य ब्राउज़रों को प्रभावित नहीं करेगा, यही कारण है कि विरासत ब्राउज़र लाइन शीर्ष पर है।

+1

मुझे लगता है कि 'फिल्टर: कोई नहीं' और एसवीजी केवल मल्टी स्टॉप ग्रेडियेंट्स के लिए आवश्यक है –

6

आईई 9 एसवीजी ढाल अच्छी तरह से काम करता है, लेकिन आईई 7 इसे असुरक्षित सामग्री मानता है। इसलिए यदि आप SSL/HTTPS के पीछे इस स्टाइल के साथ अपनी साइट को सुरक्षित करते हैं, तो IE7 उपयोगकर्ताओं को "इस पृष्ठ में सुरक्षित और गैर-सुरक्षित आइटम दोनों शामिल होंगे।" आईई 7 को भौंकने से बचाने के लिए मैंने इस अनुभाग को सशर्त रूप से शामिल सीएसएस फ़ाइल में खींच लिया।

+0

यह एक बहुत बड़ी और दुर्भाग्यपूर्ण सीमा है। जब यह मुद्दा सामने आया तो हमारे लिए एक आश्चर्यजनक और बड़ा समय बर्बाद था। उम्मीद है कि भविष्य में इस समस्या से बचने में मदद के लिए अधिक लोग आपके उत्तर को वोट देंगे। – Aaron