अपने कंपोनेंट्स को व्यूपोर्ट के बजाय उनके कंटेनर के प्रति उत्तरदायी बनाएँ, और नेटिव नेस्टिंग के साथ अपनी स्टाइलशीट्स को संरचित करें।
इस पाठ को Kodokon में खोलेंमीडिया क्वेरी व्यूपोर्ट को मापती है: एक कार्ड जो एक संकरी साइडबार और एक मुख्य ग्रिड दोनों में प्रदर्शित होता है, उनके साथ सही ढंग से अनुकूलित नहीं हो सकता, क्योंकि वही स्क्रीन चौड़ाई दो अलग-अलग संदर्भों से मेल खाती है। कंटेनर क्वेरी इस विघटन को हल करती है: कंपोनेंट अपने कंटेनर के आकार की क्वेरी करता है। पूर्वापेक्षा: container-type के साथ एक कंटेनर को स्पष्ट रूप से नामित करें (inline-size केवल क्षैतिज अक्ष को मापने के लिए, सामान्य मामला), वैकल्पिक रूप से container-name के ज़रिए नामित।
.sidebar {
container-type: inline-size;
container-name: sidebar;
}
@container sidebar (min-width: 400px) {
.widget {
display: grid;
grid-template-columns: 80px 1fr;
gap: 12px;
}
}कंटेनर इकाइयाँ तस्वीर को पूरा करती हैं: 1cqi क्वेरी किए गए कंटेनर के इनलाइन आकार के 1% के बराबर होता है (cqw, cqh, cqb, cqmin, cqmax भी मौजूद हैं)। clamp() के साथ संयुक्त होकर, वे प्रति कंपोनेंट द्रव टाइपोग्राफ़ी उत्पन्न करती हैं: वही कार्ड अपने कॉलम के अनुपात में शीर्षक पाता है, चाहे वह कहीं भी रखा गया हो।
.card-slot {
container-type: inline-size;
}
.card h2 {
font-size: clamp(1rem, 5cqi, 1.75rem);
}
@container (max-width: 300px) {
.card .meta {
display: none;
}
}नेटिव नेस्टिंग अंततः बिना किसी प्रीप्रोसेसर के नेस्टिंग लाती है। & सेलेक्टर पैरेंट संदर्भ को संदर्भित करता है; मीडिया क्वेरी और @container सीधे किसी नियम के भीतर नेस्ट होते हैं। Sass से एक महत्वपूर्ण अंतर: नेस्टेड पैरेंट को ऐसे माना जाता है मानो :is() में लपेटा गया हो। दो परिणाम: पैरेंट की विशिष्टता उसके सेलेक्टरों में से सबसे मज़बूत की होती है यदि वह एक सूची है, और & .child कोई स्ट्रिंग संयोजन नहीं करता - BEM नाम उत्पन्न करने के लिए Sass का &__element पैटर्न नेटिव रूप से मौजूद नहीं है।
.menu {
display: flex;
gap: 8px;
& > li {
list-style: none;
&:hover {
background: #f3f4f6;
}
}
@media (min-width: 768px) {
gap: 16px;
}
}5cqi किसके अनुरूप है?