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

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

Adam Argyle

मेरा मानना है कि हर फ़्रंट-एंड डेवलपर को कंटेनर क्वेरी का इस्तेमाल करना, स्क्रोल स्नैप अनुभव बनाना, ग्रिड के साथ position: absolute से बचना, तेज़ी से सर्कल बनाना, कैस्केड लेयर का इस्तेमाल करना, और लॉजिकल प्रॉपर्टी की मदद से कम से कम चीज़ों का इस्तेमाल करके ज़्यादा काम करना चाहिए. यहां इन सभी शर्तों के बारे में खास जानकारी दी गई है.

1. कंटेनर क्वेरी

सीएसएस की यह सुविधा, पिछले 10 साल से सबसे ज़्यादा मांगी जा रही थी. अब यह सभी ब्राउज़र पर काम करती है. साथ ही, साल 2023 में, चौड़ाई की क्वेरी के लिए इसका इस्तेमाल किया जा सकता है.

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

@container

Browser Support

• 105
• 105
• 110
• 16

Source

container

Browser Support

• 105
• 105
• 110
• 16

Source

2. स्क्रोल स्नैप

अच्छी तरह से व्यवस्थित किए गए स्क्रोल अनुभव, आपके अनुभव को बाकी लोगों से अलग बनाते हैं. साथ ही, स्क्रोल स्नैप, सिस्टम स्क्रोल यूज़र एक्सपीरियंस (यूएक्स) को मैच करने का सबसे सही तरीका है. इससे, आपको स्क्रोल करने के लिए सही जगहें भी मिलती हैं.

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.snap-target {
  scroll-snap-align: center;
}

.snap-force-stop {
  scroll-snap-stop: always;
}

सीएसएस की इस सुविधा की क्षमता के बारे में ज़्यादा जानने के लिए, 25 डेमो वाले इस बड़े और बेहतरीन Codepen कलेक्शन को देखें.

scroll-snap-type

Browser Support

• 69
• 79
• 99
• 11

Source

scroll-snap-align

Browser Support

• 69
• 79
• 68
• 11

Source

scroll-snap-stop

Browser Support

• 75
• 79
• 103
• 15

Source

overscroll-behavior

Browser Support

• 63
• 18
• 59
• 16

Source

3. ग्रिड में ढेर की गई फ़ोटो

एक सेल वाले सीएसएस ग्रिड के साथ, पोज़िशन को एब्सोल्यूट सेट करने से बचें. जब वे एक-दूसरे के ऊपर इकट्ठा हो जाएं, तो उन्हें सही जगह पर रखने के लिए, जस्टिफ़ाई और अलाइन प्रॉपर्टी का इस्तेमाल करें.

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}

grid

Browser Support

• 57
• 16
• 52
• 10.1

Source

4. क्विक सर्कल

सीएसएस में सर्कल बनाने के कई तरीके हैं, लेकिन यह सबसे कम शब्दों वाला तरीका है.

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

aspect-ratio

Browser Support

• 88
• 88
• 89
• 15

Source

5. @layer की मदद से वैरिएंट कंट्रोल करना

कैस्केड लेयर की मदद से, बाद में खोजे गए या बनाए गए वैरिएंट को कैस्केड में सही जगह पर डाला जा सकता है. इसके लिए, वैरिएंट के ओरिजनल सेट का इस्तेमाल किया जाता है.

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

इसके बाद, किसी दूसरी फ़ाइल में, बटन लेयर में एक नया वैरिएंट जोड़ें. ऐसा किसी भी समय किया जा सकता है. ऐसा लगेगा कि यह वैरिएंट इस पूरी अवधि में बाकी वैरिएंट के साथ मौजूद था.

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}

@layer

Browser Support

• 99
• 99
• 97
• 15.4

Source

6. लॉजिकल प्रॉपर्टी का इस्तेमाल करके, कम याद रखें और ज़्यादा लोगों तक पहुंचें

इस नए बॉक्स मॉडल को याद रखें और फिर कभी लिखने के अंतरराष्ट्रीय तरीकों और दस्तावेज़ के निर्देशों के लिए, बाईं और दाईं ओर के पैडिंग या मार्जिन को बदलने के बारे में चिंता न करें. अपनी स्टाइल को फ़िज़िकल प्रॉपर्टी से लॉजिकल प्रॉपर्टी में बदलें. जैसे, padding-inline, margin-inline, inset-inline. इसके बाद, ब्राउज़र अपने-आप स्टाइल में बदलाव कर देगा.

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}

article > p {
  text-align: start;
  margin-block: 2ch;
}

.something::before {
  inset-inline: auto 0;
}

padding-inline

Browser Support

• 87
• 87
• 66
• 14.1

Source

margin-block

Browser Support

• 87
• 87
• 66
• 14.1

Source

inset-inline

Browser Support

• 87
• 87
• 63
• 14.1

Source