Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

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;
}

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

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. क्विक सर्कल

CSS में सर्कल बनाने के कई तरीके हैं, लेकिन यह सबसे आसान तरीका है.

.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