CSS @property और नए स्टाइल

 (ryanmulligan.dev)
2 पॉइंट द्वारा GN⁺ 2024-09-05 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • @property नियम अब सभी आधुनिक ब्राउज़रों में समर्थित है, और यह CSS custom properties के syntax, initial value और inheritance को स्पष्ट रूप से परिभाषित करने की सुविधा देता है
  • CSS Houdini और CSS Properties and Values API पहली बार पेश किए जाने के बाद काफी समय बीत चुका है
  • @property की संभावनाओं को खोजने वाले डेमो के ज़रिए देखा गया है कि अगली पीढ़ी का CSS क्या पेश कर सकता है

Calls to action (कार्रवाई के लिए प्रेरित करने वाले तत्व)

  • वेबपेज पर ध्यान खींचने वाले CTA कई साइटों पर उपयोग किए जाते हैं
  • इस स्टाइल को सीधे आज़माया गया है, और परिणाम CodePen पर देखा जा सकता है
  • डेमो का CSS पैनल खोलने पर उन custom properties से जुड़े @property नियम देखे जा सकते हैं जिन्हें animation की ज़रूरत है
@property --gradient-angle {  
  syntax: "";  
  initial-value: 0deg;  
  inherits: false;  
}
  • @property नियम ब्राउज़र को syntax स्वीकार करने और initial value को 0deg पर सेट करने देता है
  • इससे ब्राउज़र 0deg से 360deg तक स्मूद तरीके से ट्रांज़िशन कर सकता है और घूमता हुआ gradient रेंडर कर सकता है
@keyframes rotate-gradient {  
  to {  
    --gradient-angle: 360deg;  
  }  
}  
.rotate-gradient {  
  background: conic-gradient(from var(--gradient-angle), transparent, black);  
  animation: rotate-gradient 10s linear infinite;  
}
  • एक साधारण gradient rotation डेमो से देखा जा सकता है कि इस कॉन्सेप्ट को लागू करने के लिए सिर्फ कुछ पंक्तियों के कोड की ज़रूरत होती है

स्मूद hover transition

  • किसी element पर hover होने पर स्मूद gradient transition के लिए कुछ खास चीज़ों की ज़रूरत होती है
  • जिन custom properties को animation चाहिए, उनके लिए @property definition में syntax घोषित किया जाता है ताकि ब्राउज़र value changes को स्मूद तरीके से transition कर सके
.shiny-cta {  
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,  
              conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),  
                            transparent, var(--shiny-cta-highlight) var(--gradient-percent),  
                            var(--gradient-shine) calc(var(--gradient-percent) * 2),  
                            var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),  
                            transparent calc(var(--gradient-percent) * 4)) border-box;  
}
  • --gradient-percent value चमकदार हिस्से के आकार को तय करती है, और hover पर ज़्यादा प्रतिशत देकर चमक को लंबा बनाया जाता है
  • --gradient-angle-offset value gradient angle को फिर से समायोजित करती है ताकि hover के समय चमक पीछे लौटती हुई न लगे

rotation speed control

  • hover के समय rotation को धीमा करने वाली CSS टिप बहुत उपयोगी है
  • उसी rotation animation को दो बार घोषित किया जाता है, और दूसरे को reverse में सेट करके pause किया जाता है, साथ ही duration को आधा कर दिया जाता है
  • जब element पर hover होता है, तो animation-play-state: running paused value को override कर देता है और rotation को आधी गति तक धीमा कर देता है

छोटे चमकदार बिंदु

  • बटन के अंदर छोटे बिंदुओं की चमक जोड़ने वाला effect शामिल किया जाता है
  • इसके लिए radial-gradient background बनाया जाता है
.shiny-cta::before {  
  --position: 2px;  
  --space: calc(var(--position) * 2);  
  background: radial-gradient(circle at var(--position) var(--position),  
                              white calc(var(--position) / 4),  
                              transparent 0) padding-box;  
  background-size: var(--space) var(--space);  
  background-repeat: space;  
}
  • --gradient-angle custom property का उपयोग conic-gradient mask में किया जाता है, जिससे बिंदु पैटर्न का कुछ हिस्सा घूमते हुए दिखाई देता है

hover color enhancement

  • hover style को बेहतर बनाकर उसे अधिक गहराई और ज़्यादा दृश्य प्रभाव दिया जाता है
  • बटन टेक्स्ट को span element में लपेटकर, blur किए गए box-shadow को लागू किया जाता है ताकि hover पर वह फैले और सिकुड़े

नए स्टाइल की शुरुआत

  • ऊपर की कई तकनीकें कुछ समय पहले तक लगभग असंभव थीं
  • custom properties को स्पष्ट रूप से परिभाषित करने से कई नए अवसर खुलते हैं
  • यह देखना दिलचस्प होगा कि बड़े पैमाने के applications और design systems में @property का उपयोग कैसे किया जाएगा

GN⁺ की संक्षिप्त整理

  • @property नियम CSS custom properties के syntax, initial value और inheritance को स्पष्ट रूप से परिभाषित करने की सुविधा देता है
  • इस फीचर के ज़रिए वेब डेवलपर्स अधिक जटिल और परिष्कृत animation और styles लागू कर सकते हैं
  • खासकर बड़े पैमाने के applications और design systems में इसके उपयोगी होने की संभावना बहुत अधिक है
  • समान प्रकार की सुविधा देने वाले अन्य प्रोजेक्ट्स में CSS Houdini और CSS Properties and Values API शामिल हैं

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-09-05
Hacker News राय

  • जब कोई नया कॉन्सेप्ट सामने आता है तो दिमाग उसके खिलाफ़ प्रतिरोध करता हुआ लगता है

    • MDN लेख पढ़ने की सिफारिश
    • @property को खुद इस्तेमाल करके समझने की ज़रूरत है
    • जटिल UI बनाते समय JS पर निर्भरता को कम से कम रखना महत्वपूर्ण है

  • वेब डेवलपर नहीं हूँ, लेकिन बुनियादी वेब framework इस्तेमाल कर सकता हूँ

    • CSS जब पहली बार आया था, वह याद है
    • पहले CodePen उदाहरण का CSS समझ में नहीं आता
    • सोचता हूँ कि क्या styling system को एक mini animation programming language की ज़रूरत है
    • लगता है यह JavaScript से भी किया जा सकता है

  • हाल की CSS चीज़ें, खासकर Houdini, दिलचस्प लगीं

    • वैसा ही एहसास हुआ जैसा IE 5.5 features की किताब मिलने पर हुआ था
    • CSS में नई सुविधाएँ जुड़ीं, लेकिन वे बुनियादी चीज़ें थीं
    • IE डेवलपर्स JS code को module बनाकर CSS के ज़रिए elements पर attach कर सकते थे
    • अब लगता है कि फिर से वैसी क्षमताएँ मिल रही हैं

  • सिर्फ़ इसलिए कि कुछ संभव है, इसका मतलब यह नहीं कि उसे करना ही चाहिए

    • जब चमकदार नीली LED पहली बार आई थी, तो उसे हर hardware में लगा दिया गया था, लेकिन उससे users को कोई खास मूल्य नहीं मिला

  • CSS animation से की जा सकने वाली चीज़ें जादू जैसी लगती हैं

    • यह सिर्फ़ CSS की दुनिया की चीज़ है, इसलिए इसे सीखना और conceptually समझना कठिन है
    • JS में programming करना ज़्यादा आसान लगता है
    • CSS flex के इस्तेमाल के बहुत सारे options होने से कठिनाई होती है

  • तकनीकी रूप से यह दिलचस्प demo है, लेकिन बटन को इस तरह animate नहीं करना चाहिए

    • हर चीज़ में बैंगनी gradient border जोड़कर उसे animate करने की कोशिश की जाती है
    • सिर्फ़ इसलिए कि यह संभव है, इसका मतलब यह नहीं कि इसे करना ही चाहिए
    • ऐसे styles हटाने के लिए custom CSS लिखना ही मार्गदर्शन है

  • पिछली submissions पर ज़्यादा ध्यान नहीं गया, लेकिन वे दिलचस्प और शिक्षाप्रद हैं

  • यह वेबसाइट खुशी देती है

    • मुझे हमेशा CSS के साथ छेड़छाड़ करना पसंद रहा है
    • वेब डेवलपमेंट करियर बनाते हुए सीखा कि बहुत से लोग CSS से नफ़रत करते हैं
    • HTML+CSS को explore और experiment करने में बहुत समय लगाया
    • ज़्यादातर लोग इसे समय की बर्बादी मानेंगे
    • इस साइट ने मेरा दिन खुशनुमा बना दिया

  • CSS पर काम करना पसंद है, लेकिन सहकर्मियों को इससे जूझते देखा है

    • Kevin Powell का YouTube चैनल ज़ोरदार रूप से recommend करता हूँ
    • registered properties के उपयोगी features समझाने वाला एक video है
    • वीडियो लिंक
    • registered properties को आसान ढंग से समझाने वाला एक लेख भी है
    • लेख लिंक

  • कुछ समय से वेब डेवलपमेंट नहीं किया था, और यह feature क्या करता है, इसे समझने में समय लगा

    • लगता है लेख इसे ठीक से समझा नहीं पाया
    • नया feature @property --gradient-angle {...} block में परिभाषित value को इस्तेमाल करने देता है
    • inherits: false; हिस्सा क्या करता है, यह तो स्पष्ट है, लेकिन इसकी ज़रूरत क्यों है, यह समझ नहीं आता
    • जब CSS selectors पहले से inheritance नियंत्रित कर सकते हैं, तो फिर इसे दूसरी जगह क्यों नियंत्रित करना चाहिए, यह सवाल है
    • यह समझ नहीं आता कि @property block में type define करने की ज़रूरत क्यों है
    • लगता है ब्राउज़र उन जगहों को देखकर type infer क्यों नहीं कर सकता जहाँ @property इस्तेमाल हुआ है