टूलबेल्ट के लायक, बेहतरीन, और स्टेबल सीएसएस, जिसका इस्तेमाल आज किया जा सकता है.
मेरा मानना है कि हर फ़्रंट-एंड डेवलपर को कंटेनर क्वेरी का इस्तेमाल करना, स्क्रोल स्नैप अनुभव बनाना, ग्रिड के साथ position: absolute
से बचना, तेज़ी से सर्कल बनाना, कैस्केड लेयर का इस्तेमाल करना, और लॉजिकल प्रॉपर्टी की मदद से कम से कम चीज़ों का इस्तेमाल करके ज़्यादा काम करना चाहिए. यहां इन सभी शर्तों के बारे में खास जानकारी दी गई है.
1. कंटेनर क्वेरी
सीएसएस की यह सुविधा, पिछले 10 साल से सबसे ज़्यादा मांगी जा रही थी. अब यह सभी ब्राउज़र पर काम करती है. साथ ही, साल 2023 में, चौड़ाई की क्वेरी के लिए इसका इस्तेमाल किया जा सकता है.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
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
scroll-snap-align
scroll-snap-stop
overscroll-behavior
3. ग्रिड में ढेर की गई फ़ोटो
एक सेल वाले सीएसएस ग्रिड के साथ, पोज़िशन को एब्सोल्यूट सेट करने से बचें. जब वे एक-दूसरे के ऊपर इकट्ठा हो जाएं, तो उन्हें सही जगह पर रखने के लिए, जस्टिफ़ाई और अलाइन प्रॉपर्टी का इस्तेमाल करें.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid
4. क्विक सर्कल
सीएसएस में सर्कल बनाने के कई तरीके हैं, लेकिन यह सबसे कम शब्दों वाला तरीका है.
.circle { inline-size: 25ch; aspect-ratio: 1; border-radius: 50%; }
aspect-ratio
5. @layer की मदद से वैरिएंट कंट्रोल करना
कैस्केड लेयर की मदद से, बाद में खोजे गए या बनाए गए वैरिएंट को कैस्केड में सही जगह पर डाला जा सकता है. इसके लिए, वैरिएंट के ओरिजनल सेट का इस्तेमाल किया जाता है.
/* file buttons.css */ @layer components.buttons { .btn.primary { … } }
इसके बाद, किसी दूसरी फ़ाइल में, बटन लेयर में एक नया वैरिएंट जोड़ें. ऐसा किसी भी समय किया जा सकता है. ऐसा लगेगा कि यह वैरिएंट इस पूरी अवधि में बाकी वैरिएंट के साथ मौजूद था.
/* file video-player.css */ @layer components.buttons { .btn.player-icon { … } }
@layer
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; }