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. स्नैप स्क्रोल करें

अच्छे से व्यवस्थित स्क्रोल अनुभव आपके अनुभव को बाकी से अलग बनाते हैं, और स्क्रोल करें स्नैप सबसे यह सिस्टम स्क्रोल UX को मैच करने का शानदार तरीका है. साथ ही, यह आपको रुकने की बेहतरीन सुविधा भी देता है अंक.

.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 डेमो का कोडपेन कलेक्शन.

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 का इस्तेमाल करके वैरिएंट कंट्रोल करें

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

/* 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

सोर्स