RSI :has()
छद्म वर्ग है, हैंड्स-डाउन, मेरी पसंदीदा नई CSS सुविधा। मुझे पता है कि यह आप में से कई लोगों के लिए भी है, कम से कम आप में से जिन्होंने CSS सर्वेक्षण की स्थिति ली. चयनकर्ताओं को उल्टा लिखने की क्षमता हमें और अधिक महाशक्तियां देती है, जिनके बारे में मैंने कभी सोचा भी नहीं था।
मैं कहता हूं "अधिक महाशक्तियां" क्योंकि सुपर स्मार्ट लोगों के एक समूह द्वारा पहले से ही वास्तव में आश्चर्यजनक चतुर विचारों का एक टन प्रकाशित किया गया है, जैसे:
यह लेख एक निश्चित गाइड नहीं है :has()
. यह भी यहाँ नहीं है कि जो पहले ही कहा जा चुका है उसे फिर से दोहराएँ। यह सिर्फ मैं हूं (हाय 👋) कुछ ऐसे तरीकों को साझा करने के लिए एक पल के लिए बैंडबाजे पर कूद रहा हूं, जिनका उपयोग करने की सबसे अधिक संभावना है :has()
मेरे दिन-प्रतिदिन के काम में ... यानी, एक बार जब यह फ़ायरफ़ॉक्स द्वारा आधिकारिक रूप से समर्थित हो जाता है जो आसन्न है.
जब ऐसा होगा, तो आप शर्त लगा सकते हैं कि मैं इसका इस्तेमाल करना शुरू कर दूंगा :has()
सभी जगह। यहाँ उन चीजों के कुछ वास्तविक दुनिया के उदाहरण हैं जिन्हें मैंने हाल ही में बनाया है और अपने बारे में सोचा, "जी, यह एक बार बहुत अच्छा होगा :has()
पूर्ण समर्थन है।"
अपने JavaScript घटक से बाहर जाने से बचें
क्या आपने कभी ऐसा सहभागी घटक बनाया है जिसे कभी-कभी पृष्ठ पर कहीं और शैलियों को प्रभावित करने की आवश्यकता होती है? निम्नलिखित उदाहरण लें, जहाँ <nav>
एक मेगा मेनू, और इसे खोलने से इसका रंग बदल जाता है <header>
इसके ऊपर की सामग्री।
मुझे ऐसा लगता है कि मुझे इस तरह का काम करना चाहिए पुरे समय.
यह विशेष उदाहरण एक रिएक्ट घटक है जिसे मैंने एक साइट के लिए बनाया है। मुझे पृष्ठ के प्रतिक्रिया भाग के साथ "बाहर पहुंचना" था document.querySelector(...)
और पर एक वर्ग को टॉगल करें <body>
, <header>
, या अन्य घटक। यह दुनिया का अंत नहीं है, लेकिन यह निश्चित रूप से थोड़ा अजीब लगता है। यहां तक कि एक पूरी तरह से रिएक्ट साइट (एक नेक्स्ट.जेएस साइट, कहते हैं) में, मुझे प्रबंधन के बीच चयन करना होगा menuIsOpen
घटक वृक्ष के ऊपर बताएं, या समान DOM तत्व चयन करें - जो बहुत प्रतिक्रिया-वाई नहीं है।
- :has()
समस्या दूर हो जाती है:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
मेरे जावास्क्रिप्ट घटकों में DOM के अन्य भागों के साथ और अधिक नगण्य नहीं!
बेहतर टेबल स्ट्रिपिंग यूएक्स
अपनी टेबल में वैकल्पिक पंक्ति "स्ट्राइप्स" जोड़ना एक अच्छा UX सुधार हो सकता है। तालिका को स्कैन करते समय वे आपकी आंखों को ट्रैक करने में मदद करते हैं कि आप किस पंक्ति पर हैं।
लेकिन मेरे अनुभव में, यह सिर्फ दो या तीन पंक्तियों वाली तालिकाओं पर अच्छा काम नहीं करता है। यदि आपके पास, उदाहरण के लिए, तीन पंक्तियों वाली एक तालिका है <tbody>
और आप प्रत्येक "सम" पंक्ति को "स्ट्रिपिंग" कर रहे हैं, आप केवल एक स्ट्राइप के साथ समाप्त हो सकते हैं। यह वास्तव में एक पैटर्न के लायक नहीं है और हो सकता है कि उपयोगकर्ता सोच रहे हों कि उस एक हाइलाइट की गई पंक्ति के बारे में क्या खास है।
इस तकनीक का उपयोग जहां ब्रामस उपयोग करता है :has()
बच्चों की संख्या के आधार पर शैलियों को लागू करने के लिए, हम तीन पंक्तियों से अधिक होने पर टेबल स्ट्राइप्स लगा सकते हैं:
शौक़ीन क्या हो? आप ऐसा केवल तभी करने का निर्णय ले सकते हैं जब तालिका में कम से कम कुछ निश्चित संख्या में स्तंभ भी हों:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
टेम्प्लेट से सशर्त वर्ग तर्क निकालें
पृष्ठ पर क्या है इसके आधार पर मुझे अक्सर पृष्ठ लेआउट बदलने की आवश्यकता होती है। निम्नलिखित ग्रिड लेआउट लें, जहां मुख्य सामग्री की नियुक्ति ग्रिड क्षेत्रों को इस आधार पर बदलती है कि साइडबार मौजूद है या नहीं।
यह कुछ ऐसा है जो इस बात पर निर्भर हो सकता है कि सीएमएस में सिबलिंग पेज सेट हैं या नहीं। मैं सामान्य रूप से इसे सशर्त रूप से जोड़ने के लिए टेम्पलेट तर्क के साथ करूँगा बीईएम संशोधक वर्ग लेआउट रैपर के लिए दोनों लेआउट के लिए खाते में। वह CSS कुछ इस तरह दिख सकती है (उत्तरदायी नियम और संक्षिप्तता के लिए छोड़े गए अन्य सामान):
/* m = main content */
/* s = sidebar */
.standard-page--with-sidebar { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar { grid-template-areas: '. m m m m m m m m m . .';
}
सीएसएस-वार, यह बिल्कुल ठीक है। लेकिन यह टेम्प्लेट कोड को थोड़ा गड़बड़ कर देता है। आपकी टेम्प्लेटिंग भाषा के आधार पर सशर्त रूप से कक्षाओं का एक गुच्छा जोड़ना बहुत बदसूरत हो सकता है, खासकर यदि आपको बहुत सारे बाल तत्वों के साथ भी ऐसा करना है।
इसकी तुलना ए से करें :has()
आधारित दृष्टिकोण:
/* m = main content */
/* s = sidebar */
.standard-page:has(.sidebar) { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) { grid-template-areas: '. m m m m m m m m m . .';
}
ईमानदारी से, यह पूरी तरह से सीएसएस-वार बेहतर नहीं है। लेकिन अगर आप मुझसे पूछें तो HTML टेम्प्लेट से कंडीशनल मॉडिफायर क्लासेस को हटाना एक अच्छी जीत है।
के लिए माइक्रो डिज़ाइन निर्णयों के बारे में सोचना आसान है :has()
- एक कार्ड की तरह जब उसमें एक छवि होती है - लेकिन मुझे लगता है कि यह इन मैक्रो लेआउट परिवर्तनों के लिए भी वास्तव में उपयोगी होगा।
बेहतर विशिष्टता प्रबंधन
यदि आप पढ़ने मेरा आखिरी लेख, आपको पता चल जाएगा कि मैं विशिष्टता का समर्थक हूं। अगर, मेरी तरह, आप नहीं चाहते हैं कि जोड़ते समय आपके विशिष्टता स्कोर उड़ जाएं :has()
और :not()
अपनी पूरी शैलियों में, उपयोग करना सुनिश्चित करें :where()
.
ऐसा इसलिए है क्योंकि की विशिष्टता :has()
पर आधारित है इसकी तर्क सूची में सबसे विशिष्ट तत्व. इसलिए, यदि आपके पास वहां आईडी जैसा कुछ है, तो आपके चयनकर्ता को कैस्केड में ओवरराइड करना कठिन होगा।
दूसरी ओर, की विशिष्टता :where()
हमेशा शून्य होता है, विशिष्टता स्कोर में कभी न जोड़ें।
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
भविष्य उज्ज्वल है
ये केवल कुछ चीजें हैं जिनका मैं उत्पादन में उपयोग करने में सक्षम होने के लिए इंतजार नहीं कर सकता। CSS-Tricks पंचांग में उदाहरणों का एक समूह भी है। आप किसके साथ क्या करने के लिए उत्सुक हैं :has()
? आप किस तरह के कुछ वास्तविक दुनिया के उदाहरणों से रूबरू हुए हैं :has()
सही समाधान होता?
- एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
- प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
- स्रोत: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- क्षमता
- योग्य
- About
- ऊपर
- लेखा
- को प्रभावित
- सब
- पहले ही
- हमेशा
- अद्भुत
- और
- अन्य
- लागू करें
- दृष्टिकोण
- क्षेत्रों के बारे में जानकारी का उपयोग करके ट्रेडिंग कर सकते हैं।
- तर्क
- लेख
- आधारित
- क्योंकि
- शर्त
- बेहतर
- के बीच
- बिट
- आंधी
- बनाया गया
- गुच्छा
- पा सकते हैं
- कार्ड
- c
- कुछ
- परिवर्तन
- परिवर्तन
- बच्चा
- चुनें
- कक्षा
- कक्षाएं
- सीएमएस
- कोड
- स्तंभ
- अंग
- शामिल हैं
- सामग्री
- सका
- कोर्स
- सीएसएस
- निर्णय
- अंतिम
- निर्भर करता है
- डिज़ाइन
- नहीं करता है
- कर
- डोम
- dont
- नीचे
- तत्व
- विशेष रूप से
- आदि
- और भी
- कभी
- प्रत्येक
- उदाहरण
- उदाहरण
- अनुभव
- आंखें
- पसंदीदा
- Feature
- कुछ
- अंत
- Firefox
- निम्नलिखित
- आगे
- से
- पूरी तरह से
- मिल
- देता है
- चला जाता है
- जा
- महान
- ग्रिड
- ग्रिड-टेम्पलेट-क्षेत्र
- गाइड
- होना
- होने
- मदद
- यहाँ उत्पन्न करें
- hi
- उच्चतर
- हाइलाइट
- एचटीएमएल
- HTTPS
- मैं करता हूँ
- विचारों
- की छवि
- सुधार
- in
- इंटरैक्टिव
- IT
- जावास्क्रिप्ट
- सिर्फ एक
- रखना
- बच्चा
- जानना
- भाषा
- पिछली बार
- ख़ाका
- संभावित
- थोड़ा
- देखिए
- देख
- लॉट
- मैक्रो
- बनाया गया
- मुख्य
- बनाना
- प्रबंध
- बहुत
- हो सकता है
- पल
- अधिक
- अधिकांश
- मोज़िला
- आवश्यकता
- की जरूरत है
- नया
- अगला
- Next.js
- सामान्य रूप से
- संख्या
- आधिकारिक तौर पर
- ONE
- उद्घाटन
- अन्य
- बाहर
- भाग
- विशेष
- भागों
- पैटर्न
- स्टाफ़
- उत्तम
- जगह
- प्लेटो
- प्लेटो डेटा इंटेलिजेंस
- प्लेटोडाटा
- संभव
- वर्तमान
- सुंदर
- मुसीबत
- उत्पादन
- प्रकाशित
- पहुंच
- प्रतिक्रिया
- पढ़ना
- असली दुनिया
- हाल ही में
- हटाने
- उत्तरदायी
- आरओडब्ल्यू
- नियम
- रन
- कहा
- वही
- स्कैन
- चयन
- सेट
- Share
- साइट
- स्मार्ट
- So
- समाधान
- कुछ
- कुछ
- कहीं न कहीं
- विशेष
- विशिष्ट
- विशेषता
- प्रारंभ
- राज्य
- धारी
- धारियों
- अंदाज
- सुपर
- समर्थित
- तालिका
- लेना
- TD
- टेम्पलेट
- RSI
- राज्य
- दुनिया
- बात
- चीज़ें
- विचार
- तीन
- भर
- सेवा मेरे
- टन
- भी
- पूरी तरह से
- ट्रैक
- <strong>उद्देश्य</strong>
- उल्टा
- us
- उपयोग
- उपयोगकर्ताओं
- ux
- प्रतीक्षा
- तरीके
- क्या
- या
- कौन कौन से
- कौन
- जीतना
- सोच
- काम
- विश्व
- लायक
- होगा
- लिखना
- आप
- आपका
- जेफिरनेट