शीर्ष 5 कारण मुझे कस्टम सीएसएस गुण क्यों पसंद हैं

नमस्कार, हेब्र! मैं आपको Stas Melnikov द्वारा लेख "मेरे शीर्ष 5 कारणों में सीएसएस कस्टम गुण क्यों पसंद है" का अनुवाद प्रस्तुत करता हूं

सीएसएस कस्टम संपत्ति विनिर्देश ने हमेशा वेब विकास के बारे में मेरा दृष्टिकोण बदल दिया है। यही कारण है कि मैं लिखना चाहता हूं कि मुझे कस्टम सीएसएस गुण क्यों पसंद हैं।

कस्टम सीएसएस गुण क्या हैं?

संक्षेप में, सीएसएस कस्टम गुण वे गुण हैं जो डेवलपर द्वारा बनाए गए थे। जब तक डेवलपर उन्हें निर्धारित नहीं करता, तब तक ब्राउज़र उनके बारे में कुछ नहीं जानता।

किसी भी कस्टम संपत्ति की घोषणा दो डैश के साथ शुरू होती है, जिसके बाद आपको संपत्ति का नाम जोड़ना होगा। फिर आप रंग जोड़ते हैं और संपत्ति मूल्य सेट करते हैं।

उदाहरण के लिए, मैंने बटन तत्व के लिए बैंगनी मान के साथ, संपत्ति melnik909BrandColor बनाई।

button { --melnik909BrandColor: purple; } 

वार समारोह

कस्टम सीएसएस संपत्तियों की पहली विशेषता var फ़ंक्शन है। इस फ़ंक्शन के साथ, मैं ब्राउज़र को कस्टम संपत्ति का मूल्य लेने और इसे किसी भी सीएसएस संपत्ति में जोड़ने के लिए कह सकता हूं।

ऐसा करने के लिए, मुझे सीएसएस संपत्ति को परिभाषित करना होगा और इस संपत्ति के मूल्य को जोड़ना होगा, उसी स्थान पर एक तर्क के रूप में कस्टम संपत्ति के साथ var फ़ंक्शन सेट करें।

उदाहरण के लिए, मैंने सीमा और रंग संपत्तियों के लिए --melnik909BrandColor संपत्ति जोड़ी।

 button { --melnik909BrandColor: purple; color: var(--melnik909BrandColor); border: 2px solid var(--melnik909BrandColor); } 

कस्टम गुण सीधे ब्राउज़र में बदले जा सकते हैं

एक अनुभवी पाठक जो सैस या LESS जैसे टूल को जानता है, वह कह सकता है, “Stas, मुझे CSS custom properties क्यों सीखना चाहिए? मुझे सास चर और मेरे लिए काफी कुछ पता है । ”

चेतावनी! Sass और LESS वैरिएबल CSS को व्यवस्थित करने में मदद करते हैं ताकि डेवलपर्स के लिए कोड को बनाए रखना आसान हो। उदाहरण के लिए, मैंने एक चर $ melnik909BrandColor बनाया, जिसमें मैंने रंग बचाया:

 $melnik909BrandColor: purple; button { color: $melnik909BrandColor; border: 2px solid $melnik909BrandColor; } 

संकलन के बाद, मैं ब्राउज़र में निम्न कोड देखूंगा:

 button { color: purple; border: 2px solid purple; } 

यह उदाहरण दिखाता है कि Sass और LESS चर ब्राउज़र में नहीं हैं।

कस्टम सीएसएस गुणों की दूसरी विशेषता यह है कि वे ब्राउज़र में हैं। इस तरह, मैं वहीं मान बदल सकता हूं। उदाहरण के लिए, मैं बटन तत्व की चयन स्थिति के लिए –melnik909BrandColor संपत्ति का मान बदल सकता हूं:

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

आप कस्टम सीएसएस संपत्तियों और मीडिया प्रश्नों का एक साथ उपयोग कर सकते हैं

कस्टम सीएसएस गुणों की तीसरी विशेषता यह है कि मीडिया प्रश्नों का उपयोग करके उनके मूल्यों को बदला जा सकता है। उदाहरण के लिए, मैं विभिन्न उपकरणों पर शरीर तत्व के पाठ का रंग बदलने के लिए melnik909BrandColor संपत्ति को परिभाषित करता हूं।

 body { color: var(--melnik909BrandColor); } @media (max-width: 768px) { body { --melnik909BrandColor: purple; } } @media (min-width: 769px) { body { --melnik909BrandColor: tomato; } } 

Calc फ़ंक्शन और CSS कस्टम गुण

ऐसे समय होते हैं जब हमें कैल्क फ़ंक्शन का उपयोग करने की आवश्यकता होती है। उदाहरण के लिए, मुझे इस फ़ंक्शन का उपयोग करना पसंद है जब मुझे तत्वों की संख्या को एक पंक्ति में गिनने की आवश्यकता होती है:

 .child { width: calc(100% / 4); } .child { width: calc(100% / 3); } 

हालांकि, इस कोड का पुन: उपयोग करना मुश्किल है, और यहां कस्टम सीएसएस गुण हमारी मदद करेंगे। हम एक चर बना सकते हैं जो तत्वों की संख्या को पढ़ेगा। उदाहरण के लिए, मैं पिछले उदाहरण में –itemsNumber गुण जोड़ूंगा:

 .child { width: calc(100% / var(--itemsNumber)); } 

और मैं मूल तत्व में मूल्यों को परिभाषित करूंगा:

 .parent { --itemsNumber: 5; } /* or */ .parent { --itemsNumber: 7; } 

वेक्टर ग्राफिक्स अनुकूलन

कस्टम सीएसएस गुणों का उपयोग करके वेक्टर ग्राफिक्स को अनुकूलित करने के 2 तरीके हैं।

पहली विधि में, हम विशेषताओं को भरने, स्ट्रोक और स्ट्रोक-चौड़ाई को परिभाषित करते हैं, और कस्टम सीएसएस गुणों को उनके मूल्यों के रूप में जोड़ते हैं।

इसके अलावा, हम गुण गुणों को निर्धारित करके गुण मान जोड़ सकते हैं:

 <svg class="svg-with-attr" viewBox="0 0 55.867 55.867"> <path stroke="var(--iconStroke)" stroke-width="var(--iconStrokeWidth)" fill="var(--iconFill)" d="..."> </svg> 

अब हम गुण गुणों का मान सेट करके विशेषता मान जोड़ सकते हैं:

 .svg-with-attr { --iconFill: #eeeeee; --iconStroke: #000000; --iconStrokeWidth: 1px; } 

बाईं ओर शैलियों के बिना डिफ़ॉल्ट आइकन है, और दाईं ओर शैलियों के साथ आइकन है।

दूसरी विधि में, हम स्ट्रोक, स्ट्रोक-चौड़ाई के लिए कस्टम सीएसएस गुणों को परिभाषित करते हैं , और सीएसएस नियमों का उपयोग करके गुणों को भरते हैं।

 body { --iconFill: #ffcc00; --iconStroke: #000000; --iconStrokeWidth: 2px; } .svg-with-props { stroke: var(--iconStroke); stroke-width: var(--iconStrokeWidth); fill: var(--iconFill); }