अगर हम सीएसएस विकास कए श्रेणी मे बांटब त हम सब ओहि दिन स बहुत आगू बढ़ि गेलहुं अछि जखन हम सब बस सीमा-त्रिज्या स कहलहुं जे भविष्य मे जी रहल छी। हम एखन एहन क्षण मे जीबि रहल छी जतय प्लेटफॉर्म हमरा सब कए एहन टूल सौंप रहल अछि जे सिर्फ विजुअल लेयर कए ट्वीक नहि करैत अछि, बल्कि मौलिक रूप स’ हम सब इंटरफेस कए कोना आर्किटेक्ट करैत छी, एकरा फेर स’ परिभाषित करैत अछि । हमरा लागल जे 2024 मे घोषित फीचर के संख्या के टॉप नहि कएल जा सकैत अछि. एतेक खुशी स’ हम कहियो गलत नहि भेलहुँ।
क्रोम टीम केरऽ “सीएसएस रैप्ड २०२५” खाली फीचर केरऽ सूची नै छै; ई एकटा गतिशील, देशी जाल के घोषणापत्र छै. एकटा एहन व्यक्ति के रूप में जे एक दू साल एहि विकास के दस्तावेजीकरण में बितेने छी — “CSS5” युग के परिभाषित करय सं ल’ क’ आधुनिक लेआउट उपयोगिता के पेचीदगी तक — हम अपना के एहि बेरक रैप-अप के एकटा विशाल उत्साह के भाव सं देखैत पाबैत छी. हम “ऑप्टिमाइज्ड एर्गोनॉमिक्स” आरू “नेक्स्ट-जेन इंटरैक्शन्स” के तरफ बदलाव देखै छियै जेकरा स॑ हम्मं॑ कोड स॑ लड़ना बंद करी क॑ इंटरफेस क॑ ओकरऽ प्राकृतिक अवस्था म॑ मूर्तिकला शुरू करी सकै छियै ।
एहि लेख मे अहां क्रोम क रिपोर्ट स स्टैंडआउट फीचर पर व्यापक नजरि पाबि सकैत छी, जेकरा हमर हाल क प्रयोग आ प्लेटफॉर्म क भविष्य क आशा क चश्मा स देखल गेल अछि ।
घटक क्रांति: अंत मे, एक देशी अनुकूलन योग्य चयन
वर्षो स॑, हम्मं॑ ड्रॉपडाउन क॑ स्टाइल करै लेली भारी जावास्क्रिप्ट लाइब्रेरी प॑ भरोसा करी रहलऽ छियै, जे एगो “दशक पुरानऽ समस्या” छै जेकरा प्लेटफॉर्म न॑ आखिरकार हल करी लेल॑ छै । जेना कि हम अनुकूलन योग्य चयन (आओर संबंधित लेख) के इतिहास में अपन गहींर गोताखोरी में विस्तार सं कहने रही, ई एकटा लंबा सड़क रहल अछि जाहि में ओपन यूआई,
विकल्प के भीतर समृद्ध सामग्री के अनुमति देबय के शानदार जोड़, जेना कि छवि या झंडा, बहुत मजेदार अछि. हम आइ-काल्हि तरह-तरह के सेलेक्ट बना सकैत छी:
डेमो: हम एकटा पोके-साहसिक डेमो बनौने छी जे ई देखाबैत अछि जे कोना नव
पेन देखू विकल्पक कें अंदर छविक कें साथ एकटा अनुकूलन योग्य चयन आ utilitybend द्ववारा selectedcontent [forked].
डेमो : केवल छद्म-तत्व के साथ चयनित के स्टाइलिंग पर एक व्यापक नज़र।
पेन देखू utilitybend द्वारा केवल छद्म-तत्व [forked] क संग एकटा अनुकूलन योग्य चयन.
डेमो: या अहां एकरा ऑप्टग्रुप के उपयोग क एहि मेनू चयन डेमो सं एक पायदान ऊपर लात मारि सकय छी.
पेन देखू utilitybend द्वारा optgroups [forked] क संग एकटा वास्तविक चयन मेनू. असगर ई सुविधा एहि बात मे भारी बदलाव के संकेत दैत अछि जे हम कोना फॉर्म बनाबी, निर्भरता आ तकनीकी ऋण मे कमी आओत. स्क्रॉल मार्कर आ जावास्क्रिप्ट हिंडोला के मौत हिंडोला बनाना ऐतिहासिक रूप स॑ डेवलपर आरू क्लाइंट के बीच घर्षण बिंदु रहलऽ छै । ग्राहक ओकरा बहुत पसंद करै छै, डेवलपर ओकरा सुलभ आरू प्रदर्शनकारी बनाबै लेली जरूरी जावास्क्रिप्ट स॑ डरै छै । ::scroll-marker आओर ::scroll-button() छद्म-तत्व क आगमन एहि गतिशीलता कए पूर्ण रूप स बदलैत अछि. ई सुविधा हमरा विशुद्ध रूप स॑ CSS के साथ नेविगेशन डॉट आरू स्क्रॉल बटन बनाबै के अनुमति दै छै, जे स्क्रॉल कंटेनर स॑ नेटिव रूप स॑ जुड़लऽ छै । जेना कि हम अपन ब्लॉग पर लिखने रही जे ई छल Love at first slide. जावास्क्रिप्ट केरऽ एक लाइन के बिना पूर्ण रूप स॑ कार्यात्मक, सुलभ स्लाइडर बनाबै के क्षमता खाली सुविधाजनक नै छै; प्रदर्शनक लेल ई जीत अछि। एहि सुविधा के आसपास किछु सुलभता के चिंता अछि, आओर भले ई सभ मान्य अछि, मुदा हमरा सभ डेवलपर के लेल एकरा काज करय के तरीका भ सकैत अछि. नीक बात ई जे ई सब यूआई बदलाव कस्टम डोम हेरफेर आ एरिया टैग के इम्हर-उम्हर घसीटब स बहुत आसान बना रहल अछि, मुदा हम विचलित भ जाइत छी... आब हम स्क्रॉल-मार्कर-ग्रुप कें उपयोग सं मार्कर कें स्वचालित रूप सं समूहीकृत कयर सकय छी आ एंकर पोजीशनिंग कें उपयोग सं बटन कें स्टाइल कयर सकय छी ताकि ओकरा ठीक ओतय राखल जा सकय जतय हम चाहय छी.
.हिंडोला { ओवरफ्लो-एक्स: ऑटो; स्क्रॉल-मार्कर-समूह: के बाद; /* बिन्दु के लिये कंटेनर बनाता है */
/* बटन बनाउ */ &::स्क्रॉल-बटन (इनलाइन-अंत),&::स्क्रॉल-बटन (इनलाइन-शुरुआत) { सामग्री: " "; स्थिति: निरपेक्ष; /* इन्हें केंद्रत करने के लिये एंकर पोजीशनिंग का प्रयोग करें */ स्थिति-लंगर: --हिंडोला; ऊपर: लंगर (केंद्र); } .
/* बच्चों पर मार्कर बनाएँ */ दिव { 1। &::स्क्रॉल-मार्कर { सामग्री: " "; चौड़ाई: 24px; सीमा-त्रिज्या: 50%; कर्सर: सूचक; } . /* सक्रिय मार्कर हाइलाइट करू */ &::स्क्रॉल-मार्कर:लक्ष्य-वर्तमान { पृष्ठभूमि: सफेद; } . } . } .
डेमो : हमर प्रयोग जे विशुद्ध रूप स एचटीएमएल आ सीएसएस स बाहर एकटा हिंडोला बनेलहुं, बटन कए रखबा लेल एंकर पोजीशनिंग क उपयोग करब।
utilitybend द्वारा पेन हिंडोला शुद्ध एचटीएमएल आओर सीएसएस [फोर्कड] देखू.
डेमो: एक वेबशॉप स्लिक स्लाइडर रीमेक attr() क उपयोग करकय बैकग्राउंड छवि क गतिशील रूप स मार्कर मे खींचय कें लेल.
utilitybend द्वारा CSS [forked] मे पेन वेबशॉप स्लिक स्लाइडर रीमेक देखू. राज्य प्रश्न : चिपचिपा बात अटकल? स्नैपी चीज स्नैप भ गेल? बहुत दिन स॑ हमरा सब म॑ ई जानय के क्षमता के कमी छै कि कोय “चिपचिपा चीज फंसलऽ छै” या “स्नैपी आइटम स्नैप होय गेलऽ छै” बिना IntersectionObserver हैक प॑ भरोसा करलऽ । क्रोम 133 न॑ स्क्रॉल-स्टेट क्वेरी शुरू करलकै, जेकरा स॑ हम्में ई स्टेटऽ स॑ घोषणात्मक रूप स॑ क्वेरी करी सकै छियै । कंटेनर-प्रकार: स्क्रॉल-स्टेट सेट कए, आब हम बच्चा कए एहि आधार पर स्टाइल क सकैत छी जे ओ अटकल अछि, स्नैप अछि, या ओवरफ्लो अछि । ई एकटा पैघ “जीवन के गुणवत्ता” सुधार अछि जकर हम सीएसएस दिवस 2023 स बेसब्री स इंतजार क रहल छी।एतय तक कि एकर बहुत विकास भेल अछि कियाक त हम सब स्क्रॉल के दिशा सेहो देख सकैत छी, प्यारा ! एकटा सरल उदाहरण के लेल: हम अंततः कोनो हेडर पर छाया तखनहि लागू क सकैत छी जखन ओ वास्तव मे व्यूपोर्ट के ऊपर चिपकल हो: .शीर्षक-कंटेनर { . कंटेनर-प्रकार: स्क्रॉल-राज्य; स्थिति: चिपचिपा; ऊपर: 0;
हेडर { 1। संक्रमण: बॉक्स-छाया 0.5s आसान-बाहर; /* क्वेरी कंटेनर क स्थिति क जांच करैत अछि */ @ कंटेनर स्क्रॉल-स्टेट (अटकल: ऊपर) { बॉक्स-छाया: rgba (0, 0, 0, 0.6) 0px 12px 28px 0px; } . } . } .
डेमो : एकटा चिपचिपा हेडर जे तखनहि छाया लागू करैत अछि जखन ओ वास्तव मे अटकल रहैत अछि ।
स्क्रॉल-स्टेट क्वेरी क संग पेन स्टिकी हेडर देखू, जाँच करू जे चिपचिपा तत्व utilitybend द्वारा अटकल [फोर्क] अछि की नहि.
डेमो: एक पोकेमॉन-थीम वाला सूची जे वर्तमान म॑ स्नैप करलऽ गेलऽ चरित्र प॑ फ्रेम क॑ ले जाय लेली एंकर पोजीशनिंग के साथ मिललऽ स्क्रॉल-स्टेट क्वेरी के उपयोग करै छै ।
पेन स्क्रॉल-स्टेट क्वेरी देखू जे कोन आइटम CSS, पोकेमॉन संस्करण [forked] utilitybend द्वारा स्नैप कएल गेल अछि. अनुकूलित एर्गोनॉमिक्स: सीएसएस में तर्क CSS Wrapped केरऽ “अनुकूलित एर्गोनॉमिक्स” खंड ऐन्हऽ विशेषता क॑ उजागर करै छै जे हमरऽ कार्यप्रवाह क॑ अधिक सहज बनाबै छै । हम तर्क कोना लिखैत छी ताहि लेल तीन टा विशेषता परिवर्तनकारीक रूप मे ठाढ़ अछि:
if() Statementsहमरा अंततः CSS मे सशर्त भेट रहल अछि. if() फंक्शन स्टाइलशीट कें लेल त्रिगुणी ऑपरेटर कें तरह काम करय छै, जे हमरा मीडिया, समर्थन, या स्टाइल क्वेरी कें आधार पर मान कें इनलाइन लागू करय कें अनुमति दयत छै. एहि सँ एकल गुण परिवर्तनक लेल वर्बोज @मीडिया ब्लॉक क आवश्यकता कम भ' जाइत अछि. @function functionsहम अंततः किछु तर्क कए अलग जगह पर ल जा सकैत छी, जकर परिणामस्वरूप किछु साफ फाइल, जीवन क वास्तविक गुणवत्ता क सुविधा भेटैत अछि । sibling-index() आरू sibling-count()ई ट्री-काउंटिंग फंक्शन सूची आकार कें आधार पर डगमगाबै वाला एनीमेशन या स्टाइलिंग आइटम कें मुद्दा कें हल करय छै. जेना कि हम सीएसएस के साथ भाई-बहिन के स्टाइलिंग में एक्सप्लोर केने रही, ई कहियो आसान नै छल, एहि स हमर एचटीएमएल में कस्टम प्रॉपर्टी (जेना --index: 1) के हार्ड-कोड करय के जरूरत खतम भ जायत अछि.
जेना : लेआउट के गणना करब आब संक्षिप्त गणितीय सूत्र लिखि सकैत छी। जेना, स्क्रीन मे प्रवेश करय वाला कार्डक कें लेल एनीमेशन कें डगमगानाय तुच्छ भ जायत छै: .कार्ड-कंटेनर > * { एनीमेशन: 0.6s सहज-बाहर आगू प्रकट करब; /* आब कोनो मैनुअल नहि --सूचकांक चर! */ एनीमेशन-विलंब: calc (भाई-सूचकांक () * 0.1s); } .
एतेक धरि जे हम त्रिकोणमितिक संग एहि फंक्शन सभक उपयोग कए बिना कोनो जावास्क्रिप्ट के आइटम के एकदम सही सर्कल मे राखय के प्रयोग केलहुं।
डेमो: गतिशील रूप स डगमगाइत कार्ड एनीमेशन।
utilitybend द्वारा sibling-index() [forked] क उपयोग करकय पेन स्टैगर कार्ड देखू.
डेमो: भाई-बहिन-सूचकांक, भाई-बहिन-गणना, आरू नया CSS @function सुविधा के उपयोग करी क॑ आइटम क॑ एकदम सही वृत्त म॑ रखना ।
पेन देखू utilitybend द्वारा sibling-index, sibling-count आ फंक्शन [forked] क उपयोग करय वाला वृत्त. हमर CSS टू-डू लिस्ट: फीचर जे हम कोशिश करबाक इंतजार नहि क’ सकैत छी जखन कि हम चयन आ संक्रमण के मूर्तिकला मे व्यस्त रहलहुं अछि, “सीएसएस लपेटल 2025” रिपोर्ट आओर गुडी स’ भरल अछि जेकरा कोडपेन मे एखन धरि फायर करबाक मौका नहि भेटल अछि. हमर अगिला प्रयोगक लेल ई सब हमर सूची मे बेसी अछि: एंकर कंटेनर क्वेरीज हम अपन हिंडोला डेमो मे बटन के लेल CSS Anchor Positioning के प्रयोग केने रही, मुदा “CSS Wrapped” एकटा के हाइलाइट करैत अछि |एकर विकास: एंकर कंटेनर क्वेरीज। एहि सँ एकटा समस्याक समाधान भ’ जाइत अछि जे हमरा सभ केँ टूलटिप केर संग भेल अछि: जँ ब्राउजर जगहक कमीक कारण टूलटिप केँ ऊपर सँ नीचाँ पलटि दैत अछि त’ “तीर” प्रायः गलत रास्ता दिस इशारा करैत रहैत अछि. एंकर कंटेनर क्वेरी (@container anchored(fallback: flip-block)) के साथ, हम तत्व क॑ ई आधार प॑ स्टाइल करी सकै छियै कि ब्राउज़र न॑ वास्तव म॑ कोन फॉलबैक स्थिति चुनलकै । नेस्टेड दृश्य संक्रमण समूह व्यू ट्रांजिशन एकटा क्रांति रहल अछि, मुदा ई एकटा विशिष्ट ट्रेड-ऑफ के संग आयल छल: ओ तत्व ट्री के समतल क देलक, जे अक्सर 3D ट्रांसफॉर्म या ओवरफ्लो: क्लिप के तोड़ि दैत छल. हमरा सदिखन एहन भाव रहैत छल जे एहि मे किछु कमी अछि, आ भ' सकैत अछि जे ई मात्र एकर जवाब हो. view-transition-group: nearest के उपयोग करी क॑, हम अंततः संक्रमण समूह क॑ एक-दूसरा के भीतर घोंसला बनाबै सकै छियै । ई हमरा सब क॑ संक्रमण के दौरान क्लिपिंग इफेक्ट या 3D रोटेशन क॑ बरकरार रखै के अनुमति दै छै — जे पहिने असंभव छेलै, कैन्हेंकि तत्वऽ क॑ ऊपरी स्तर तलक फहराबै के काम करलऽ जाय छेलै । .कार्ड img { 1। दृश्य-संक्रमण-नाम: फोटो; दृश्य-संक्रमण-समूह: निकटतम; /* एकरा घोंसला बना क' राखू! */ } .
टाइपोग्राफी एवं आकृति अंत में, हमरा में एर्गोनॉमिस्ट टेक्स्ट बॉक्स ट्रिम के ट्राई करय में खुजली क रहल अछि, जे टेक्स्ट सामग्री के ऊपर आ नीचा ओहि परेशान करय वाला अतिरिक्त व्हाइटस्पेस (अग्रणी) के हटाबय के वादा करैत अछि जाहि सं अंततः सही ऊर्ध्वाधर संरेखण प्राप्त भ सकय. आरू रचनात्मक पक्ष के ललए, corner-shape आरू shape() फंक्शन गैर-आयताकार लेआउट खोल रहलऽ छै, जेकरा स॑ “squaricles” आरू जटिल मार्ग के अनुमति मिलै छै जे CSS चर के प्रतिक्रिया दै छै. कहल जा रहल अछि जे हमरा इंतजार नहि भ’ रहल अछि जे एकटा डिजाइन चकचकिया स’ भरल होयत! एकटा आशाजनक भविष्य हम एकटा एहन दुनिया के गवाह छी जतय सीएसएस तर्क, राज्य, आ जटिल बातचीत के संभालबा में सक्षम भ रहल अछि जे पहिने जावास्क्रिप्ट के छल. moveBeforo (iframes/वीडियो के लेल DOM स्थिति के संरक्षित करब) आ attr() (रंग आ ग्रिड के लेल स्ट्रिंग स परे प्रकार के उपयोग करब) जैसनऽ सुविधा ई वास्तविकता क॑ आरू सीमेंट करै छै । जखन कि एहि मे स किछु फीचर एखन प्रयोगात्मक या क्रोम क लेल विशिष्ट अछि, मुदा गति निर्विवाद अछि । हमरा सब क॑ इंटरॉप जैसनऽ पहल के माध्यम स॑ सब ब्राउज़र म॑ लगातार समर्थन के आशा करना चाहियऽ ताकि ई सुनिश्चित करलऽ जाय सक॑ कि ई क्षमता आधार रेखा बनी जाय । कहलऽ जाय रहलऽ छै कि ब्राउज़र इंजन होना भी ओतने जरूरी छै जेतना कि “क्रोम फर्स्ट” म॑ ई सब भयानक फीचर होना । ई नया फीचर प॑ कहियो भी ब्राउज़र म॑ उतरै स॑ पहल॑ चर्चा, टिंकरिंग आरू परीक्षण करै के जरूरत छै । सीएसएस मे एबाक लेल ई एकटा शानदार क्षण अछि। हम सब आब खाली स्टाइलिंग डॉक्यूमेंट नहिं छी; हम एकटा देशी टूलकिट कें साथ गतिशील, एर्गोनॉमिक, आ मजबूत अनुप्रयोगक कें क्राफ्ट करय रहल छै जे पहिले सं बेसि शक्तिशाली छै. आउ, एहि नव युगक संग आगू बढ़ू आ प्रचार प्रसार करी। ई CSS लपेटल अछि !
