इस पेज का अनुवाद Cloud Translation API से किया गया है.

6 सीएसएस स्निपेट, जिनके बारे में हर फ़्रंट-एंड डेवलपर को साल 2023 में पता होना चाहिए
bookmark_border संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

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

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

Source

container

Browser Support

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

Source

scroll-snap-align

Browser Support

Source

scroll-snap-stop

Browser Support

Source

overscroll-behavior

Browser Support

Source

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

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

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

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

grid

Browser Support

Source

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

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

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

aspect-ratio

Browser Support

Source

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

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

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

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

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

@layer

Browser Support

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

Source

margin-block

Browser Support

Source

inset-inline

Browser Support

Source