कस्टम सीएसएस गुणों के नुकसान

HTML HTML लेआउट पाठ्यक्रम के लेखक स्टैस मेलनिकोव ने उन बारीकियों के बारे में बात की, जो कस्टम सीएसएस गुणों के साथ काम को जटिल कर सकती हैं।

कस्टम संपत्ति का नाम सिंटैक्स नियम

हम इस तथ्य के लिए उपयोग किए जाते हैं कि इनलाइन सीएसएस गुण असंवेदनशील हैं। इसलिए, border संपत्ति घोषित करने के निम्नलिखित तरीके समान परिणाम देंगे:

 button { BORDER: 2px solid #800080; } button { border: 2px solid #800080; } 

कस्टम गुण, इसके विपरीत, मामले संवेदनशील होते हैं, इसलिए निम्न उदाहरण दो अलग-अलग कस्टम गुण बनाता है:

 button { --NETOLOGY-BRAND-COLOR: #800080; --netology-brand-color: #27ae60;   border: 2px solid var(--NETOLOGY-BRAND-COLOR); color: var(--netology-brand-color); } 

अब फ्रेम # 800080 (बैंगनी) हो गया है, और टेक्स्ट # 27a60 (हरा) हो गया है।

कस्टम गुणों के लिए मान्य मान

एक नियमित सीएसएस संपत्ति के लिए, आप केवल मानक द्वारा अनुमत मूल्यों को निर्धारित कर सकते हैं। कस्टम संपत्ति मानक के अनुसार, किसी भी मौजूदा वैध सीएसएस मूल्य का उपयोग मूल्य के रूप में किया जा सकता है। उदाहरण के लिए, निम्नलिखित सभी कस्टम गुणों के साथ:

 .element::before { --color: rgba(0, 0, 0, 1); --hex: #000000; --value: 20px; --number: 3; --text: "Hey, what's up?"; --keyword: currentColor; } 

उदाहरण के लिए, आइए बटन के लिए फ्रेम को 8000 # रंग से सेट करें:

 button { --netologyBrandColor: #800080; border-width: 2px; border-style: solid; border-color: var(--netologyBrandColor); } 

मानक मूल्यों के अतिरिक्त, आप एक कस्टम प्रॉपर्टी को दूसरे के लिए मान के रूप में सेट कर सकते हैं।

 button { --netologyBrandColor: #800080; --buttonBorderColor: var(--netologyBrandColor); border-width: 2px; border-style: solid; border-color: var(--buttonBorderColor); } 

परिणाम पिछले एक से अलग नहीं है, और बटन अभी भी रंग के साथ एक फ्रेम है # 800080।

यदि उपयोगकर्ता संपत्ति --netologyBrandColor border-color संपत्ति के लिए गलत मान है, उदाहरण के लिए 18px, तो फ्रेम काला हो जाएगा।

 button { --netologyBrandColor: 18px;  --buttonBorderColor: var(--netologyBrandColor); border-width: 2px; border-style: solid; border-color: var(--buttonBorderColor); } 

तथ्य यह है कि ब्राउज़र अंतर्निहित संपत्ति के लिए उपयोगकर्ता संपत्ति के मूल्य को लागू करने से पहले, इसे शुद्धता के लिए जांच करेगा। यदि इनलाइन संपत्ति के लिए मूल्य उपलब्ध है, तो ब्राउज़र इसे लागू करेगा। यदि नहीं, तो यह अंतर्निहित संपत्ति के लिए डिफ़ॉल्ट मान सेट करेगा।

हमारे मामले में, 18px बिल्ट-इन border-color प्रॉपर्टी के लिए एक गलत मूल्य है, और इसलिए ब्राउज़र डिफ़ॉल्ट मान, यानी currentColor सेट करेगा। यह color गुण को # 800080 पर सेट करके सत्यापित करना बहुत आसान है:

 button { --netologyBrandColor: 18px;  --buttonBorderColor: var(--netologyBrandColor); border-width: 2px; border-style: solid; border-color: var(--buttonBorderColor); color: #800080; } 

जैसा कि आप देख सकते हैं, ब्राउज़र ने फ्रेम के लिए मूल्य # 800080 लागू किया। इस उदाहरण में, मैंने फ्रेम को सेट करने के लिए पूर्ण सिंटैक्स का उपयोग किया। लेकिन हम एक छोटी border उपयोग कर सकते हैं, अर्थात् border संपत्ति।

 button { --netologyBrandColor: 18px;  --buttonBorderColor: var(--netologyBrandColor); border: 2px solid var(--buttonBorderColor); color: #800080; } 

यहां हम एक और बारीकियों की प्रतीक्षा कर रहे हैं। मानक में एक अलग अनुभाग है जो ऐसी स्थिति में कस्टम गुणों के व्यवहार का वर्णन करता है। उनके अनुसार, अगर किसी इनलाइन प्रॉपर्टी के लिए यूजर प्रॉपर्टी का गलत मूल्य है, तो यह यूजर प्रॉपर्टी अमान्य है, इसलिए ब्राउजर इनलाइन प्रॉपर्टी को नजरअंदाज कर देगा।

हमारे उदाहरण में, अंतर्निहित border प्रॉपर्टी में कस्टम गुण में से एक मान है - --buttonBorderColor के अमान्य मान के साथ --buttonBorderColor । वर्णित एल्गोरिथ्म के अनुसार, ब्राउज़र ने केवल border संपत्ति की अनदेखी की, इसलिए तत्व ने सीमा खो दी।

कस्टम गुणों के लिए डिफ़ॉल्ट मान

जब हमने var फ़ंक्शन उदाहरण को देखा, तो हमने केवल एक पैरामीटर का उपयोग किया - कस्टम प्रॉपर्टी का नाम।

 button { --netologyBrandColor: #800080; border: 2px solid var(--netologyBrandColor); color: var(--netologyBrandColor); } button:hover { --netologyBrandColor: #27ae60; } 

लेकिन इसके अलावा, var फ़ंक्शन दूसरा - डिफ़ॉल्ट मान स्वीकार कर सकता है। डिफ़ॉल्ट मूल्य घोषित करने के लिए, आपको कस्टम संपत्ति के नाम के बाद अल्पविराम लगाने और स्वयं मूल्य लिखने की आवश्यकता है।


जब ब्राउज़र को पता चलता है कि डेवलपर ने कस्टम संपत्ति के लिए कोई मूल्य घोषित नहीं किया है, तो वह डिफ़ॉल्ट मान का उपयोग करता है। उदाहरण के लिए, एक कस्टम संपत्ति के लिए मूल्य # 800080 (बैंगनी) --netologyBrandColor ।

 button { border: 2px solid var(--netologyBrandColor, #800080); color: var(--netologyBrandColor, #800080); } button:hover { --netologyBrandColor: #27ae60; } 

हम फ्रेम और टेक्स्ट को बैंगनी रंग में देखते हैं। लेकिन अगर आप बटन को हिलाते हैं, तो वे हरे हो जाएंगे। यह इंगित करता है कि ब्राउज़र ने उपयोगकर्ता संपत्ति में # 27ae60 का मान लागू किया है, जिससे डिफ़ॉल्ट मान बदल दिया गया है।

लेकिन यह var फ़ंक्शन की सभी संभावनाएं नहीं है। पिछले उदाहरण में, कस्टम गुण --netologyBrandColor उपयोग क्रमशः दो बार किया जाता है, इसलिए मैं डिफ़ॉल्ट मान को दो बार सेट करता हूं।

लेकिन इसे अलग तरीके से किया जा सकता है। var फ़ंक्शन आपको एक और var फ़ंक्शन पास करने की अनुमति देता है, जिससे आप डिफ़ॉल्ट मान के रूप में कोई अन्य कस्टम गुण सेट कर सकते हैं। मैं कस्टम संपत्ति का उपयोग करके पिछले उदाहरण को फिर से --defaultButtonColor :

 button { --defaultButtonColor: #800080; border: 2px solid var(--netologyBrandColor, var(--defaultButtonColor)); color: var(--netologyBrandColor, var(--defaultButtonColor)); } button:hover { --netologyBrandColor: #27ae60; } 

बाह्य रूप से, परिणाम नहीं बदलेगा। लेकिन अब डिफ़ॉल्ट मान को बदलने के लिए, आपको इसे केवल एक ही स्थान पर करने की आवश्यकता है, और पहले की तरह कई में नहीं।

कस्टम गुणों की विरासत

CSS में एक विरासत तंत्र है जो तत्वों को मूल तत्वों से गुण विरासत में प्राप्त करने की अनुमति देता है। इस संबंध में, कस्टम गुण उनसे अलग नहीं हैं। एक उदाहरण के लिए मैं कोड लिखूंगा जिसमें कस्टम गुण --netologyBrandColor मूल body तत्व से विरासत --netologyBrandColor मिला है।

 body { --netologyBrandColor: #800080; } button { border: 2px solid var(--netologyBrandColor); color: var(--netologyBrandColor); } </td></tr> 

इंस्पेक्टर को देखते हुए, आप शिलालेख "शरीर से विरासत में मिला" नोटिस कर सकते हैं, जो हमें दिखाता है कि कस्टम तत्व body तत्व से लिया गया था। लेकिन अगर हम button तत्व के लिए कस्टम गुण --netologyBrandColor जोड़ते हैं, तो यह पहले से ही body तत्व से संपत्ति को ओवरराइड करता है।

 body { --netologyBrandColor: #800080; } button { --netologyBrandColor: #27ae60; border: 2px solid var(--netologyBrandColor); color: var(--netologyBrandColor); } 

निरीक्षक से पता चलता है कि button तत्व --netologyBrandColor कस्टम गुण --netologyBrandColor उस गुण --netologyBrandColor ओवरराइड करता है, जिसे हमने body तत्व के लिए निर्दिष्ट किया था।

वैश्विक मूल्य

CSS मानक में, कस्टम गुण ने एक विशेष root छद्म root है जो आपको कस्टम गुण निर्दिष्ट करने की अनुमति देता है जो दस्तावेज़ के मूल तत्व पर लागू होते हैं। उदाहरण के लिए, html तत्व में html तत्व के लिए।

 :root { --netologyBrandColor: #800080; } button { border: 2px solid var(--netologyBrandColor); color: var(--netologyBrandColor); } 

निरीक्षक में, हम देख सकते हैं कि घोषित कस्टम संपत्ति html तत्व पर लागू है। लेकिन, HTML दस्तावेज़ के अलावा, root छद्म root एसवीजी दस्तावेजों में काम करता है। उदाहरण के लिए, मैं style टैग में कस्टम गुण घोषित करूंगा।

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 28" width="50" height="50">   <style>       :root{           --iconColor: #ffcc00;           --iconStroke: #000000;           --iconStrokeWidth: 2px;       }   </style>   <path stroke="var(--iconStroke)"         stroke-width="var(--iconStrokeWidth)"         fill="var(--iconColor)"         d="M26 10.109c0 .281-.203.547-.406.75l-5.672 5.531 1.344 7.812c.016.109.016.203.016.313 0 .406-.187.781-.641.781a1.27 1.27 0 0 1-.625-.187L13 21.422l-7.016 3.687c-.203.109-.406.187-.625.187-.453 0-.656-.375-.656-.781 0-.109.016-.203.031-.313l1.344-7.812L.39 10.859c-.187-.203-.391-.469-.391-.75 0-.469.484-.656.875-.719l7.844-1.141 3.516-7.109c.141-.297.406-.641.766-.641s.625.344.766.641l3.516 7.109 7.844 1.141c.375.063.875.25.875.719z"/> </svg> 

और यहाँ हम देखते हैं कि मूल छद्म root SVG मूल तत्व में जोड़ा गया है। तदनुसार, यह साबित होता है कि रूट छद्म वर्ग न केवल html टैग पर लागू होता है, बल्कि किसी भी मूल तत्व पर लागू होता है।

निष्कर्ष

इस लेख में, हम कस्टम गुणों के नुकसान से मिले जो भ्रमित हो सकते हैं। और तदनुसार, हम उनका उपयोग करना शुरू कर सकते हैं। इसलिए, अगले लेख में मैं उन व्यावहारिक ट्रिक्स के बारे में बात करूंगा जो मैं अपनी परियोजनाओं में उपयोग करता हूं।

संपादकों से

विषय पर नेटोलॉजी पाठ्यक्रम:

• डेटा विश्लेषक ऑनलाइन पेशा
• ऑनलाइन पेशे डेटा साइंटिस्ट
• सीमावर्ती डेवलपर ऑनलाइन पाठ्यक्रम