कुछ आधुनिक सीएसएस जादू के साथ डेव रूपर्ट जो उन क्लासिक पहेली में से एक से निपटता है: क्या होता है जब घटक के लिए सीएसएस उस सामग्री को संभालने में असमर्थ होता है जिसे हम फेंकते हैं?
विशिष्ट स्थिति तब होती है जब एक लेआउट ग्रिड समान संख्या में आइटम की अपेक्षा करता है, लेकिन इसके बजाय एक विषम संख्या के साथ आपूर्ति की जाती है। हम अंत में एक "लटकने" तत्व के साथ रह गए हैं जो लेआउट को फेंक देता है। ऐसा लगता है कि जिस चीज की जरूरत है वह है कुछ रक्षात्मक सीएसएस और डेव इसे पूरा करता है।
वह के लिए पहुँचता है :has() एक निफ्टी चयनकर्ता लिखने के लिए जो एक ग्रिड में अंतिम आइटम को सूंघता है जिसमें विषम संख्या में आइटम होते हैं:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }इसे तोड़ना:
- हमारे पास का एक मूल कंटेनर है
.items. - यदि कंटेनर
:has()an.itemबच्चा जो अपने प्रकार का अंतिम है, - …और कि
.itemएक विषम संख्या वाला उदाहरण होता है, - ...फिर पहले का चयन करें
.itemउस प्रकार का तत्व और इसे स्टाइल करें!
इस मामले में, वह आखिरी .item लेआउट में छेद को रोकने के लिए पूर्ण-चौड़ाई पर जाने के लिए सेट किया जा सकता है।
यदि… तो… CSS में सशर्त तर्क शक्तियाँ हैं! हम इस समय केवल Safari TP और Edge/Chrome कैनरी के समर्थन के बारे में बात कर रहे हैं, लेकिन यह बहुत बढ़िया है।
जैसा कि मौका है, तेमानी अफिफ ने हाल ही में सीखी गई तरकीबें साझा कीं निहित ग्रिड के साथ प्रयोग. CSS ग्रिड के ऑटो-प्लेसमेंट एल्गोरिथम का लाभ उठाकर, हमें ग्रिड के लिए निश्चित संख्या में कॉलम और पंक्तियों की स्पष्ट रूप से घोषणा करने की भी आवश्यकता नहीं है - यदि आवश्यक हो तो CSS उन्हें हमारे लिए बनाएगा!
नहीं, तेमानी की तकनीकें डेव की "खतरे" की दुविधा का वैकल्पिक समाधान नहीं हैं। लेकिन डेव के रक्षात्मक सीएसएस उपयोग के साथ दोहराए जाने योग्य ग्रिड लेआउट पैटर्न के लिए टेमानी के दृष्टिकोण को जोड़ना :has(), हमें एक बहुत शक्तिशाली और जटिल दिखने वाला ग्रिड मिलता है जो हल्का है और संतुलित, दोहराने योग्य पैटर्न को बनाए रखते हुए किसी भी संख्या में वस्तुओं को संभालने में सक्षम है।
