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