:has() केस स्टडी

Swetha Gopalakrishnan

Saurabh Rajpal

सीएसएस में, सीधे तौर पर पैरंट एलिमेंट को चुनने का कोई तरीका नहीं है. ऐसा इसलिए है, क्योंकि अपने बच्चे. कई सालों से डेवलपर की यह मांग काफ़ी आ रही है. कॉन्टेंट बनाने :has() सिलेक्टर, अब सभी बड़े ब्राउज़र पर काम करता है. इसलिए, यह इस समस्या को हल कर सकता है. इस तारीख से पहले :has(), आपको अक्सर लंबे सिलेक्टर को चेन करना होता है या स्टाइलिंग हुक के लिए क्लास जोड़नी चाहिए. अब तक का डेटा आप किसी एलिमेंट के डिसेंडेंट के साथ संबंध के हिसाब से स्टाइल बना सकते हैं. ज़्यादा पढ़ें में :has() सिलेक्टर के बारे में जानकारी CSS Wrapped 2023 और पांच सीएसएस स्निपेट, जिनके बारे में हर फ़्रंटएंड डेवलपर को पता होना चाहिए.

वैसे तो यह सिलेक्टर छोटा लगता है, लेकिन इसके इस्तेमाल के कई उदाहरण मिल सकते हैं. इस लेख में, इस्तेमाल के कुछ ऐसे उदाहरण दिए गए हैं जिन्हें ई-कॉमर्स कंपनियों ने अनलॉक किया है :has() सिलेक्टर.

:has(), बेसलाइन 'नया उपलब्ध है' का हिस्सा है.

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

नीतिबाज़ार

:has() सिलेक्टर की मदद से, हम JavaScript के आधार पर पुष्टि करने की प्रोसेस को खत्म कर पाए उपयोगकर्ता के चुने हुए विकल्प का इस्तेमाल कर रहा है और उसे किसी ऐसे सीएसएस समाधान से बदल देता है जो काम कर रहा है हमें बिना किसी रुकावट के पहले जैसा अनुभव दे रहे हैं.—अमन सोनी, टेक लीड, पॉलिसीबाज़ार

पॉलिसीबाज़ार की निवेश टीम ने बड़ी समझदारी से :has() सिलेक्टर का इस्तेमाल किया, ताकि प्लान की तुलना करने वाले उपयोगकर्ताओं को साफ़ तौर पर दिखने वाला संकेत. यह इमेज तुलना करने वाले यूज़र इंटरफ़ेस (यूआई) में दो तरह के प्लान दिखाता है (पीला और नीला). हर प्लान की तुलना सिर्फ़ उसके टाइप से की जा सकती है. :has() का इस्तेमाल करने पर, जब कोई उपयोगकर्ता इसे चुनता है प्लान का टाइप (दूसरा टाइप) नहीं चुना जा सकता.

कोड

:has() से आपको स्टाइल पैरंट एलिमेंट और उनके बच्चों का ऐक्सेस मिलता है. कॉन्टेंट बनाने यह कोड जांचता है कि पैरंट कंटेनर में .disabled-group क्लास सेट है या नहीं. अगर ऐसा होता है, तो कार्ड धूसर हो जाता है और "जोड़ें" बटन बटन को इससे रोका गया है pointer-events को none पर सेट करके, क्लिक पर प्रतिक्रिया देना.

.plan-group-container:has(.disabled-group) {
  opacity: 0.5;
  filter: grayscale(100%);
}

.plan-group-container:has(.disabled-section) .button {
  pointer-events: none;
  border-color: #B5B5B5;
  color: var(--text-primary-38-color);
  background: var(--input-border-color);
}

पॉलिसीबाज़ार की स्वास्थ्य टीम ने इन चीज़ों को लागू किया इस्तेमाल का थोड़ा अलग उदाहरण होगा. इनमें उपयोगकर्ता के लिए इनलाइन क्विज़ होता है और :has(), ताकि सवाल के चेकबॉक्स का स्टेटस देखा जा सके और यह पता चल सके कि सवाल जवाब दिया गया. अगर ऐसा है, तो अगले सवाल पर जाने के लिए एक ऐनिमेशन लागू किया जाता है.

कोड

प्लान की तुलना करने के उदाहरण में, :has() का इस्तेमाल यह पता लगाने के लिए किया गया था कि क्लास. इसका इस्तेमाल करके, चेकबॉक्स जैसे इनपुट एलिमेंट की स्थिति को भी देखा जा सकता है :has(input:checked). क्विज़ दिखाने वाले विज़ुअल में, बैंगनी बैनर एक चेकबॉक्स होता है. पॉलिसीबाज़ार यह देखता है कि सवाल ने :has(input:checked) का इस्तेमाल करके जवाब दिया है और अगर है, तो इसका इस्तेमाल करके ऐनिमेशन ट्रिगर करें अगले आइटम पर स्लाइड करने के लिए animation: quesSlideOut 0.3s 0.3s linear forwards सवाल पूछें. नीचे दिए गए कोड में देखें कि यह कैसे काम करता है.

.segment_banner__wrap__questions {
 position: relative;
 animation: quesSlideIn 0.3s linear forwards;
}

.segment_banner__wrap__questions:has(input:checked) {
 animation: quesSlideOut 0.3s 0.3s linear forwards;
}


@keyframes quesSlideIn {
 from {
   transform: translateX(50px);
   opacity: 0;
 }
 to {
   transform: translateX(0px);
   opacity: 1;
 }
}

@keyframes quesSlideOut {
 from {
   transform: translateX(0px);
   opacity: 1;
 }
 to {
   transform: translateX(-50px);
   opacity: 0;
 }
}

Tokopedia

अगर प्रॉडक्ट का थंबनेल हो, तो ओवरले इमेज बनाने के लिए Tokopedia ने :has() का इस्तेमाल किया इसमें कोई वीडियो मौजूद है. अगर प्रॉडक्ट के थंबनेल में .playIcon क्लास, सीएसएस ओवरले जोड़ा गया. यहां, :has() सिलेक्टर का इस्तेमाल & के साथ किया जाता है लागू होने वाली .thumbnailWrapper क्लास में नेस्ट करने वाला सिलेक्टर सभी थंबनेल पर लागू करना चाहिए. यह ज़्यादा मॉड्यूलर और पढ़ने में आसान सीएसएस बनाता है.

कोड

नीचे दिया गया कोड, सीएसएस सिलेक्टर और कंबाइनेटर (& और >) और थंबनेल को स्टाइल देने के लिए, :has() को नेस्ट किया जा रहा है. सपोर्ट न करने वाले लोगों के लिए ब्राउज़र में, सामान्य अतिरिक्त सीएसएस क्लास नियम का इस्तेमाल फ़ॉलबैक के तौर पर किया जाता है. कॉन्टेंट बनाने @supports selector(:has(*)) नियम का इस्तेमाल यह देखने के लिए भी किया जाता है कि ब्राउज़र ठीक से काम कर रहा है या नहीं. इसलिए, सभी ब्राउज़र वर्शन पर अनुभव एक जैसा ही होता है.

export const thumbnailWrapper = css`
  padding: 0;
  margin-right: 7px;
  border: none;
  outline: none;
  background: transparent;

  > div {
    width: 64px;
    height: 64px;
    overflow: hidden;
    cursor: pointer;
    border-color: ;
    position: relative;
    border: 2px solid ${NN0};
    border-radius: 8px;
    transition: border-color 0.25s;

    &.active {
      border-color: ${GN500};
    }

    @supports selector(:has(*)) {
      &:has(.playIcon) {
        &::after {
          content: '';
          display: block;
          background: rgba(0, 0, 0, 0.2);
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
    }

    & > .playIcon {
      position: absolute;
      top: 25%;
      left: 25%;
      width: 50%;
      height: 50%;
      text-align: center;
      z-index: 1;
    }
  }
`;

:has() का इस्तेमाल करते समय इन बातों का ध्यान रखें

ज़्यादा मुश्किल शर्त बनाने के लिए, :has() को अन्य सिलेक्टर के साथ जोड़ें. इस्तेमाल की जानकारी कुछ उदाहरणों को has() में फ़ैमिली सिलेक्टर के तौर पर शामिल किया गया है.

रिसॉर्स:

• सीएसएस रैप किया गया 2023
• :has(): फ़ैमिली सिलेक्टर
• डेमोग्राफ़िक जानकारी :has()
• क्या आपको किसी गड़बड़ी की शिकायत करनी है या किसी नई सुविधा का अनुरोध करना है? हम आपकी राय जानना चाहते हैं!

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

• आपकी ई-कॉमर्स साइट के लिए, वेब यूज़र इंटरफ़ेस (यूआई) की क्षमताएं अहम क्यों हैं?
• स्क्रोल किए गए ऐनिमेशन से जुड़ी केस स्टडी
• ट्रांज़िशन की केस स्टडी देखें
• पॉपओवर केस स्टडी
• कंटेनर क्वेरी की केस स्टडी