टूलबेल्ट योग्य, सशक्त और स्थायी CSS जिसका आज आप उपयोग कर सकते हैं.
मेरा मानना है कि हर फ़्रंट-एंड डेवलपर को यह पता होना चाहिए कि :has(), "पैरंट सिलेक्टर" से कहीं ज़्यादा है,
subgrid कैसे और क्यों करें, बिल्ट-इन सीएसएस सिंटैक्स के साथ कैसे नेस्ट करें, ब्राउज़र बैलेंस
हेडलाइन टेक्स्ट को रैप करने का तरीका, और कंटेनर क्वेरी यूनिट का इस्तेमाल कैसे करें.
इस पोस्ट में, पिछले साल के ऐसे छह सीएसएस स्निपेट दिए गए हैं जिनके बारे में हर फ़्रंट-एंड डेवलपर को 2023 में पता होना चाहिए.
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
साल 2023 के आखिर में, :has() सभी मुख्य ब्राउज़र पर उपलब्ध हो गया! यह नया सिलेक्टर छोटा और आम नहीं लगता है, लेकिन इसके इस्तेमाल के सभी उदाहरणों को देखकर आपको हैरानी होगी:
गेम, रिऐक्टिविटी, कॉन्टेंट अवेयर लेआउट, स्मार्ट कॉम्पोनेंट वगैरह.
इनके बारे में जे के इस लेख में अच्छी तरह से बताया गया है.
पैरंट सिलेक्टर के तौर पर :has() का इस्तेमाल करने के कुछ उदाहरण यहां दिए गए हैं. इसे यह नाम इसलिए मिला है, क्योंकि
आम तौर पर सिलेक्टर का विषय आखिर में होता है. जैसे, ul li, जहां li सब्जेक्ट है और यह स्टाइल के बारे में बताता है. :has() का इस्तेमाल करने पर, सिलेक्टर की शुरुआत में मौजूद एलिमेंट विषय बन सकता है. नीचे दिए गए उदाहरण में, अगर .icon क्लास वाला कोई एलिमेंट है, तो बटन में गैप है. अगर अंदर कोई इमेज है, तो कार्ड का ओरिएंटेशन बदल जाता है.
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
एक लंबा सिलेक्टर, लेआउट को इस आधार पर बदलना है कि उसमें कितने आइटम हैं. अब :has() के साथ ऐसा किया जा सकता है, क्योंकि यह बच्चों की संख्या के बारे में क्वेरी करने के दौरान, कंटेनर को विषय के तौर पर रख सकता है.
main:has(> :nth-child(5)) {…}
इससे ऊंचे स्तर का एक और उदाहरण, पेज पर कोई खास चेकबॉक्स चालू होने पर पूरे दस्तावेज़ पर सेट की गई स्टाइल बदलें:
html:has(#dark-mode:checked) {…}
इस्तेमाल के इन आसान उदाहरणों से सिलेक्टर के विषय में कोई बदलाव नहीं होता. अगर आप इस तरह के उदाहरण देखें, तो आपको लग सकता है कि :has() को सिर्फ़ पैरंट सिलेक्टर बनाया जा सकता है. हालांकि, नीचे दिए गए उदाहरणों
पर ध्यान दें. ये एक सामान्य पूर्वज के आधार पर किसी चीज़ की जांच करते हैं, फिर सिलेक्टर के विषय को पेज में कहीं ज़्यादा गहराई वाले बच्चे पर ले जाते हैं.
अगर इसका कोई भी इनपुट अमान्य है, तो यह फ़ॉर्म गड़बड़ी के एलिमेंट को दिखाता है:
form:has(:user-invalid) .error {
display: block;
}
यह वीडियो उस सेक्शन के बारे में जानकारी देता है जहां किसी साइडनेव में .--is-open की क्लास होती है:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
यहां एक मज़ेदार डेमो दिया गया है. इसमें :has() को पैरंट सिलेक्टर के तौर पर, संख्या वाली क्वेरी के साथ :has(), और कंटेनर क्वेरी का इस्तेमाल करके ग्रिड लेआउट बनाया गया है, जिससे पोर्ट्रेट या लैंडस्केप ओरिएंटेशन में 1-12 एलिमेंट को शानदार तरीके से दिखाने के लिए, ग्रिड लेआउट बनाया जा सकता है:
सबग्रिड बनाना
subgrid
कई सालों तक फ़्रंट-एंड वेब समुदाय ने बड़े पैमाने पर लोकप्रिय और ताकतवर सीएसएस ग्रिड लेआउट इंजन को पूरा करने और उसे पूरा करने के लिए सबग्रिड की मदद मांगी थी. फ़िलहाल, यह तीनों मुख्य इंजन के लिए उपलब्ध है.
अगर आपको खास जानकारी चाहिए, तो सबग्रिड के बारे में यहां ज़्यादा जानें.
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
सीएसएस को नेस्ट करें
nesting
पहले से मौजूद सीएसएस नेस्टिंग की सुविधा, साल 2023 में सभी मुख्य ब्राउज़र में उपलब्ध हो गई थी. यहां तक कि मैंने बिल्ड प्रोसेस को हटाने के लिए अपनी वेबसाइट को भी अपडेट किया, जिससे नेस्ट किए गए प्रोजेक्ट को हटाया जा सके. अब एक छोटी स्टाइलशीट भेजी जाती है! हां, नेस्टिंग वाली स्टाइलशीट छोटी होती हैं और सभी ब्राउज़र डेवटूल उसे दिखाने के लिए तैयार होते हैं.
पूरी जानकारी के लिए, सीएसएस नेस्टिंग सिंटैक्स यहां की खास जानकारी देखें. यहां दिए गए कोड के उदाहरण में, सिंटैक्स का एक उदाहरण दिया गया है.
.you {
.can-totally-ship-this {
&.if-you-wanted {
/* it's VERY MUCH like SCSS */
&:is(:hover, :focus-visible) {
/* put a bird on it */
}
}
}
}
.for-theming {
@media (prefers-color-scheme: dark) {
/* you can nest media queries */
}
}
/* or for theming with [data-theme="dark"] */
.button {
background: black;
color: white;
/* nest and do more than just append, flip it and reverse it */
[data-theme="dark"] & {
background: white;
color: black;
}
}
ब्राउज़र को हेडलाइन के बीच संतुलन बनाने दें
balance
pretty
text-wrap: balance के बिना, डेवलपर और कॉपी राइटर को लाइन ब्रेक हिंट
जैसे कि <wbr> एलिमेंट या ­ पर छोड़ दिया जाता है. यह ज़्यादातर हारने वाला अनुभव होता है, क्योंकि कॉन्टेंट का अनुवाद होने, उसे ज़ूम करने या उसमें किसी भी तरह का बदलाव किए जाने के बाद, इस बात की कोई गारंटी नहीं होती कि कॉन्टेंट को नए प्रज़ेंटेशन के लिए सही जगह पर दिखाया जाएगा.
संतुलित टेक्स्ट रैपिंग के साथ, आप इस काम को ब्राउज़र पर छोड़ सकते हैं. नीचे दिए गए कोडपेन में तुलना देखी जा सकती है.
कंटेनर क्वेरी यूनिट का इस्तेमाल करें
cqw
पिछले साल की एक पोस्ट में बताया गया था कि हर फ़्रंट-एंड डेवलपर को कंटेनर क्वेरी लिखने का तरीका जानना चाहिए. अगर आप अभी तक नहीं सीखे हैं, तो साल 2024 को कदम उठाने का आनंद लें. साथ ही, कंटेनर क्वेरी यूनिट भी देखें. खास जानकारी के तौर पर, अहमद शेदीद ने 2021 में कंटेनर क्वेरी यूनिट के बारे में एक शानदार लेख लिखा.
मुहैया कराने के लिए, छह नई कॉटेंटर क्यूरी यूनिट उपलब्ध हैं:
- इनलाइन वैरिएंट
cqi. - चौड़ाई वाला वैरिएंट
cqw. - ब्लॉक वैरिएंट
cqb. - ऊंचाई का वैरिएंट
cqh. cqminकी जो भी लंबाई कम हो उसका वैरिएंट.cqmaxकी जो भी लंबाई हो, उसका वैरिएंट.
किसी कंटेनर से मिलते-जुलते और स्वाभाविक ऐनिमेशन बनाने के लिए एक स्थिति मानें. ऐसा चाइल्ड एलिमेंट जो 100cqi का इस्तेमाल करके कंटेनर के कंटेनर से पूरी तरह बाहर आ जाता है. यह कंटेनर के इनलाइन साइज़ का 100% है.
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
यहां कंटेनर रिस्पॉन्सिव टाइपोग्राफ़ी वाला एक कार्ड दिया गया है. साथ ही, एक इमेज दी गई है, जो कंटेनर के ओरिएंटेशन के हिसाब से अडजस्ट होती है. अगर ओरिएंटेशन लैंडस्केप है, तो उसका साइज़ आधा हो जाता है.
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
अगर ये यूनिट हाल ही में आपके लिए उपलब्ध हैं, तो 2024 में आपके लिए उपलब्ध सभी यूनिट की समीक्षा करें.