मुझे 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 */
<head> तत्व को जोड़ा गया निम्नलिखित
।
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
मैं सोच रहा हूँ कि क्या यह, IE9 के लिए इस कोड को शामिल करने या बजाय एक नियमित रूप से छवि वापस आने पर भरोसा करने की आम तौर पर प्राथमिकता दी जाती है? क्या ऐसी कोई परिस्थिति है जहां एक दृष्टिकोण दूसरे की तुलना में बेहतर हो सकता है? साथ ही, क्या यह एसवीजी कोड CSS3 गुणों का उपयोग करने वाले अन्य ब्राउज़रों के प्रदर्शन को प्रभावित कर सकता है, या क्या वे इस लाइन को अनदेखा कर देंगे?
कलरज़िला इस कोड के कोड को शामिल करने के प्रभावों को समझाने के लिए प्रतीत नहीं होता है, शायद कोई नहीं है और यह हर समय ऐसा करने का सही तरीका है? अगर ऐसा होता है तो मुझे लोगों के समय को बर्बाद करने के लिए खेद है, लेकिन तथ्य यह है कि यह एक कठिन विकल्प है जिससे मुझे लगता है कि इसका उपयोग न करने का कोई कारण हो सकता है।
यह देखते हुए कि आईई 10 सशर्त टिप्पणियों के लिए समर्थन छोड़ देगा, आपको मौजूदा आईई संस्करणों के लिए इसे फिर से ओवरराइड करने के बजाय पुराने आईई संस्करणों के लिए 'फ़िल्टर' विशेषता' शामिल करनी चाहिए। – Joey
आपका स्वागत है। मंच शिष्टाचार तोड़ना असंभव है क्योंकि * यह एक मंच * नहीं है। बेशक, यह महसूस नहीं करना शिष्टाचार का एक गंभीर उल्लंघन है;) – robertc