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 में आपके लिए उपलब्ध सभी यूनिट की समीक्षा करें.