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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 105
• 105
• 110
• 16

सोर्स

container

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 105
• 105
• 110
• 16

सोर्स

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 69
• 79
• 99
• 11

सोर्स

scroll-snap-align

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 69
• 79
• 68
• 11

सोर्स

scroll-snap-stop

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 75
• 79
• 103
• 15

सोर्स

overscroll-behavior

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 63
• 18
• 59
• 16

सोर्स

3. ग्रिड में पिल

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

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

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

grid

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 57
• 16
• 52
• 10.1

सोर्स

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

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

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

aspect-ratio

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 88
• 88
• 89
• 15

सोर्स

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

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

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

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

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

@layer

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 99
• 99
• 97
• 15.4

सोर्स

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 87
• 87
• 66
• 14.1

सोर्स

margin-block

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 87
• 87
• 66
• 14.1

सोर्स

inset-inline

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 87
• 87
• 63
• 14.1

सोर्स