सीएसएस में ट्रांज़िशन और डेटा की सुरक्षा
सीएसएस कस्टम प्रॉपर्टी, जिसे सीएसएस भी कहा जाता है वैरिएबल, आपको सीएसएस में अपनी प्रॉपर्टी तय करने और उनकी वैल्यू सीएसएस. हालांकि, इसमें कुछ कमियां हैं जो आज के दौर में बहुत काम की हैं, लेकिन ये काम करना मुश्किल होता है: वे कोई भी कीमत ले सकते हैं, इसलिए वे गलती से कुछ अनपेक्षित ढंग से बदल जाने पर, वे हमेशा अपने मान इनहेरिट करते हैं और आप उनका ट्रांज़िशन नहीं कर सकते. Houdini की CSS प्रॉपर्टी और वैल्यू एपीआई लेवल 1, अब Chrome 78 में उपलब्ध है, तो इन कमियों को पार कर लिया गया है, जिससे सीएसएस तो कस्टम प्रॉपर्टी बहुत ज़्यादा कारगर हैं!
हुडिनी क्या है?
नए एपीआई के बारे में बात करने से पहले, Houdini के बारे में फटाफट बात कर लेते हैं. CSS-TAG Houdini टास्क फ़ोर्स, जिसे सीएसएस हुडीनी या सामान्य तौर पर हुडीनी के नाम से जाना जाता है, मौजूदा "जादुई को समझाने वाली सुविधाएं तैयार करते हैं वेब पर स्टाइलिंग और लेआउट के बारे में जानकारी मिलेगी". Huudini की खास बातों का कलेक्शन ये हैं को ब्राउज़र के रेंडरिंग इंजन को चालू करने के लिए डिज़ाइन किया गया है. हमारी स्टाइल और हमारे रेंडरिंग इंजन को बेहतर बनाने की सुविधा के बारे में ज़्यादा जानकारी है. इसके साथ, JavaScript में सीएसएस की वैल्यू टाइप की गई और पॉलीफ़िलिंग या नई सीएसएस का आविष्कार किया गया बिना किसी विज्ञापन के परफ़ॉर्मेंस हिट के बारे में जानना मुमकिन है. हुडीनी के पास यह क्षमता है कि वेब पर रचनात्मकता को बढ़ावा दें.
सीएसएस प्रॉपर्टी ऐंड वैल्यू एपीआई लेवल 1
सीएसएस की प्रॉपर्टी ऐंड वैल्यूज़ एपीआई लेवल 1 (हुडीनी प्रॉप्स और Vals) की मदद से, हम अपनी कस्टम प्रॉपर्टी का स्ट्रक्चर तैयार कर सकते हैं. यह मौजूदा स्थिति: कस्टम प्रॉपर्टी का इस्तेमाल करते समय:
.thing {
--my-color: green;
}
कस्टम प्रॉपर्टी में टाइप नहीं होते, इसलिए उन्हें अनचाहे स्थिति में बदला जा सकता है
तरीके. उदाहरण के लिए, देखें कि अगर --my-color को यूआरएल के साथ तय किया जाता है, तो क्या होता है.
.thing {
--my-color: url('not-a-color');
color: var(--my-color);
}
यहां --my-color नहीं लिखा गया है, इसलिए उसे नहीं पता कि यूआरएल सही नहीं है
रंग की वैल्यू! इसका इस्तेमाल करने पर, यह वापस डिफ़ॉल्ट वैल्यू पर सेट हो जाता है (color,
जो background के लिए पारदर्शी हैं). Houdini Props और Vals की मदद से, कस्टम प्रॉपर्टी
रजिस्टर किया जाना चाहिए, ताकि ब्राउज़र को पता चल सके कि वह क्या होना चाहिए!
अब कस्टम प्रॉपर्टी --my-color, रंग के तौर पर रजिस्टर हो गई है! इससे पता चलता है कि
ब्राउज़र में किस तरह के मानों की अनुमति है और वह उन मानों को कैसे टाइप और व्यवहार में ला सकता है
प्रॉपर्टी!
रजिस्टर की गई प्रॉपर्टी की बनावट
प्रॉपर्टी को रजिस्टर करने का तरीका:
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: 'black',
});
इसमें इन विकल्पों का इस्तेमाल किया जा सकता है:
name: string
कस्टम प्रॉपर्टी का नाम.
syntax: string
कस्टम प्रॉपर्टी को पार्स करने का तरीका. सीएसएस की वैल्यू और यूनिट स्पेसिफ़िकेशन में, संभावित वैल्यू की पूरी सूची देखी जा सकती है. डिफ़ॉल्ट तौर पर, यह * पर सेट होती है.
inherits: boolean
क्या यह अपनी पैरंट वैल्यू को इनहेरिट करती है. डिफ़ॉल्ट तौर पर, यह true पर सेट होती है.
initialValue: string
कस्टम प्रॉपर्टी की शुरुआती वैल्यू.
syntax को बारीकी से देखा जा रहा है. आपको कई मान्य
विकल्प
नंबर से लेकर रंगों और
<custom-ident>
प्रकार. नीचे दी गई वैल्यू का इस्तेमाल करके, इन सिंटैक्स में भी बदलाव किया जा सकता है
+को जोड़ने का मतलब है कि यह वैल्यू की स्पेस-सेपरेटेड लिस्ट स्वीकार करता है उस सिंटैक्स का इस्तेमाल करें. उदाहरण के लिए,<length>+लंबाई#जोड़ने का मतलब है कि यह कॉमा लगाकर अलग की गई उस सिंटैक्स का इस्तेमाल करें. उदाहरण के लिए,<color>#रंग- सिंटैक्स या आइडेंटिफ़ायर के बीच
|जोड़ने का मतलब है कि दी गई कोई भी वैल्यू विकल्प मान्य हैं. उदाहरण के लिए,<color># | <url> | magicरंगों की कॉमा-सेपरेटेड लिस्ट, यूआरएल या शब्दmagic.
Gotchas
हुडीनी प्रॉप्स और वैल्स के साथ दो गॉचा हैं. पहला है, एक बार के साथ हुई है, तो किसी मौजूदा पंजीकृत प्रॉपर्टी को अपडेट करने का कोई तरीका नहीं है. प्रॉपर्टी फिर से रजिस्टर करने पर गड़बड़ी का मैसेज दिखेगा, जिससे पता चलेगा कि प्रॉपर्टी पहले ही रजिस्टर हो चुकी है तय किया गया है.
दूसरा, स्टैंडर्ड प्रॉपर्टी के उलट, रजिस्टर की गई प्रॉपर्टी की पुष्टि तब नहीं की जाती, जब उन्हें पार्स किया जाता है. इसके बजाय, उनकी गणना करते समय उनकी पुष्टि की जाती है. इसका मतलब है कि दोनों एलिमेंट की जांच करते समय अमान्य वैल्यू नहीं दिखेंगी, प्रॉपर्टी शामिल होनी चाहिए. साथ ही, किसी मान्य प्रॉपर्टी के बाद अमान्य प्रॉपर्टी शामिल करने से, उसे वापस नहीं लाया जा सकता आपके पास मान्य ईमेल पता हो. हालांकि, अमान्य प्रॉपर्टी डिफ़ॉल्ट तौर पर सेट हो जाता है.
कस्टम प्रॉपर्टी ऐनिमेट की जा रही हैं
रजिस्टर की हुई कस्टम प्रॉपर्टी टाइप चेकिंग के अलावा एक मज़ेदार बोनस भी देती है: इसे ऐनिमेट करने की क्षमता! बुनियादी ऐनिमेशन का उदाहरण कुछ ऐसा दिखता है:
<script>
CSS.registerProperty({
name: '--stop-color',
syntax: '<color>',
inherits: false,
initialValue: 'blue',
});
</script>
<style>
button {
--stop-color: red;
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
</style>
बटन पर कर्सर घुमाने पर, वह लाल से हरे रंग में ऐनिमेट होगा! इसके बिना प्रॉपर्टी को रजिस्टर करते समय, वह एक रंग से दूसरे रंग में जाएगा, क्योंकि और उसे रजिस्टर नहीं किया जाता, तो ब्राउज़र को यह नहीं पता कि उसके बीच क्या और इसलिए उन्हें ट्रांज़िशन करने की गारंटी नहीं दे सकते. हालांकि, सीएसएस ग्रेडिएंट को ऐनिमेट करने के लिए इस उदाहरण को और आगे ले जाया जा सकता है! कॉन्टेंट बनाने नीचे दी गई सीएसएस को, उसी रजिस्टर की गई प्रॉपर्टी के साथ लिखा जा सकता है:
button {
--stop-color: red;
background: linear-gradient(var(--stop-color), black);
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
इससे हमारी कस्टम प्रॉपर्टी ऐनिमेट होगी, जो linear-gradient का हिस्सा है. इस तरह,
हमारे लीनियर ग्रेडिएंट को ऐनिमेट कर रहा है. पूरा कोड देखने के लिए, नीचे दिया गया Glitch पर जाएं
और उसे आज़माकर देखें.
नतीजा
Houdini ब्राउज़र पर पहुंचने वाला है और इसके साथ ही, साथ ही, सीएसएस के साथ काम करने और उसे बढ़ाने के बिलकुल नए तरीकों के बारे में बताया गया है. पेंट के साथ एपीआई पहले ही शिप किया जा चुका है और अब कस्टम प्रॉप्स और वैल्स के साथ-साथ, हमारा क्रिएटिव टूलबॉक्स और बड़ा हो रहा है. इससे हमें टाइप की गई CSS प्रॉपर्टी को परिभाषित करें और उनका इस्तेमाल नई और दिलचस्प चीज़ें बनाने और ऐनिमेट करने के लिए करें डिज़ाइन. Huudini मुद्दे पर और भी बहुत कुछ आने वाला है सूची, जिसमें अपने हिसाब से पैसे दिए जा सकते हैं और देखें कि हुडिनी आगे क्या है. हुडीनी मौजूद है, सुविधाएं डेवलप करने के लिए जो "जादुई" के बारे में बताती हों डिज़ाइन और लेआउट के बारे में ज़्यादा जानना है, तो वहां जाएं और उन जादुई सुविधाओं का सही इस्तेमाल करना.
फ़ोटोग्राफ़र माइक जोनिट्ज़ तारीख अनस्प्लैश