शुभ दोपहर प्रिय!
इस पोस्ट में मैं html5 और css3 के उपयोग के संबंध में अपनी व्यक्तिगत टिप्पणियों और निष्कर्षों को साझा करना चाहता हूं।
अर्थात्,
सीमा-त्रिज्या, बॉक्स-छाया, अस्पष्टता, रैखिक-ढाल जैसे नवाचारों का उपयोग।
प्रत्येक संपत्ति के लिए, मैं इस
साइट से एक टैबलेट प्रदान करूंगा (इसे विज्ञापन के रूप में नहीं मानें, गुणों का समर्थन स्पष्ट रूप से वर्णित है)। मैं अपनी व्यक्तिगत टिप्पणियों का भी वर्णन करूंगा और उन्होंने मुझे किस निर्णय के लिए प्रेरित किया। मैं ज्यादातर
PIE.htc (IE के लिए) या पृष्ठभूमि का उपयोग करके प्रभाव लेआउट का उपयोग करता हूं
चलिए शुरू करते हैं:
बॉर्डर-त्रिज्या
यहां आप स्पष्ट रूप से देख सकते हैं कि संपत्ति लगभग हर जगह समर्थित है। यह FF 3.6 और IE7 - IE8 के साथ समस्या को हल करने के लिए बनी हुई है।
- एफएफ 3.6: 2012 में, मेरा मानना है कि इस ब्राउज़र को डायनासोर के लिए जिम्मेदार ठहराया जा सकता है, और इसकी वजह से मोज़िला के लिए एक विक्रेता संपत्ति लिखना आवश्यक नहीं है। चरम मामलों में, मुझे लगता है कि वह चौकोर कोनों के साथ रह सकता है।
- IE: यह समस्या PIE.htc के साथ आसानी से हल हो गई है
इस प्रकार, कोड लगभग इस प्रकार है:
element{ border-radius: 10px; behavior: url("public/htc/PIE.htc"); }
समर्थन: IE6 ++, FF4 ++, GC1 ++, Opera10.5 +, Safari5 +बॉक्स छाया
यहां हम वेंडर प्रॉपर्टी को जोड़ने की आवश्यकता का अवलोकन करते हैं
-webkit- । यह FF 3.6 और IE7 - IE4 के साथ समस्या को हल करने के लिए बनी हुई है।
- पिछली संपत्ति में सब कुछ वैसा ही है, केवल आपको WebKit इंजन के लिए समर्थन जोड़ने की आवश्यकता है
कोड:
element{ box-shadow: 5px 5px 10px #000000; -webkit-box-shadow: 5px 5px 10px #000000; behavior: url("public/htc/PIE.htc"); }
समर्थन: IE6 ++, FF4 ++, GC1 ++, Opera10.5 +, Safari5 +अस्पष्टता
यह हमारे प्रिय IE7 और IE8 को छोड़कर हर जगह समर्थित है।
- हम एक काफी संसाधन-गहन फ़िल्टर'आ का उपयोग करके समस्या का समाधान करेंगे
कोड:
element{ opacity: 0.3; filter: alpha(opacity=30); }
समर्थन: IE6 ++, FF3.6 ++, GC1 ++, Opera10.5 +, Safari5 +रैखिक-ढाल
एक दुर्लभ संपत्ति, इस वजह से, हर कोई इसके बिना करने की कोशिश कर रहा है और पृष्ठभूमि का उपयोग करता है। लेकिन एक बार जब आप जाते हैं, तो अंत में जाएं। देखें:
मैं वर्णन नहीं करूंगा कि आपको प्रत्येक ब्राउज़र के लिए क्या लिखना है, मैं तुरंत सभी गुणों के साथ एक कोड दूंगा। हां, और IE के लिए हम PIE.htc को फिर से सक्षम करते हैं
कोड:
element{ background-color: #F07575; background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 80%, 70%)), to(#BADA55)); background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); background-image: -ms-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #BADA55); -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); }
समर्थन: IE6 ++, FF3.6 ++, GC1 ++, Opera10.5 +, Safari5 +यहाँ इस तरह की एक स्वैच्छिक संपत्ति है।
सिद्धांत रूप में, यह सब मैं व्यक्त करना चाहता था। लेकिन मैं IE में संसाधन तीव्रता के बारे में एक शब्द भी कहना चाहता हूं। हां, पीआईई और फिल्टर का उपयोग बल्कि बोझिल संचालन है, और उनका उपयोग केवल उन मामलों में किया जाना चाहिए जहां कोई दूसरा रास्ता नहीं है। व्यक्तिगत रूप से, मैं उनका उपयोग करता हूं जब मुझे पता है कि सामग्री स्पष्ट रूप से खिंचाव और बदल जाएगी और सामान्य ढाल ढाल पृष्ठभूमि समस्या को हल नहीं कर सकती है, लेकिन कोई व्यक्ति समय के साथ बनाए रखने की कोशिश कर रहा है। किसी भी मामले में, यह आपकी पसंद है।
शुरू करने के लिए, मैं आपको अपने पर्यवेक्षक के साथ यह शर्त रखने और कुछ सीमाओं की पहचान करने की सलाह देता हूं जो आपको इस या उस तकनीक को लागू करने की अनुमति देगा।
आपका ध्यान के लिए धन्यवाद!