विभिन्न साइटों में उनके बाहरी शामिल हैं व्यापक शैली पत्रक अलग-अलग तरीकों से—या तो @import दृष्टिकोण का उपयोग करके या उस CSS फ़ाइल से लिंक करके। CSS के लिए @import और लिंक में क्या अंतर है, और आपने कैसे तय किया कि कौन सा आपके लिए बेहतर है?
@import और Link. के बीच का अंतर
अपने वेब पेजों पर बाहरी स्टाइल शीट को शामिल करने का पहला तरीका लिंक करना है। इसका उद्देश्य आपके पेज को आपकी स्टाइल शीट से जोड़ना है। यह आपके सिर में जोड़ा जाता है एचटीएमएल दस्तावेज़.
आयात करने से आप एक स्टाइल शीट को दूसरे में आयात कर सकते हैं। यह लिंक परिदृश्य से थोड़ा अलग है क्योंकि आप लिंक की गई स्टाइल शीट के अंदर स्टाइल शीट आयात कर सकते हैं।
मानकों के दृष्टिकोण से, बाहरी स्टाइल शीट से लिंक करने या इसे आयात करने में कोई अंतर नहीं है। कोई भी तरीका सही है और ज्यादातर मामलों में कोई भी तरीका समान रूप से अच्छा काम करेगा। हालाँकि, कुछ कारण हैं जिन्हें आप एक के बाद एक उपयोग करना चाह सकते हैं।
@import का उपयोग क्यों करें?
कई साल पहले, इसके बजाय (या साथ में) @import का उपयोग करने के लिए सबसे आम कारण दिया गया था क्योंकि पुराने ब्राउज़र @import को नहीं पहचानते थे, इसलिए आप उनसे शैलियों को छिपा सकते थे। अपनी स्टाइल शीट आयात करके, आप अनिवार्य रूप से उन्हें अधिक आधुनिक, मानक-अनुपालन ब्राउज़रों के लिए उपलब्ध करा रहे होंगे, जबकि उन्हें "छिपा" करेंगे
पुराने ब्राउज़र संस्करण.@import विधि के लिए एक अन्य उपयोग एक पृष्ठ पर एकाधिक स्टाइल शीट का उपयोग करना है, जबकि आपके दस्तावेज़ के शीर्ष में केवल एक लिंक शामिल करना है। उदाहरण के लिए, एक निगम के पास साइट पर प्रत्येक पृष्ठ के लिए एक वैश्विक स्टाइल शीट हो सकती है, जिसमें उप-अनुभागों में अतिरिक्त शैलियाँ होती हैं जो केवल उस उप-अनुभाग पर लागू होती हैं। उप-अनुभाग शैली पत्रक से लिंक करके और उस शैली के शीर्ष पर वैश्विक शैलियों को आयात करके शीट, आपको साइट और प्रत्येक के लिए सभी शैलियों के साथ एक विशाल स्टाइल शीट बनाए रखने की आवश्यकता नहीं है उप खंड। केवल आवश्यकता यह है कि कोई भी @import नियम आपके बाकी स्टाइल नियमों से पहले आने चाहिए। विरासत अभी भी एक समस्या हो सकती है।
लिंक का उपयोग क्यों करें?
लिंक्ड स्टाइल शीट का उपयोग करने का नंबर 1 कारण आपके ग्राहकों के लिए वैकल्पिक स्टाइल शीट प्रदान करना है। फ़ायरफ़ॉक्स, सफारी और ओपेरा जैसे ब्राउज़र rel="alternate स्टाइलशीट" विशेषता का समर्थन करते हैं और जब कोई उपलब्ध होता है तो दर्शकों को उनके बीच स्विच करने की अनुमति मिलती है। आप IE में स्टाइल शीट के बीच स्विच करने के लिए JavaScript स्विचर का भी उपयोग कर सकते हैं—अक्सर इसके साथ प्रयोग किया जाता है ज़ूम लेआउट अभिगम्यता उद्देश्यों के लिए।
@import का उपयोग करने में एक कमी यह है कि यदि आपके पास केवल @import नियम के साथ एक बहुत ही सरल शीर्ष है, तो आपके पृष्ठ लोड होने पर "अनस्टाइल सामग्री का फ्लैश" प्रदर्शित कर सकते हैं। इसका एक सरल समाधान यह सुनिश्चित करना है कि आपके दिमाग में कम से कम एक अतिरिक्त लिंक या स्क्रिप्ट तत्व है।
मीडिया प्रकार के बारे में क्या?
कई लेखक दावा करते हैं कि आप पुराने ब्राउज़र से स्टाइल शीट छिपाने के लिए मीडिया प्रकार का उपयोग कर सकते हैं। अक्सर, वे इस विचार का उल्लेख या तो @import का उपयोग करने के लाभ के रूप में करते हैं या, लेकिन आप मीडिया सेट कर सकते हैं किसी भी तरीके से टाइप करें, और पुराने ब्राउज़र जो मीडिया प्रकारों का समर्थन नहीं करते हैं, उन्हें दोनों में से कोई भी नहीं देखेगा मामला।
तो आपको किस तरीके का इस्तेमाल करना चाहिए?
अधिकांश डेवलपर आज लिंक का उपयोग करते हैं और फिर स्टाइल शीट को बाहरी स्टाइल शीट में आयात करते हैं। इस तरह, आपके पास अपने HTML दस्तावेज़ों में समायोजित करने के लिए कोड की केवल एक या दो पंक्तियाँ हैं। लेकिन लब्बोलुआब यह है कि यह आप पर निर्भर है। यदि आप @import के साथ अधिक सहज हैं, तो इसके लिए जाएं! दोनों विधियां मानकों के अनुरूप हैं और जब तक आप वास्तव में पुराने ब्राउज़र का समर्थन करने की योजना नहीं बना रहे हैं, तब तक इसका उपयोग करने का कोई मजबूत कारण नहीं है।