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

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

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

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

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

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

यहां :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 में सभी मुख्य ब्राउज़र में उपलब्ध हो गई थी. मैंने अपनी वेबसाइट को उस बिल्ड प्रोसेस को हटाने के लिए भी अपडेट किया है जो नेस्टिंग को कंपाइल किया था. अब मुझे एक छोटी स्टाइलशीट! हां, नेस्टिंग वाली स्टाइलशीट छोटी होती हैं और सभी ब्राउज़र DevTools इसे दिखाने के लिए तैयार हैं.

सीएसएस नेस्टिंग सिंटैक्स यहां पर जाकर, खास जानकारी देखी जा सकती है, देखें. नीचे दिए गए कोड का उदाहरण, एक सिंटैक्स का उदाहरण है.

.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> एलिमेंट या ­. आम तौर पर, यह लड़ाई हारने का होता है, क्योंकि जैसे ही का अनुवाद किया गया है, उन्हें ज़ूम किया गया है या उनमें किसी भी तरह से बदलाव किया गया है, तो इस बात की कोई गारंटी नहीं है कि रैपिंग संकेत, कॉन्टेंट के नए प्रज़ेंटेशन के लिए सही जगह पर दिखेंगे.

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

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

पिछले साल की पोस्ट में सुझाव दिया गया था कि हर फ़्रंट-एंड डेवलपर को ईमेल लिखने का तरीका पता होना चाहिए कंटेनर क्वेरी के लिए डिज़ाइन किया गया है. अगर आपने अभी तक कुछ भी नहीं सीखा है, तो साल 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 में आपके लिए उपलब्ध सभी यूनिट की समीक्षा करें.