मेरे पास एक बड़ी सीएसएस फ़ाइल है, और मैं मीडिया प्रश्नों का उपयोग करके विशेष मामलों के लिए अन्य सीएसएस फाइलों को शामिल करना चाहता हूं।क्या एक सीएसएस फ़ाइल को किसी अन्य सीएसएस फ़ाइल में मीडिया क्वेरी के साथ शामिल करना संभव है?
इसे सुरक्षित इस तरह सीएसएस में @import उपयोग करने के लिए है:
@media only screen and (max-width: 480px) {
@import url('/css/styles-480.css');
}
, मैं सुझाव है कि आप समानांतर में सीएसएस फ़ाइल डाउनलोड यदि यह आवश्यक है:
<link media="only screen and (max-width: 480px)"
href="/css/styles-480.css" type="text/css" rel="stylesheet" />
समस्या @import उपयोग करने के साथ कि दूसरी फ़ाइल में केवल के बाद डाउनलोड किया जाता है है @import युक्त सीएसएस फ़ाइल पूरी तरह से डाउनलोड और पार्स किया गया है। भले ही आप अपने सभी नियमों या अपने कुछ नियमों को ओवरराइड कर रहे हों, यह दृष्टिकोण तेज़ है, क्योंकि यह अनुक्रमिक रूप से फ़ाइलों को लोड नहीं करता है।
यह निर्भर करता है - यदि स्टाइलशीट जहां '@ import' में अन्य शैलियों को शामिल किया गया है जिसे OP को किसी भी तरह लोड करने की आवश्यकता है, तो उस स्टाइलशीट से '@ import' को आगे बढ़ाना कोई फर्क नहीं पड़ता। – BoltClock
@ बोल्टक्लॉक ट्रू, मैं मान रहा था कि ओपी 'वर्तमान में –
@ बोल्टक्लॉक के साथ सभी मौजूदा नियमों को ओवरराइड कर रहा था, यह सच नहीं है। मेरा दृष्टिकोण तेजी से परवाह किए बिना है, क्योंकि '@ import' केवल सीएसएस फ़ाइल को पूरी तरह से डाउनलोड और पार्स किया गया है। इसका मतलब है कि फ़ाइलों क्रमशः लोड लोड। –
यह एक @media नियम के भीतर एक @import के लिए मान्य नहीं है, तो आपके पास क्या है काम नहीं करेगा।
ऐसा करने का सही तरीका भी सरल है - @import ही URL के बाद एक मीडिया क्वेरी स्वीकार करता है:
@import url('/css/styles-480.css') only screen and (max-width: 480px);
इस वाक्य रचना, introduced in CSS2.1 for use with media types है, लेकिन media queries will also work बाद से वे मीडिया प्रकार से एक सीधा विस्तार कर रहे हैं।
याद रखें कि @import नियम केवल स्टाइलशीट की शुरुआत में ही मौजूद हो सकते हैं।
आप लोड करने के निष्पादन के बारे में चिंतित हैं, तो आप अपने पृष्ठ के सिर में एक अलग <link> तत्व का उपयोग करने के लिए इस स्टाइलशीट के बजाय एक @import, as shown by Asad का उल्लेख कर सकते हैं। हालांकि, किसी भी तरह से ठीक काम करेगा।
ठीक है। बहुत धन्यवाद। – Wilson
आम तौर पर @import का उपयोग ब्राउज़र प्रदर्शन को धीमा कर रहा है। [यह संबंधित प्रश्न] देखें (http://stackoverflow.com/questions/6912899/css-import-best-practices)। वेब अनुकूलन में एक मूल नियम अनुरोधों की संख्या को कम करने के लिए है, विशेष रूप से अनुक्रमिक अनुरोध। –