आंतरिक डिज़ाइन: सामग्री-आधारित आकार निर्धारण

जेन सिमन्स द्वारा गढ़े गए अंतर्निहित डिज़ाइन का अर्थ है कि सामग्री को अपना आकार स्वयं तय करने देना, न कि उस पर पिक्सेल में स्पष्ट आयाम थोपना। CSS में अंतर्निहित आकार-निर्धारण के कीवर्ड उपलब्ध हैं, जो विराम-बिंदु आधारित बदलावों के बिना लेआउट को स्वाभाविक रूप से अनुकूल बनाते हैं।

min-content: अतिप्रवाह के बिना सामग्री को समेटने वाला सबसे छोटा आकार (पाठ के लिए हर शब्द-सीमा पर पंक्ति टूटती है)। max-content: पंक्ति-विभाजन के बिना सामग्री को एक ही पंक्ति में दिखाने के लिए आवश्यक आकार। दोनों वास्तविक सामग्री के आयाम दर्शाते हैं।

fit-content, min(max-content, max(min-content, available)) के समतुल्य है। यह उपलब्ध स्थान तक सामग्री के साथ बढ़ता है और फिर पंक्ति-विभाजन करता है। यह उन बटन और लेबल के लिए आदर्श है जिन्हें अपने पाठ जितना चौड़ा होना चाहिए, लेकिन अपने कंटेनर से अधिक चौड़ा नहीं।

ग्रिड में minmax(min, max) किसी ट्रैक का न्यूनतम और अधिकतम आकार तय करता है। minmax(200px, 1fr) ऐसा कॉलम बनाता है जो कम-से-कम 200px का हो, लेकिन बढ़ भी सके। इसे auto-fill के साथ मिलाने पर स्वाभाविक रूप से अनुकूल ग्रिड बनते हैं।

दोनों पंक्ति में यथासंभव अधिकतम ट्रैक भरते हैं। auto-fill खाली ट्रैक बनाए रखता है (कॉलम की संख्या सुरक्षित रखता है)। auto-fit खाली ट्रैक समेट देता है, ताकि भरे हुए ट्रैक स्थान भरने के लिए फैल सकें। सामग्री-आधारित लेआउट में उपलब्ध चौड़ाई भरने के लिए auto-fit का उपयोग करें।

clamp(min, preferred, max) किसी मान को निर्धारित सीमाओं के बीच सीमित करता है। font-size: clamp(1rem, 2.5vw, 1.5rem) व्यूपोर्ट की चौड़ाई के आधार पर 1rem और 1.5rem के बीच बदलता है — मीडिया क्वेरी के बिना प्रवाही टाइपोग्राफी।

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) ऐसा अनुकूल ग्रिड बनाता है जो बहुत संकरे व्यूपोर्ट पर एक ही कॉलम का होता है और स्थान उपलब्ध होने पर अपने-आप कॉलम जोड़ता है। न मीडिया क्वेरी, न JavaScript।

aspect-ratio: 16/9 किसी तत्व की चौड़ाई बदलने पर भी उसके अनुपात बनाए रखता है। इसे width: 100% के साथ मिलाने पर वीडियो कंटेनर अपने पैरेंट को भरता है और JavaScript या प्रतिशत-आधारित पैडिंग की तरकीबों के बिना हमेशा 16:9 अनुपात बनाए रखता है।

अंतर्निहित डिज़ाइन CSS के तार्किक गुणों (inline-size, block-size, margin-inline) के साथ मिलकर ऐसे लेआउट बनाता है जो क्षैतिज और ऊर्ध्वाधर, दोनों लेखन-मोड में काम करते हैं। अंतर्निहित आकार-निर्धारण लेखन दिशा के अनुसार अपने-आप अनुकूल हो जाता है।

स्थिर: width: 300px — सामग्री चाहे जैसी हो, हमेशा 300px। अंतर्निहित: width: fit-content — सीमाओं के भीतर सामग्री जितना चौड़ा। स्थिर लेआउट में बदलाव के लिए विराम-बिंदु आवश्यक होते हैं; अंतर्निहित लेआउट अपनी सामग्री और संदर्भ के आधार पर स्वयं समायोजित होते हैं।

अंतर्निहित डिज़ाइन तब सबसे अधिक प्रभावी होता है जब सामग्री का आकार स्वाभाविक रूप से बदलता रहता है। जहाँ सामग्री ज्ञात और एकसमान हो, वहाँ अंतर्निहित आकार-निर्धारण थोपने से बिना लाभ के जटिलता बढ़ती है। स्थिर उपयोगकर्ता-इंटरफ़ेस ढाँचे (नेविगेशन, टूलबार) के लिए स्पष्ट आकारों का उपयोग करें; सामग्री क्षेत्रों के लिए अंतर्निहित आकार-निर्धारण अपनाएँ।

अंतर्निहित डिज़ाइन CSS के आकार-निर्धारण कीवर्ड (min-content, max-content, fit-content), auto-fit के साथ minmax(), प्रवाही माप के लिए clamp() और aspect-ratio का उपयोग करता है, ताकि लेआउट व्यूपोर्ट के विराम-बिंदुओं के बजाय सामग्री के आयामों से संचालित हों। इसका परिणाम कम CSS और कम मीडिया क्वेरी वाला स्वाभाविक रूप से अनुकूल लेआउट है।