राज्य, तर्क और मूल शक्ति: सीएसएस रैप्ड 2025

In This Article

यदि मैं सीएसएस विकास को श्रेणियों में विभाजित करूं, तो हम उन दिनों से बहुत आगे निकल गए हैं जब हम केवल यह महसूस करने के लिए सीमा-त्रिज्या मांगते थे कि हम भविष्य में रह रहे हैं। हम वर्तमान में एक ऐसे क्षण में रह रहे हैं जहां प्लेटफ़ॉर्म हमें ऐसे उपकरण सौंप रहा है जो न केवल दृश्य परत को बदलते हैं, बल्कि मौलिक रूप से हमारे आर्किटेक्ट इंटरफ़ेस को फिर से परिभाषित करते हैं। मैंने सोचा था कि 2024 में घोषित सुविधाओं की संख्या को शीर्ष पर नहीं रखा जा सकता है। मैं कभी इतनी ख़ुशी से ग़लत नहीं हुआ। क्रोम टीम की "सीएसएस रैप्ड 2025" केवल सुविधाओं की एक सूची नहीं है; यह एक गतिशील, देशी वेब के लिए एक घोषणापत्र है। एक ऐसे व्यक्ति के रूप में जिसने इन विकासों का दस्तावेजीकरण करने में कुछ साल बिताए हैं - "सीएसएस5" युग को परिभाषित करने से लेकर आधुनिक लेआउट उपयोगिताओं की जटिलताओं तक - मैं खुद को इस साल के समापन को बड़े उत्साह के साथ देखता हुआ पाता हूं। हम "ऑप्टिमाइज़्ड एर्गोनॉमिक्स" और "नेक्स्ट-जेन इंटरैक्शन" की ओर बदलाव देख रहे हैं जो हमें कोड से लड़ना बंद करने और उनकी प्राकृतिक स्थिति में इंटरफेस को मूर्तिकला शुरू करने की अनुमति देता है। इस लेख में, आप क्रोम की रिपोर्ट की असाधारण विशेषताओं पर एक व्यापक नज़र डाल सकते हैं, जिसे मेरे हाल के प्रयोगों और प्लेटफ़ॉर्म के भविष्य के लिए आशाओं के लेंस के माध्यम से देखा जा सकता है। घटक क्रांति: अंत में, एक मूल अनुकूलन योग्य चयन वर्षों से, हमने स्टाइल ड्रॉपडाउन के लिए भारी जावास्क्रिप्ट लाइब्रेरीज़ पर भरोसा किया है, यह एक "दशकों पुरानी समस्या" है जिसे प्लेटफ़ॉर्म ने अंततः हल कर दिया है। जैसा कि मैंने अनुकूलन योग्य चयन (और संबंधित लेखों) के इतिहास में अपने गहन गोता में विस्तार से बताया है, यह एक लंबी सड़क रही है जिसमें ओपन यूआई, और जैसे बाइकशेडिंग नाम शामिल हैं, और अंत में एक ऐसे समाधान पर उतरना है जो मौजूदा तत्व का पुन: उपयोग करता है। उपस्थिति का परिचय: आधार-चयन एक मजबूत आधार है। यह हमें मानक सीएसएस का उपयोग करके तत्व - बटन और ड्रॉपडाउन सूची (::picker(select) के माध्यम से) को पूरी तरह से अनुकूलित करने की अनुमति देता है। महत्वपूर्ण बात यह है कि इसे प्रगतिशील वृद्धि को ध्यान में रखकर बनाया गया है। अपनी शैलियों को एक फीचर क्वेरी में लपेटकर, हम सभी ब्राउज़रों पर एक सहज अनुभव सुनिश्चित करते हैं। हम पुराने ब्राउज़र को तोड़े बिना इस नए व्यवहार को अपना सकते हैं: चुनें { /* नए अनुकूलन योग्य चयन के लिए ऑप्ट-इन करें */ @समर्थन (उपस्थिति: आधार-चयन) { &, &::पिकर(चयन) { उपस्थिति: आधार-चयन; } } }

छवियों या झंडों जैसे विकल्पों के अंदर समृद्ध सामग्री की अनुमति देने का शानदार संयोजन बहुत मज़ेदार है। आजकल हम सभी प्रकार के चयन बना सकते हैं:

डेमो: मैंने एक पोके-एडवेंचर डेमो बनाया है जिसमें दिखाया गया है कि कैसे नया तत्व एक विकल्प से सीधे बटन में समृद्ध सामग्री (जैसे पोकेबॉल आइकन) को क्लोन कर सकता है।

विकल्पों के अंदर छवियों और यूटिलिटीबेंड द्वारा चयनित सामग्री [फोर्क्ड] के साथ पेन ए अनुकूलन योग्य चयन देखें।

डेमो: केवल छद्म तत्वों के साथ चयन को स्टाइल करने पर एक व्यापक नज़र।

यूटिलिटीबेंड द्वारा केवल छद्म-तत्वों [फोर्क्ड] के साथ पेन ए अनुकूलन योग्य चयन देखें।

डेमो: या आप ऑप्टग्रुप का उपयोग करके इस मेनू चयन डेमो के साथ इसे एक पायदान ऊपर उठा सकते हैं।

यूटिलिटीबेंड द्वारा ऑप्टग्रुप्स [फोर्क्ड] के साथ पेन एन वास्तविक चयन मेनू देखें। यह सुविधा अकेले ही एक बड़े बदलाव का संकेत देती है कि हम फॉर्म कैसे बनाएंगे, निर्भरता और तकनीकी ऋण को कम करेंगे। स्क्रॉल मार्कर और जावास्क्रिप्ट हिंडोला की मौत हिंडोला बनाना ऐतिहासिक रूप से डेवलपर्स और ग्राहकों के बीच एक घर्षण बिंदु रहा है। ग्राहक उन्हें पसंद करते हैं, डेवलपर्स उन्हें सुलभ और निष्पादन योग्य बनाने के लिए आवश्यक जावास्क्रिप्ट से डरते हैं। ::स्क्रॉल-मार्कर और ::स्क्रॉल-बटन() छद्म तत्वों का आगमन इस गतिशीलता को पूरी तरह से बदल देता है। ये सुविधाएं हमें पूरी तरह से सीएसएस के साथ नेविगेशन डॉट्स और स्क्रॉल बटन बनाने की अनुमति देती हैं, जो मूल रूप से स्क्रॉल कंटेनर से जुड़े होते हैं। जैसा कि मैंने अपने ब्लॉग पर लिखा था, यह पहली स्लाइड में प्यार था। जावास्क्रिप्ट की एक भी पंक्ति के बिना पूरी तरह कार्यात्मक, सुलभ स्लाइडर बनाने की क्षमता न केवल सुविधाजनक है; यह प्रदर्शन की जीत है। इस सुविधा को लेकर कुछ पहुंच-योग्यता संबंधी चिंताएँ हैं, और भले ही ये वैध हैं, हम डेवलपर्स के लिए इसे काम में लाने का एक तरीका हो सकता है। अच्छी बात यह है कि, ये सभी यूआई परिवर्तन इसे कस्टम डोम हेरफेर और एरिया टैग के आसपास खींचने की तुलना में बहुत आसान बना रहे हैं, लेकिन मैं विषयांतर कर रहा हूं... अब हम स्क्रॉल-मार्कर-ग्रुप का उपयोग करके स्वचालित रूप से मार्करों को समूहित कर सकते हैं और एंकर पोजिशनिंग का उपयोग करके बटनों को स्टाइल कर सकते हैं ताकि उन्हें ठीक वहीं रखा जा सके जहां हम चाहते हैं।

.हिंडोला { अतिप्रवाह-एक्स: ऑटो; स्क्रॉल-मार्कर-समूह: के बाद; /* बिंदुओं के लिए कंटेनर बनाता है */

/*बटन बनाएं*/ &::स्क्रॉल-बटन(इनलाइन-एंड),&::स्क्रॉल-बटन(इनलाइन-स्टार्ट) { सामग्री: " "; स्थिति: निरपेक्ष; /* उन्हें केन्द्रित करने के लिए एंकर पोजीशनिंग का उपयोग करें */ स्थिति-लंगर: --हिंडोला; शीर्ष: एंकर(केंद्र); }

/*बच्चों पर मार्कर बनाएं*/ डिव { &::स्क्रॉल-मार्कर { सामग्री: " "; चौड़ाई: 24px; सीमा-त्रिज्या: 50%; कर्सर: सूचक; } /* सक्रिय मार्कर को हाइलाइट करें */ &::स्क्रॉल-मार्कर:लक्ष्य-वर्तमान { पृष्ठभूमि: सफ़ेद; } } }

डेमो: बटन लगाने के लिए एंकर पोजिशनिंग का उपयोग करते हुए, मेरा प्रयोग पूरी तरह से HTML और CSS से एक कैरोसेल बना रहा है।

यूटिलिटीबेंड द्वारा पेन कैरोसेल प्योर HTML और CSS [फोर्क्ड] देखें।

डेमो: पृष्ठभूमि छवियों को गतिशील रूप से मार्करों में खींचने के लिए attr() का उपयोग करके एक वेबशॉप स्लिक स्लाइडर रीमेक।

यूटिलिटीबेंड द्वारा सीएसएस [फोर्क्ड] में पेन वेबशॉप स्लिक स्लाइडर रीमेक देखें। राज्य प्रश्न: चिपचिपी चीज़ अटक गई? तेज़ बात टूट गई? लंबे समय से, हमारे पास इंटरसेक्शनऑब्जर्वर हैक्स पर भरोसा किए बिना यह जानने की क्षमता का अभाव है कि क्या कोई "चिपचिपी चीज फंस गई है" या कोई "तत्काल वस्तु टूट गई है"। क्रोम 133 ने स्क्रॉल-स्टेट क्वेरीज़ पेश की, जिससे हमें इन राज्यों को घोषणात्मक रूप से क्वेरी करने की अनुमति मिली। कंटेनर-प्रकार: स्क्रॉल-स्टेट सेट करके, अब हम बच्चों को इस आधार पर स्टाइल कर सकते हैं कि वे अटके हुए हैं, टूटे हुए हैं या ओवरफ्लो हो रहे हैं। यह "जीवन की गुणवत्ता" में एक बड़ा सुधार है जिसका मैं सीएसएस दिवस 2023 से बेसब्री से इंतजार कर रहा हूं। यह काफी विकसित हो गया है क्योंकि हम स्क्रॉल की दिशा भी देख सकते हैं, सुंदर! एक सरल उदाहरण के लिए: हम अंततः किसी हेडर पर छाया तभी लागू कर सकते हैं जब वह वास्तव में व्यूपोर्ट के शीर्ष पर चिपकी हो: .हेडर-कंटेनर { कंटेनर-प्रकार: स्क्रॉल-स्टेट; स्थिति: चिपचिपा; शीर्ष: 0;

हेडर { संक्रमण: बॉक्स-छाया 0.5s आसानी से बाहर; /* क्वेरी कंटेनर की स्थिति की जांच करती है */ @कंटेनर स्क्रॉल-स्टेट (अटक गया: शीर्ष) { बॉक्स-छाया: आरजीबीए(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }

डेमो: एक चिपचिपा हेडर जो केवल तभी छाया लागू करता है जब वह वास्तव में फंस गया हो।

स्क्रॉल-स्टेट क्वेरी के साथ पेन स्टिकी हेडर देखें, जाँच करें कि क्या चिपचिपा तत्व यूटिलिटीबेंड द्वारा अटका हुआ है।

डेमो: एक पोकेमॉन-थीम वाली सूची जो वर्तमान में स्नैप किए गए चरित्र पर एक फ्रेम को स्थानांतरित करने के लिए एंकर पोजिशनिंग के साथ संयुक्त स्क्रॉल-स्टेट क्वेरीज़ का उपयोग करती है।

यह जांचने के लिए पेन स्क्रॉल-स्टेट क्वेरी देखें कि यूटिलिटीबेंड द्वारा सीएसएस, पोकेमॉन संस्करण [फोर्क्ड] के साथ कौन सा आइटम स्नैप किया गया है। अनुकूलित एर्गोनॉमिक्स: सीएसएस में तर्क सीएसएस रैप्ड का "ऑप्टिमाइज़्ड एर्गोनॉमिक्स" अनुभाग उन विशेषताओं पर प्रकाश डालता है जो हमारे वर्कफ़्लो को अधिक सहज बनाती हैं। हम तर्क कैसे लिखते हैं, इसके लिए तीन विशेषताएं परिवर्तनकारी के रूप में सामने आती हैं:

if() स्टेटमेंट्स हम अंततः सीएसएस में सशर्त प्राप्त कर रहे हैं। if() फ़ंक्शन स्टाइलशीट के लिए टर्नरी ऑपरेटर की तरह कार्य करता है, जो हमें मीडिया, समर्थन, या स्टाइल क्वेरी इनलाइन के आधार पर मान लागू करने की अनुमति देता है। इससे एकल संपत्ति परिवर्तन के लिए वर्बोज़ @मीडिया ब्लॉक की आवश्यकता कम हो जाती है। @फ़ंक्शन फ़ंक्शंस हम अंततः कुछ तर्क को एक अलग स्थान पर ले जा सकते हैं, जिसके परिणामस्वरूप कुछ क्लीनर फ़ाइलें, जीवन की वास्तविक गुणवत्ता की सुविधा मिलती है। सिबलिंग-इंडेक्स() और सिबलिंग-काउंट() ये ट्री-काउंटिंग फ़ंक्शन सूची आकार के आधार पर चौंका देने वाले एनिमेशन या स्टाइलिंग आइटम की समस्या को हल करते हैं। जैसा कि मैंने सीएसएस के साथ भाई-बहनों को स्टाइल करना कभी आसान नहीं पाया, यह हमारे HTML में कस्टम गुणों (जैसे --index: 1) को हार्ड-कोड करने की आवश्यकता को समाप्त कर देता है।

उदाहरण: लेआउट की गणना अब हम संक्षिप्त गणितीय सूत्र लिख सकते हैं। उदाहरण के लिए, स्क्रीन में प्रवेश करने वाले कार्डों के लिए एनीमेशन को चौंका देना तुच्छ हो जाता है: .कार्ड-कंटेनर > * { एनीमेशन: 0.6s ईज़-आउट फॉरवर्ड प्रकट करें; /* अब कोई मैनुअल --इंडेक्स वेरिएबल नहीं! */ एनिमेशन-विलंब: कैल्क(सिबलिंग-इंडेक्स() * 0.1एस); }

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

डेमो: कार्ड एनिमेशन को गतिशील रूप से चौंका देना।

यूटिलिटीबेंड द्वारा सिबलिंग-इंडेक्स() [फोर्क्ड] का उपयोग करके पेन स्टैगर कार्ड देखें।

डेमो: सिबलिंग-इंडेक्स, सिबलिंग-काउंट और नए सीएसएस @फंक्शन फीचर का उपयोग करके वस्तुओं को एक सही सर्कल में रखना।

यूटिलिटीबेंड द्वारा सिबलिंग-इंडेक्स, सिबलिंग-काउंट और फ़ंक्शंस [फोर्क्ड] का उपयोग करते हुए पेन द सर्कल देखें। मेरी सीएसएस कार्यों की सूची: वे विशेषताएँ जिन्हें आज़माने के लिए मैं इंतज़ार नहीं कर सकता जबकि मैं चयन और परिवर्तन को मूर्त रूप देने में व्यस्त हूं, "सीएसएस रैप्ड 2025" रिपोर्ट अन्य अच्छाइयों से भरी हुई है, जिन्हें मुझे अभी तक कोडपेन में सक्रिय करने का मौका नहीं मिला है। मेरे अगले प्रयोगों के लिए ये मेरी सूची में सबसे ऊपर हैं: एंकर्ड कंटेनर क्वेरीज़ मैंने अपने हिंडोला डेमो में बटनों के लिए सीएसएस एंकर पोजिशनिंग का उपयोग किया, लेकिन "सीएसएस रैप्ड" एक पर प्रकाश डालता हैइसका विकास: एंकर्ड कंटेनर क्वेरीज़। यह टूलटिप्स के साथ हमारी सभी समस्याओं का समाधान करता है: यदि ब्राउज़र स्थान की कमी के कारण टूलटिप को ऊपर से नीचे फ़्लिप करता है, तो "तीर" अक्सर गलत दिशा की ओर इशारा करता रहता है। एंकर्ड कंटेनर क्वेरीज़ (@कंटेनर एंकर्ड(फॉलबैक: फ्लिप-ब्लॉक)) के साथ, हम उस तत्व को स्टाइल कर सकते हैं जिसके आधार पर ब्राउज़र ने वास्तव में कौन सी फ़ॉलबैक स्थिति चुनी है। नेस्टेड दृश्य संक्रमण समूह देखें ट्रांज़िशन एक क्रांति रही है, लेकिन वे एक विशिष्ट व्यापार-बंद के साथ आए: उन्होंने तत्व वृक्ष को समतल कर दिया, जो अक्सर 3 डी ट्रांसफ़ॉर्म या ओवरफ़्लो: क्लिप को तोड़ देता है। मुझे हमेशा यह महसूस होता था कि इसमें कुछ कमी है, और शायद यही उत्तर हो सकता है। दृश्य-संक्रमण-समूह: निकटतम का उपयोग करके, हम अंततः संक्रमण समूहों को एक-दूसरे के भीतर घोंसला बना सकते हैं। यह हमें संक्रमण के दौरान क्लिपिंग प्रभाव या 3डी घुमाव बनाए रखने की अनुमति देता है - कुछ ऐसा जो पहले असंभव था क्योंकि तत्वों को शीर्ष स्तर तक फहराया गया था। .कार्ड img { दृश्य-संक्रमण-नाम: फोटो; दृश्य-संक्रमण-समूह: निकटतम; /* इसे नेस्टेड रखें! */ }

टाइपोग्राफी और आकार अंत में, मेरे अंदर का एर्गोनोमिस्ट टेक्स्ट बॉक्स ट्रिम को आज़माने के लिए उत्सुक है, जो अंततः सही ऊर्ध्वाधर संरेखण प्राप्त करने के लिए टेक्स्ट सामग्री (अग्रणी) के ऊपर और नीचे उस कष्टप्रद अतिरिक्त खाली स्थान को हटाने का वादा करता है। और रचनात्मक पक्ष के लिए, कोने-आकार और आकार () फ़ंक्शन गैर-आयताकार लेआउट खोल रहे हैं, जो "स्क्वेरिकल्स" और जटिल पथों की अनुमति देते हैं जो सीएसएस चर पर प्रतिक्रिया करते हैं। जैसा कि कहा जा रहा है, मैं चक्करों से भरे डिज़ाइन के लिए इंतजार नहीं कर सकता! एक आशापूर्ण भविष्य हम एक ऐसी दुनिया देख रहे हैं जहां सीएसएस तर्क, स्थिति और जटिल इंटरैक्शन को संभालने में सक्षम हो रहा है जो पहले जावास्क्रिप्ट से संबंधित थे। moveBefore (iframes/videos के लिए DOM स्थिति को संरक्षित करना) और attr() (रंगों और ग्रिडों के लिए स्ट्रिंग से परे प्रकारों का उपयोग करना) जैसी सुविधाएं इस वास्तविकता को और पुख्ता करती हैं। हालाँकि इनमें से कुछ सुविधाएँ वर्तमान में प्रायोगिक या क्रोम के लिए विशिष्ट हैं, लेकिन गति निर्विवाद है। हमें इन क्षमताओं को आधार रेखा बनाने के लिए इंटरऑप जैसी पहल के माध्यम से सभी ब्राउज़रों में निरंतर समर्थन की आशा करनी चाहिए। ऐसा कहा जा रहा है कि, ब्राउज़र इंजन का होना उतना ही महत्वपूर्ण है जितना कि "क्रोम फर्स्ट" में इन सभी अद्भुत सुविधाओं का होना। ब्राउज़रों में उतरने से पहले इन नई सुविधाओं पर चर्चा, बदलाव और परीक्षण की आवश्यकता है। सीएसएस में प्रवेश करना एक शानदार क्षण है। हम अब केवल दस्तावेज़ों को स्टाइल नहीं कर रहे हैं; हम एक देशी टूलकिट के साथ गतिशील, एर्गोनोमिक और मजबूत एप्लिकेशन तैयार कर रहे हैं जो पहले से कहीं अधिक शक्तिशाली है। आइए इस नए युग के साथ चलें और इसका प्रचार करें। यह सीएसएस रैप्ड है!

You May Also Like

13 Trending Songs on TikTok in March 2026 (+ How to Use Them)

Our Best AI PM Workflows for Prototyping, Strategy, and Personal OS (2026)

China’s Cybersecurity Agency Issues Security Warning About OpenClaw