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

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

Adam Argyle

पब्लिश किया गया: 20 मार्च, 2025

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

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

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

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

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

::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. कीबोर्ड नेविगेशन शामिल है और यह फ़ोकस ग्रुप की तरह काम करता है.
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: ' ';
    
    &:target-current {
      background: var(--accent);
    }
  }
}

मार्कर वाले एलिमेंट को ::scroll-marker-group कहा जाता है. इसे स्क्रोलर के सिबलिंग के तौर पर बनाया जाता है, ठीक वैसे ही जैसे स्क्रोल बटन. इस कंटेनर को स्टाइल किया जा सकता है और इसे जहां चाहें वहां रखा जा सकता है.

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

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

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

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

संसाधन

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

• वेब स्टैंडर्ड
  • CSS Overflow 5
  • एक्सप्लेनर कैरसेल
  • WAI Aria कैरसेल
• Chrome
  • शिप करने का इंटेंट
  • कैरसेल गैलरी
  • कैरसेल कॉन्फ़िगरर

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

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

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

इसमें कैरसेल के आस-पास मौजूद ज़्यादा बेहतर कॉन्सेप्ट के उदाहरण भी शामिल हैं:

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

कैरसेल गैलरी

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

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

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

आगे का काम

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

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

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

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

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

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

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