5 सीएसएस स्निपेट, जिनके बारे में हर फ़्रंट-एंड डेवलपर को साल 2024 में पता होना चाहिए

यह टूलबेल्ट में शामिल करने लायक, दमदार, और स्टेबल सीएसएस है. इसका इस्तेमाल आज से ही किया जा सकता है.

Adam Argyle

मेरा मानना है कि हर फ़्रंट-एंड डेवलपर को यह पता होना चाहिए कि :has() सिर्फ़ "पैरंट सिलेक्टर" नहीं है. साथ ही, उन्हें :has() के काम करने के तरीके और इसके इस्तेमाल की वजह के बारे में पता होना चाहिए. इसके अलावा, उन्हें यह भी पता होना चाहिए कि पहले से मौजूद सीएसएस सिंटैक्स के साथ नेस्ट कैसे करें, ब्राउज़र को हेडलाइन टेक्स्ट रैपिंग को बैलेंस करने की अनुमति कैसे दें, और कंटेनर क्वेरी यूनिट का इस्तेमाल कैसे करें.subgrid

यह पोस्ट, पिछले साल की पोस्ट 'ऐसे छह CSS स्निपेट जिनके बारे में हर फ़्रंट-एंड डेवलपर को साल 2023 में पता होना चाहिए' का दूसरा हिस्सा है.

CSS:has(.potential-beyond-being-a-parent-selector)

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

यहां पैरंट सिलेक्टर के तौर पर :has() का इस्तेमाल करने के कुछ उदाहरण दिए गए हैं. इसे यह नाम इसलिए मिला है, क्योंकि आम तौर पर सिलेक्टर का विषय आखिर में होता है. जैसे, ul li, जहां li विषय है और इसे स्टाइल मिलती हैं. :has() की मदद से, सिलेक्टर की शुरुआत में मौजूद एलिमेंट को विषय बनाया जा सकता है. यहां दिए गए उदाहरण में, अगर बटन के अंदर .icon क्लास वाला कोई एलिमेंट है, तो बटन में गैप दिखेगा. अगर कार्ड में कोई इमेज है, तो उसका ओरिएंटेशन बदल जाता है.

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

किसी लेआउट को उसमें मौजूद आइटम की संख्या के आधार पर बदलने के लिए, लंबे समय से किसी सिलेक्टर की ज़रूरत थी. अब :has() की मदद से ऐसा किया जा सकता है, क्योंकि यह बच्चों की संख्या के बारे में क्वेरी करते समय कंटेनर को विषय के तौर पर रख सकता है.

main:has(> :nth-child(5)) {…}

यहां एक और उदाहरण दिया गया है. इसमें पेज पर मौजूद किसी खास चेकबॉक्स को चालू करने पर, पूरे दस्तावेज़ के लिए सेट की गई स्टाइल बदल जाती हैं:

html:has(#dark-mode:checked) {…}

ये इस्तेमाल के सामान्य उदाहरण हैं. इनमें सिलेक्टर का विषय नहीं बदलता. अगर सिर्फ़ इस तरह के उदाहरण देखे जाएं, तो आपको लग सकता है कि :has() सिर्फ़ पैरंट सिलेक्टर के तौर पर काम करता है. हालांकि, यहां दिए गए उदाहरणों पर ध्यान दें. ये किसी सामान्य पूर्वज के आधार पर किसी चीज़ की जांच करते हैं. इसके बाद, पेज में कहीं ज़्यादा गहराई में मौजूद किसी चाइल्ड के हिसाब से सिलेक्टर को घुमाते हैं.

अगर इस फ़ॉर्म के किसी भी इनपुट में गड़बड़ी होती है, तो यह फ़ॉर्म में गड़बड़ी दिखाने वाला एलिमेंट दिखाता है:

form:has(:user-invalid) .error {
  display: block;
}

यह कोड, साइडनेव में .--is-open क्लास होने पर, मुख्य कॉन्टेंट वाले सेक्शन को स्लाइड आउट करता है:

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

यहां एक मज़ेदार डेमो दिया गया है. इसमें पैरंट सिलेक्टर के तौर पर :has(), संख्या से जुड़ी क्वेरी के साथ :has(), और कंटेनर क्वेरी का इस्तेमाल करके एक ऐसा ग्रिड लेआउट बनाया गया है जो पोर्ट्रेट या लैंडस्केप ओरिएंटेशन में 1 से 12 एलिमेंट को बेहतर तरीके से दिखा सकता है:

सबग्रिड बनाना

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

अगर आपको सबग्रिड के बारे में खास जानकारी चाहिए, तो इसके बारे में यहां ज़्यादा जानें.

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

सीएसएस के तरीके से नेस्ट करना

सीएसएस नेस्टिंग की सुविधा, साल 2023 में सभी मुख्य ब्राउज़र में उपलब्ध हो गई. मैंने अपनी वेबसाइट को भी अपडेट किया है, ताकि नेस्टिंग को कंपाइल करने वाली बिल्ड प्रोसेस को हटाया जा सके. अब मैं छोटी स्टाइलशीट शिप करता/करती हूं! हां, नेस्टिंग वाली स्टाइलशीट छोटी होती हैं और सभी ब्राउज़र डेवलपर टूल, इसे दिखाने के लिए तैयार हैं.

सभी जानकारी के लिए, सीएसएस नेस्टिंग सिंटैक्स के बारे में यहां खास जानकारी देखें. यहां दिए गए कोड के उदाहरण में, सिंटैक्स का उदाहरण दिखाया गया है.

.you {
  .can-totally-ship-this {
    &.if-you-wanted {
      /* it's VERY MUCH like SCSS */
      
      &:is(:hover, :focus-visible) {
        /* put a bird on it */
      }
    }
  }
}

.for-theming {
  @media (prefers-color-scheme: dark) {
    /* you can nest media queries */
  }
}

/* or for theming with [data-theme="dark"] */
.button {
  background: black;
  color: white;

  /* nest and do more than just append, flip it and reverse it */
  [data-theme="dark"] & {
    background: white;
    color: black;
  }
}

ब्राउज़र को हेडलाइन बैलेंस करने की अनुमति दें

text-wrap: balance के बिना, डेवलपर और कॉपी राइटर को लाइन ब्रेक के लिए, <wbr> एलिमेंट या ­ जैसे हिंट का इस्तेमाल करना पड़ता है. ज़्यादातर मामलों में, यह तरीका काम नहीं करता. ऐसा इसलिए, क्योंकि कॉन्टेंट का अनुवाद होने, ज़ूम होने या उसमें किसी भी तरह का बदलाव होने के बाद, इस बात की कोई गारंटी नहीं होती कि रैपिंग के सुझाव, कॉन्टेंट के नए वर्शन के लिए सही जगह पर होंगे.

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

कंटेनर क्वेरी यूनिट का इस्तेमाल करना

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

छह नई cंटेनर q्वेरी यूनिट उपलब्ध हैं:

1. इनलाइन वैरिएंट cqi.
2. चौड़ाई का वैरिएंट cqw.
3. ब्लॉक वैरिएंट cqb.
4. ऊंचाई का वैरिएंट cqh.
5. जिसकी लंबाई कम है उसके लिए वैरिएंट cqmin.
6. जिसकी लंबाई ज़्यादा है उसके लिए वैरिएंट cqmax.

किसी कंटेनर के लिए, रिलेटिव और इंट्रिंसिक ऐनिमेशन का उदाहरण देखें. यह चाइल्ड एलिमेंट, 100cqi का इस्तेमाल करके अपने कंटेनर से पूरी तरह से स्लाइड आउट हो जाता है. यह कंटेनर के इनलाइन साइज़ का 100% होता है.

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

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

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}

अगर ये यूनिट आपके लिए नई हैं, तो हमारा सुझाव है कि आप साल 2024 में उपलब्ध सभी यूनिट की समीक्षा करें.