सीएसएस के साथ कैरसेल

Adam Argyle

पब्लिश होने की तारीख: 20 मार्च, 2025

Chrome 135 से, सीएसएस ओवरफ़्लो 5 स्पेसिफ़िकेशन की सुविधाओं का इस्तेमाल किया जा सकता है. इन्हें स्क्रोल और कैरसेल के अनुभव बनाने के लिए डिज़ाइन किया गया है.

इस पोस्ट में, इन नई सुविधाओं का इस्तेमाल करके बनाए गए कई तरह के स्क्रोल और कैरसेल अनुभव के बारे में खास जानकारी दी गई है. साथ ही, इसमें JavaScript का इस्तेमाल नहीं किया गया है. यहां दिया गया वीडियो देखें और जानें कि अब क्या-क्या किया जा सकता है.

वीडियो में स्क्रोल बटन, स्क्रोल मार्कर, स्क्रोल किए जाने पर चलने वाला ऐनिमेशन, scroll-state() क्वेरी, :has(), ग्रिड, ऐंकर वगैरह को एक साथ दिखाया गया है.

सुलभता से जुड़ी कहानी और भी शानदार है.

कैरसेल के सबसे सही तरीकों को ब्राउज़र मैनेज करता है. ऐसा इसलिए, क्योंकि इंजीनियरिंग और सुलभता टीमें साथ मिलकर काम करती हैं. इससे ज़्यादा सुलभ कैरसेल बनाना बहुत मुश्किल होगा.

Meet ::scroll-button() और ::scroll-marker()

कैरसेल, स्क्रोल करने की सुविधा वाला एक ऐसा एरिया होता है जिसमें ज़्यादा से ज़्यादा दो यूज़र इंटरफ़ेस (यूआई) एलिमेंट जोड़े जा सकते हैं. जैसे, बटन और मार्कर.

सीएसएस कैरसेल की सुविधाओं के पहले वर्शन में, बटन और मार्कर सीएसएस से बनाए जाते हैं. ब्राउज़र, एलिमेंट को सिबलिंग के तौर पर रखता है. साथ ही, उन्हें सही भूमिकाएं और टैब का सही क्रम देता है. इसके अलावा, उनकी स्थिति को बनाए रखता है. इससे, सुलभ कैरसेल बनाना आसान हो जाता है.

• स्क्रोल बटन
  ये ब्राउज़र में उपलब्ध होते हैं. ये स्टेटफ़ुल और इंटरैक्टिव स्क्रोल अफ़ॉर्डेंस <button> एलिमेंट होते हैं. इनसे कॉन्टेंट को ऐक्सेस करने और स्क्रोल करने में मदद मिलती है. इन्हें दबाने पर, स्क्रोल एरिया का 85% हिस्सा स्क्रोल हो जाता है.

• स्क्रोल मार्कर
  ये ब्राउज़र की ओर से उपलब्ध कराए जाते हैं. ये स्टेटफ़ुल नेविगेशन <a> एलिमेंट होते हैं. इनसे स्क्रोल एरिया में मौजूद किसी भी आइटम को ऐक्सेस करने में मदद मिलती है.

इस पोस्ट के बाकी हिस्से में, इन नई सुविधाओं का इस्तेमाल करके कैरसेल बनाने का तरीका बताया गया है.

स्क्रोलर से शुरुआत करना

अपनी साइट पर मौजूद किसी भी स्क्रोल एरिया में बटन और मार्कर जोड़े जा सकते हैं.

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

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

::scroll-button() की मदद से स्क्रोल बटन जोड़ना

आपके ऑपरेटिंग सिस्टम के आधार पर, स्क्रोलबार के आस-पास पहले से ही स्क्रोल बटन मौजूद हो सकते हैं. स्क्रोलबार में बने बटन, स्क्रोल करने की जगह को थोड़ा सा खिसकाते हैं. वहीं, सीएसएस स्क्रोल बटन, स्क्रोल करने की जगह के 85% हिस्से को खिसकाते हैं.

ऐसे कैरसेल के लिए जिनमें एक बार में सिर्फ़ एक आइटम पूरी चौड़ाई में दिखता है और जिनमें स्क्रोल स्नैप पॉइंट होते हैं, यह आइटम के हिसाब से तय की गई रकम की तरह लगेगा. जब आइटम की लंबी सूची में एक से ज़्यादा आइटम एक साथ दिखते हैं, तो यह लगभग पूरे पेज पर स्क्रोल करता है.

सीएसएस की मदद से स्क्रोल बटन जोड़ने के लिए:

1. इन्हें अन्य स्यूडो-एलिमेंट की तरह, सिलेक्टर के साथ जोड़ें: .carousel::scroll-button(right) दाईं ओर स्क्रोल करने के लिए बटन.
2. वैकल्पिक सुलभ फ़ॉलबैक वैकल्पिक टेक्स्ट के साथ content तय करें.

ब्राउज़र, स्क्रोलर के साथ-साथ आपके कॉन्टेंट को शामिल करके असली बटन बनाएगा. अब आपके पास इन बटन को अपनी पसंद के हिसाब से व्यवस्थित करने, स्टाइल करने या anchor() करने का विकल्प है. यहां दी गई सीएसएस, दो बटन बनाती है. एक बटन से बाईं ओर स्क्रोल किया जा सकता है और दूसरे बटन से दाईं ओर स्क्रोल किया जा सकता है.

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*):focus-visible {
    outline-offset: 5px;
  }
}

::scroll-marker() की मदद से स्क्रोल मार्कर जोड़ना

स्क्रोलबार थंब एलिमेंट की तरह ही, सीएसएस स्क्रोल मार्कर से कैरसेल के साइज़ के बारे में पता चलता है. साथ ही, इससे कैरसेल के आखिर या शुरुआत में तेज़ी से जाने की सुविधा मिलती है. सीएसएस स्क्रोल मार्कर, स्क्रोलबार से अलग होता है. ऐसा इसलिए, क्योंकि हर मार्कर एक लिंक होता है. यह स्क्रोलर में मौजूद किसी भी आइटम को दिखा सकता है.

इस अंतर को समझने के लिए, किसी टीवी सीरीज़ के सीज़न के बारे में सोचें. 10 एपिसोड के लिए मार्कर बनाने के बजाय, दो मार्कर बनाएं. ये मार्कर, चैप्टर की शुरुआत में दिखेंगे.

ध्यान दें कि ये मार्कर डॉट नहीं हैं. ये अपने छद्म-तत्व की content: "Season 1" प्रॉपर्टी का इस्तेमाल कर रहे हैं. मार्कर, थंबनेल भी हो सकते हैं. इनका इस्तेमाल आम तौर पर, ई-कॉमर्स या फ़ोटो पर फ़ोकस करने वाली वेबसाइटों पर गैलरी कैरसेल के लिए किया जाता है.

मार्कर, पेज पर मौजूद <a> लिंक की तरह होते हैं. हालांकि, इनमें कुछ खास सुविधाएं होती हैं:

1. इनमें :target-current स्थिति शामिल होती है. यह स्थिति तब दिखती है, जब मार्कर व्यू में होता है या स्नैप किया जाता है.
2. इसमें कीबोर्ड नेविगेशन शामिल है और यह focusgroup की तरह काम करता है.
3. इसमें स्क्रीन रीडर का अनुभव शामिल है. साथ ही, टैबलिस्ट जैसी रिपोर्ट भी शामिल हैं.

इन चरणों को पूरा करके, स्क्रोलर में दिलचस्पी दिखाने वाले अहम पॉइंट पर मार्कर जोड़ें:

1. scroll-marker-group के प्लेसमेंट को before या after के तौर पर तय करें.
2. .carousel .point-of-interest::scroll-marker सिलेक्टर का इस्तेमाल करके, दिलचस्पी की जगहें चुनें.
3. content को सुलभ फ़ॉलबैक वैकल्पिक टेक्स्ट के साथ तय करें. यह संख्या, टेक्स्ट, खाली या इमेज हो सकता है.

ब्राउज़र सभी मार्कर बनाता है और उन्हें मार्कर ग्रुप कंटेनर में डालता है. इस उदाहरण में, हर <li> के लिए एक खाली मार्कर बनाया गया है, ताकि हर आइटम के लिए एक मार्कर डॉट बनाया जा सके.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

मार्कर वाले एलिमेंट को ::scroll-marker-group कहा जाता है. इसे स्क्रोल बटन की तरह ही स्क्रोलर के साथ बनाया जाता है. इस कंटेनर को स्टाइल किया जा सकता है और इसे अपनी ज़रूरत के हिसाब से कहीं भी रखा जा सकता है.

मार्कर और बटन एक साथ

इन दोनों को एक साथ रखने पर, यह कैरसेल की तरह दिखता है. हालांकि, इसके ये फ़ायदे हैं:

• JavaScript बंद होने पर भी काम करता है.
• हाइड्रेशन या लेज़ी साइज़िंग नहीं (सीएलएस कम करें).
• यह हर तरह के स्क्रोल ऐनिमेशन और ट्रिगर के लिए तैयार है.
• सुलभता की सुविधा शामिल है.
• टच, माउस, और कीबोर्ड के साथ काम करता है.

कम समय में ज़्यादा लोगों तक पहुंचें.

संसाधन

इस पोस्ट में, इन सुविधाओं को ज़्यादातर "कैरसेल" के तौर पर बताया गया है. हालांकि, इनकी क्षमताएं और फ़ायदे, कैरसेल के इस्तेमाल के मामलों से कहीं ज़्यादा हैं. इन नई सुविधाओं की पूरी जानकारी पाने के लिए, कैरसेल गैलरी आज़माएं. साथ ही, स्क्रोलस्पाई, टैब, और स्लाइड जैसे अन्य कॉम्पोनेंट देखें.

• वेब स्टैंडर्ड
  • CSS Overflow 5
  • कैरसेल विज्ञापन के बारे में जानकारी
  • WAI Aria Carousel
• Chrome
  • शिपिंग की इच्छा
  • कैरसेल गैलरी
  • कैरसेल कॉन्फ़िगरेशन टूल

कैरसेल कॉन्फ़िगरेशन

विज़ुअल और इंटरैक्टिव तरीके से सीखने वालों के लिए, कैरोसेल कॉन्फ़िगरेशन टूल आज़माएं.

इसमें स्क्रोल बटन जैसे स्विच होते हैं. इसे चालू करने पर, दिखाए गए कैरसेल में तुरंत बटन दिखने लगते हैं. साथ ही, इससे जुड़ी सीएसएस का इस्तेमाल किया जाता है.

इसमें कैरोसेल के बगल में मौजूद ज़्यादा ऐडवांस कॉन्सेप्ट के उदाहरण भी शामिल हैं:

• इंटरैक्टिविटी
• scroll-state
• स्क्रोल करने पर दिखने वाला ऐनिमेशन
• और scroll snap columns

कैरसेल गैलरी

शोकेस स्पेस, उन लोगों के लिए जो यह जानना चाहते हैं कि इन सुविधाओं का इस्तेमाल कहां तक किया जा सकता है. इसमें "क्या यह X काम कर सकता है?" जैसे सवालों के जवाब दिए जाते हैं. हर डेमो, इंटरनेट पर मौजूद इस्तेमाल के उदाहरण पर आधारित होता है. हर डेमो में, इन बटन और मार्कर को स्क्रोल के हिसाब से ऐनिमेशन, scroll-state() क्वेरी वगैरह के साथ व्यवस्थित करने का तरीका दिखाया गया है.

मज़ेदार बात यह है कि पूरी साइट में JavaScript का इस्तेमाल नहीं किया गया है.

उदाहरणों में, बेहद आसान से लेकर शानदार और सुविधाओं से भरपूर उदाहरण शामिल हैं. गैलरी ब्राउज़ करने से प्रेरणा मिलनी चाहिए और भरोसा बढ़ना चाहिए. साथ ही, कोड को लागू करने के लिए, इसकी जांच की जा सकती हो. कैरसेल बनाने में आपकी मदद करने वाली सुविधाओं के लिए, @layer utilities ढूंढें और उनकी जांच करें.

आगे का काम

हमें इस बात की खुशी है कि ये सुविधाएं, एचटीएमएल और सीएसएस के साथ बहुत अच्छी तरह से काम करती हैं. सीएसएस कैरसेल की सुलभता सबसे अच्छी होती है. सीएसएस कैरसेल की परफ़ॉर्मेंस, JavaScript के किसी भी समाधान से बेहतर होती है. सीएसएस कैरसेल का उपयोगकर्ता अनुभव स्वाभाविक, आसान, और बेहतर होता है. हालांकि, इसे बेहतर बनाने के तरीके हैं.

अपने एलिमेंट जोड़ना

स्क्रोल बटन और मार्कर के लिए, अपने कॉम्पोनेंट जोड़ने की सुविधा पर काम किया जा रहा है. इसका मतलब है कि आपके पास अपने <a> टैग उपलब्ध कराने का विकल्प होता है. इनमें आइकॉन जैसे रिच कॉन्टेंट शामिल होते हैं. आपके पास Tailwind का इस्तेमाल करके बनाए गए, एक से ज़्यादा लेयर वाले बटन भी इस्तेमाल करने का विकल्प होता है.

साइक्लिकल स्क्रोलिंग

कई कैरसेल, आखिर में पहुंचने पर अपने-आप लूप हो जाते हैं. जैसे, मेले में मौजूद कैरसेल राइड. यह समस्या हमारे ध्यान में है. हम इसके लिए, प्लैटफ़ॉर्म पर समाधान उपलब्ध कराने का इरादा रखते हैं.

हमें उम्मीद है कि आपको यह सुविधा पसंद आई होगी. हम "JavaScript disabled" वेब उपयोगकर्ताओं के लिए, स्क्रोल करने का बेहतर अनुभव उपलब्ध कराने के लिए उत्सुक हैं. साथ ही, हमें उम्मीद है कि बिल्ट-इन कैरसेल के बेहतर लाइफ़साइकल से, सीएलएस में कमी आएगी.

आपको कम काम करना होगा, उपयोगकर्ताओं को शानदार अनुभव मिलेगा, और बेहतर परफ़ॉर्मेंस मिलेगी.