फ़ायरफ़ॉक्स 4: -मोज़-तत्व के साथ पृष्ठभूमि के रूप में कस्टम तत्वों का प्रतिपादन

_{पॉल रूगर: यह हमारे अतिथि मार्कस स्टैंगे का ब्लॉग पोस्ट है। माक्र्स आमतौर पर मैक के लिए फ़ायरफ़ॉक्स थीम को लागू करने पर काम करते हैं, लेकिन इस बार उन्होंने गेको प्रोटोटाइप इंजन के चारों ओर एक छोटी पैदल दूरी पर, -मोज़-तत्व को लागू किया।}

नए फ़ायरफ़ॉक्स के चौथे बीटा में, हम आपके लिए पृष्ठभूमि-छवि की CSS संपत्ति का एक नया विस्तार प्रस्तुत करते हैं: -Moz-element (#elementID) का उपयोग करके पृष्ठभूमि के रूप में मनमाने तत्वों को खींचने की क्षमता।

<p id = "myBackground1" style = "background: darkorange; color: white; width: 300px; height: 40px;">

इस तत्व का उपयोग पृष्ठभूमि के रूप में किया जाएगा।

<! - यह तत्व एक पृष्ठभूमि के रूप में काम करेगा। ->

</ P>

<p style = "background: -moz-element (# myBackground1); गद्दी: 20px 10px; फ़ॉन्ट-भार: बोल्ड;"

यह बॉक्स अपनी पृष्ठभूमि के रूप में # myBackground1 का उपयोग करता है!

<! - यह आयत अपनी पृष्ठभूमि के रूप में # myBackground1 का उपयोग करती है! ->

</ P>

-मोज़-एलिमेंट () इमेज हमेशा की तरह url () इमेज की तरह काम करती है। इसका मतलब है कि यह पृष्ठभूमि के सभी सामान्य गुणों द्वारा नियंत्रित किया जाता है: पृष्ठभूमि-स्थिति , पृष्ठभूमि-दोहराव और यहां तक ​​कि पृष्ठभूमि-आकार ।



पृष्ठभूमि-आकार का उपयोग करते हुए, आप उस तत्व का एक थंबनेल बना सकते हैं जो पृष्ठभूमि के रूप में उपयोग किया जाता है - यहां एक उदाहरण है:

<ul id = "थंबनेल">

<li style = "background-image: -moz-element (# Slide-0)"> </ li>

<li style = "background-image: -moz-element (# स्लाइड -1)"> </ li>

<li style = "background-image: -moz-element (# स्लाइड -2)"> </ li>

<li style = "background-image: -moz-element (# स्लाइड -3)"> </ li>

</ Ul>

#thumbnails li {

चौड़ाई: 160 पीएक्स;

ऊंचाई: 120 पीएक्स;

बैकग्राउंड-रिपीट: नो-रिपीट;

पृष्ठभूमि-आकार: समाहित;

}

-मोज़-एलिमेंट के बारे में तीन बातें ध्यान रखें:

1. पृष्ठभूमि जीवित है : -मोज़-तत्व संपत्ति में निर्दिष्ट तत्व में कोई फर्क नहीं पड़ता है, पृष्ठभूमि इसके परिवर्तनों को दर्शाएगी । यह कर्सर को उजागर करने, टेक्स्ट कर्सर को ब्लिंक करने आदि को भी प्रदर्शित करेगा।
2. पृष्ठभूमि सिर्फ दृश्यता है। आप उस पर क्लिक नहीं कर सकते और प्राथमिक छवि तत्व तक पहुँच सकते हैं। यह कैसे काम करता है
3. पृष्ठभूमि आप किसी भी HTML तत्व बना सकते हैं। यहां तक ​​कि <iframe> :
   
   
   
   
   
   
   
   यहां तक ​​कि <video> :
   
   
   
   
   
   
   
   और यहां तक ​​कि कैनवास <कैनवास> :
   
   
   
   

एक पृष्ठभूमि के रूप में एक कैनवास का उपयोग करना कई अनुप्रयोगों में काम आ सकता है। उदाहरण के लिए, यदि आप ब्राउजर में सीपिया में सीएसएस पृष्ठभूमि की छवियों को फिर से देखते हैं, तो अब आपको यूआरआई "डेटा:" प्राप्त करते हुए , कैनवास पर संसाधित छवि को फिर से एनकोड करने की आवश्यकता नहीं है। इसके बजाय, आप कैनवास को एक पृष्ठभूमि छवि बना सकते हैं।



एक पृष्ठभूमि छवि के रूप में कैनवास का उपयोग करना वेबकिट , -webkit- कैनवास () के माध्यम से भी समर्थन करता है ।

रेंडरिंग लूपिंग

पुनरावर्ती लिंक के बारे में एक त्वरित नोट: यदि आप इस तरह से एक तत्व को प्रस्तुत करने का प्रयास करते हैं जो स्वयं -मोज़-तत्व का उपयोग करके तैयार किया गया था, तो रेंडरिंग लूप का पता लगाया जाएगा और रोका जा सकता है। इसलिए, यदि आप Sierpinski कालीन बनाना चाहते हैं, तो आपको एक और तरीका अपनाना होगा।

स्रोत तत्व की चिंता

कभी-कभी आप नहीं चाहते कि मूल तत्व दिखाई दे - लेकिन केवल -मोज़-तत्व पृष्ठभूमि को दृष्टि में छोड़ दें। और फिर आपको क्या करना होगा? बस " प्रदर्शन: कोई नहीं " या " दृश्यता: स्रोत तत्व को छिपाया " काम नहीं करेगा, तब से -मोज़-तत्व पृष्ठभूमि के खिलाफ आकर्षित करने के लिए कुछ भी नहीं होगा, और इसलिए यह पारदर्शी हो जाएगा।



इसके बजाय, आपको सीधे स्क्रीन को छिपाने के बिना तत्व को रेंडर करने से रोकने की आवश्यकता है। संभावित तरीकों में से एक इस तत्व को दूसरे के अंदर रखना है, और इस अन्य को निर्धारित करना है " ऊंचाई: 0; अतिप्रवाह: छिपा हुआ; "सीएसएस में।



तीन प्रकार के तत्व इस नियम के अपवाद हैं: चित्र, कैनवस और वीडियो। इस प्रकार के तत्वों को " प्रदर्शन: कोई नहीं " संपत्ति रखने की अनुमति है और अभी भी -मोज़-तत्व में उपयोग किया जाता है । इसके अलावा: वे मुख्य दस्तावेज़ के DOM में सम्‍मिलित नहीं हो सकते हैं।

नया DOM API:

document.mozSetImageElement

हमने दस्तावेज़ ऑब्जेक्ट में एक नई विधि जोड़ी है: document.mozSetImageElement ( element_ID , element ) ।



कोड की निम्नलिखित दो पंक्तियों पर विचार करें:

var Slide5 = document.getElementById ("स्लाइड -5");

document.mozSetImageElement ("वर्तमान-स्लाइड", स्लाइड 5);

अब वे सभी तत्व जो पृष्ठभूमि-छवि संपत्ति के साथ संपन्न हैं : -Moz-element (# current-slide) एक तत्व प्रदर्शित करेगा जिसमें ID स्लाइड -5 है - भले ही कोई ऐसा तत्व हो जिसमें ID करंट-स्लाइड हो !



Document.mozSetImageElement ("वर्तमान-स्लाइड", नल) को कॉल करना वर्तमान ओवरराइड को रद्द करता है।



इस तरह की एपीआई कई व्यावहारिक स्थितियों में काम आ सकती है। मैंने पिछले उप- क्रम में उनमें से एक का उल्लेख किया है: mozSetImageElement का उपयोग करके आप कैनवस और छवियों का उपयोग कर सकते हैं जो डोम ट्री का हिस्सा नहीं हैं:

var img = नई छवि ();

img.src = "my_image.png";

document.mozSetImageElement ("छवि", img);



var कैनवास = document.createElement ("कैनवास");

कैनवस.वेशन = कैनवस.हाईट = 100;

var ctx = कैनवास.getContext ("2d");

// ... तो ctx के माध्यम से आकर्षित ...

document.mozSetImageElement ("कैनवास", कैनवास);

( एक उदाहरण दिखाएं )



एक अन्य स्थिति जहां कॉलिंग mozSetImageElement उपयोगी है, जावास्क्रिप्ट कार्यों का एक पुस्तकालय बनाना है। उदाहरण के लिए, आपके पास यह फ़ंक्शन हो सकता है:

var रननंबर = 0;

फ़ंक्शन जोड़ें

var सन्दर्भ = "परिलक्षित-तत्व-" + रनिंगनंबर ++;

var प्रतिबिंब = document.createElement ("div");

रिफ्लेक्शन.क्लासनाम = "प्रतिबिंब";

प्रतिबिंब.स्टाइल.बैकग्राउंडइमेज =

"-मोज़-एलिमेंट (#" + संदर्भ + ")";

document.mozSetImageElement (संदर्भ, परावर्तक);

// ... और अब DOM में प्रतिबिंब डालें ...

}

इस पथ का अनुसरण करके, आप लाइब्रेरी फ़ंक्शन का उपयोग करने के दुष्प्रभाव को कम कर सकते हैं: इसमें उस तत्व की आईडी को हेरफेर नहीं करना होगा जो इसे पारित किया गया है।



अंत में, mozSetImageElement आपको अन्य दस्तावेजों के तत्वों को संदर्भित करने की अनुमति देता है (उदाहरण के लिए, एक <iframe के अंदर); हालांकि, निश्चित रूप से, दस्तावेजों की बातचीत के लिए सामान्य आवश्यकताएं (उनके मूल की एकता) लागू होती हैं।

SVG रेंडर सर्वर के लिए -moz-element



: पैटर्न और ग्रेडिएंट

यदि आपने कभी भी SVG को मैन्युअल रूप से लिखा है, तो आप संभवतः पेंट सर्वर की अवधारणा से परिचित हैं : ये ऐसे तत्व, पैटर्न और / या ग्रेडिएंट हैं जिन्हें उन मामलों में भरण या स्ट्रोक विशेषताओं में निर्दिष्ट किया जाना है जहां एक मोनोफोनिक फिल उपयुक्त नहीं है। अब उन्हें HTML तत्वों की पृष्ठभूमि में भी उपयोग किया जा सकता है -मोज़-तत्व का उपयोग :

<p style = "background: -moz-element (#pattern),

-मोज़-एलिमेंट (# ग्रेडिएंट);

गद्दी: 10 पीएक्स; रंग: सफेद ">

इस तत्व में दोनों प्रकार के एसवीजी पेंट सर्वर हैं

इसकी पृष्ठभूमि में: एक पैटर्न और एक ढाल।

<! - इस तत्व की पृष्ठभूमि दोनों प्रकार का उपयोग करती है

SVG रेंडरिंग सर्वर: पैटर्न और ग्रेडिएंट दोनों। ->

</ P>



<svg ऊंचाई = "0">

<linearGradient id = "gradient" x2 = "0" y2 = "1">

<स्टॉप-कलर = "ब्लैक" ऑफसेट = "0%" />

<स्टॉप-रंग = "लाल" ऑफसेट = "100%" />

</ LinearGradient>

<पैटर्न आईडी = "पैटर्न" पैटर्न यूनाइट्स = "यूजरस्पेसऑनसे"

चौड़ाई = "60" ऊंचाई = "60">

<सर्कल भरण = "काला" भराव-अपारदर्शिता = "0.5"

cx = "30" साइबर = "30" आर = "10" />

</ पैटर्न>

</ एसवीजी>

कृपया ध्यान दें कि हमारे नए HTML5 पार्सर के लिए धन्यवाद , हमें एम्बेडेड SVG कोड काम करने के लिए XHTML का उपयोग नहीं करना पड़ेगा।



ऊपर वर्णित विशेषता सीएसएस ग्रेडिएंट्स और एसवीजी चित्रण की मौजूदा क्षमताओं को डुप्लिकेट करती है, हालांकि यह कुछ स्थितियों में भी उपयोगी हो सकता है - उदाहरण के लिए, एनिमेशन में। मान लें कि आपको इस तरह से एनिमेटेड ग्रेडिएंट से लैस एक प्रोसेस इंडिकेटर बनाने की जरूरत है:







आप सीएसएस ग्रेडिएंट और कुछ जावास्क्रिप्ट का उपयोग करके जो कुछ भी चाहते हैं उसे प्राप्त कर सकते हैं जो समय-समय पर पृष्ठभूमि-स्थिति संपत्ति को अपडेट करता है। हालाँकि, आप SMIL का उपयोग करके SVG ग्रेडिएंट एनिमेटेड का भी उपयोग कर सकते हैं और इसलिए किसी भी जावास्क्रिप्ट की आवश्यकता नहीं है:

<div

शैली = "पृष्ठभूमि: -मोज़-तत्व (# एनिमेटेड-ग्रेडिएंट);">

</ Div>



<svg ऊंचाई = "0">



<linearGradient id = "एनिमेटेड-ग्रेडिएंट" स्प्रेडमैथोड = "प्रतिबिंबित"

gradientUnits = "userSpaceOnUse"

X1 = "16" x2 = "24" y2 = "0">

<चेतन विशेषता नाम = "X1" मान = "16; 0" ड्यूर = "350ms"

दोहराना = "अनिश्चित" />

<चेतन विशेषता नाम = "x2" मान = "24; 8" दुर = "350ms"

दोहराना = "अनिश्चित" />



<रोक स्टॉप-रंग = "# 0F0" ऑफसेट = "0" />

<रोक स्टॉप-रंग = "# 0D0" ऑफसेट = "100%" />

</ LinearGradient>



</ एसवीजी>

( एक उदाहरण दिखाएं )



वही सीएसएस एनिमेशन के साथ प्राप्त किया जा सकता है , हालांकि, जब तक वे गेको में लागू नहीं होते हैं, आप ऊपर वर्णित पथ का अनुसरण कर सकते हैं।



CSS पृष्ठभूमि ( बग 276431 ) के रूप में एसवीजी छवियों के लिए समर्थन भी जल्द ही उपलब्ध होगा।



और यहाँ एक और उदाहरण है: CSS और SVG में Pacman ।

क्षुधा

-मोज़-एलिमेंट का उपयोग करने के लिए मेरे पास कुछ और सुझाव हैं :

प्रतिबिंब

प्रतिबिंब क्या है?

# ब्रह्मांड

/ * प्रतिबिंब मूल तत्व की एक प्रति है ... * /

पृष्ठभूमि: -मोज़-तत्व (# प्रतिबिंबित-तत्व)

नीचे छोड़ दिया कोई दोहराना नहीं;



/ * ... ऊपर से नीचे तक परिलक्षित ... * /

-मोज़-ट्रांसफ़ॉर्म: स्केल (-1);



/ * ... और धीरे-धीरे ऊपर से नीचे की ओर बढ़ते हुए। * /

मास्क: url (# प्रतिबिंब-मुखौटा);

}

चूंकि हम किसी भी शैली को प्रतिबिंब के लिए लागू कर सकते हैं, हम पानी पर एनिमेटेड हलकों जैसे प्रभाव उत्पन्न कर सकते हैं।

स्लाइड्स के बीच भव्य संक्रमण

इस डेमो में, मैं आसन्न स्लाइड्स के बीच इस तरह के एक शानदार संक्रमण को प्राप्त करना चाहता हूं जो दिखता है कि पिछली स्लाइड के ऊपरी आधे हिस्से को नीचे लपेटा गया था, इसके तहत अगली स्लाइड को खोलना:

_{इस बिंदु पर मोज़िला हैक्स ब्लॉग में <वीडियो> तत्व द्वारा जुड़ा हुआ एक वीडियो है, इसलिए यह इसे हबराहब्र पर दिखाने के लिए काम नहीं करेगा।}

आप इस विचार को कैसे लागू करेंगे? निस्संदेह, किसी प्रकार के परिवर्तन की आवश्यकता होगी, लेकिन किस विशेष तत्व का परिवर्तन? स्लाइड के शीर्ष आधे हिस्से में नीचे की तुलना में एक अलग परिवर्तन की आवश्यकता होती है, इसलिए केवल पूरी स्लाइड में परिवर्तन लागू करने से काम नहीं चलेगा।



अंत में, मैंने चार नए तत्व (#prepretUpper, #prepretLower, #nextUpper और #nextLower) बनाए और उन्हें एक अलग कंटेनर (#transition कहा जाता है) में रखा, जो केवल स्लाइड से स्लाइड पर संक्रमण के दौरान दिखाई देता है। फिर मैं उन्हें सही आकार प्रदान करता हूं और पिछली या अगली स्लाइड से पृष्ठभूमि-छवि का उपयोग करके छवि के संबंधित हिस्से को ओवरले करता हूं : -मोज़-एलिमेंट (# पिछला / अगलास्लाइड) और पृष्ठभूमि-स्थिति संपत्ति का सही मूल्य। और फिर मैं इन सहायक तत्वों में वांछित परिवर्तन जोड़ता हूं।



इस उदाहरण के लिए कोड काफी जटिल है, हालांकि ... - इसलिए मैं आपको इसके अंतिम प्रदर्शन के लिए निर्देशित करूंगा।

अधिक?

मैंने अब -मोज़-तत्व उदाहरणों के इरादों को समाप्त कर दिया है , हालांकि, निश्चित रूप से, इस संपत्ति के साथ बहुत कुछ किया जा सकता है। अब आपकी बारी है!

धन्यवाद

इस विषय पर अधिकांश आभार रॉबर्ट ओ'कलाहन के योग्य हैं, जिन्होंने 2008 में प्रारंभिक कार्यान्वयन वापस तैयार किया। अपने प्रारंभिक प्रयोगों के बाद, हालांकि, उन्हें अधिक महत्वपूर्ण मामलों पर करीब से काम करना पड़ा, ताकि उनके पैच लगभग एक साल तक निष्क्रिय रहें (अप्रैल 2009 में) जब तक कि उपयुक्त एपीआई क्या होना चाहिए, इसके बारे में उन्होंने समाचार समूह में चर्चा शुरू कर दी। इसके तुरंत बाद, रियो कवागुची ने रॉबर्ट के लेखन को पुनर्जीवित किया और मोजिला में अपनी इंटर्नशिप के सभी अंतिम सप्ताह उन्हें समर्पित किए। एक साल बाद, मैंने इस पैच को समीक्षा (समीक्षा) के लिए तैयार किया और इसे अंतिम चरणों के माध्यम से सही किया, कोड में फ़ायरफ़ॉक्स को शामिल करने के लिए।



अंत में, मैं एक ही चेतावनी पेश करूंगा कि mozRequestAnimationFrame संबंधित: -moz -element और document.mozSetImageElement दोनों प्रयोगात्मक API हैं। हम उनके अंतहीन समर्थन की गारंटी नहीं देते हैं, और हम उनके उपयोग की वकालत नहीं करते हैं। हमने उन्हें लागू किया ताकि लोग उनके साथ प्रयोग कर सकें, और हमें प्रतिक्रिया प्राप्त होगी। हम इन APIs को एक मानक के रूप में पेश करेंगे (लेकिन "moz" उपसर्ग के बिना, निश्चित रूप से), इसलिए हमारे कार्यान्वयन पर प्रतिक्रिया हमें भविष्य के मानक को बेहतर बनाने में मदद करेगी।