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