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

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

Adam Argyle

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

यह पोस्ट, पिछले साल के उन छह सीएसएस स्निपेट के बारे में है जिनके बारे में हर फ़्रंट-एंड डेवलपर को साल 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 में कंटेनर क्वेरी यूनिट के बारे में एक बेहतरीन लेख लिखा था.

छह नई कंटेनर क्वेरी यूनिट हैं:

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