@import और सीएसएस के लिए लिंक के बीच क्या अंतर है?

यदि आपने वेब के चारों ओर एक नज़र डाली है और विभिन्न वेब पृष्ठों के कोड को देखा है, तो एक बात जो आपने देखी हो, वह यह है कि अलग-अलग साइटों में उनकी बाहरी सीएसएस फाइलें अलग-अलग तरीकों से शामिल होती हैं - या तो @import दृष्टिकोण का उपयोग करके या उससे जुड़कर सीएसएस फ़ाइल। @import और सीएसएस के लिए लिंक के बीच क्या अंतर है और आपने यह तय कैसे किया कि आपके लिए कौन सा बेहतर है? चलो एक नज़र डालते हैं!

& # 64; आयात और & lt; लिंक & gt; के बीच का अंतर

अपनी स्टाइल शीट्स को शामिल करने के लिए किस विधि का उपयोग करना है, यह तय करने से पहले, आपको समझना चाहिए कि दोनों तरीकों का उपयोग किस उद्देश्य के लिए किया जाना था।

- लिंकिंग आपके वेब पृष्ठों पर बाहरी स्टाइल शीट को शामिल करने वाली पहली विधि है। इसका उद्देश्य आपके वेब पेज को अपनी स्टाइल शीट से जोड़ना है। इसे आपके एचटीएमएल दस्तावेज़ के में जोड़ा गया है:

@ आयात - आयात करने से आप एक स्टाइल शीट को दूसरे में आयात कर सकते हैं। यह लिंक परिदृश्य से थोड़ा अलग है, क्योंकि आप एक लिंक्ड स्टाइल शीट के अंदर स्टाइल शीट आयात कर सकते हैं। यदि आप अपने एचटीएमएल दस्तावेज़ के सिर में @import शामिल करते हैं, तो यह इस तरह लिखा गया है:

<शैली प्रकार = "पाठ / सीएसएस"> @ आयात यूआरएल ("शैलियों.css");

मानकों के दृष्टिकोण से, बाहरी स्टाइल शीट को जोड़ने या इसे आयात करने के बीच कोई अंतर नहीं है। किसी भी तरह से सही है और किसी भी तरह से समान रूप से अच्छी तरह से काम करेगा (ज्यादातर मामलों में)। हालांकि, कुछ कारण हैं जो आप एक दूसरे के ऊपर उपयोग करना चाहते हैं।

क्यों आयात करें & # 64; आयात करें?

कई साल पहले, इसके बजाय @import (या साथ में) का उपयोग करने के लिए दिया जाने वाला सबसे आम कारण यह है कि पुराने ब्राउज़र @import को नहीं पहचानते थे, इसलिए आप उनसे शैलियों को छुपा सकते थे। अपनी स्टाइल शीट्स आयात करके, आप अनिवार्य रूप से उन्हें पुराने ब्राउज़र संस्करणों से "छिपाने" के दौरान अधिक आधुनिक, मानकों के अनुरूप ब्राउज़र में उपलब्ध कराएंगे।

@import विधि के लिए एक और उपयोग पृष्ठ पर एकाधिक स्टाइल शीट का उपयोग करना है, जबकि केवल आपके दस्तावेज़ के में एक ही लिंक शामिल है। उदाहरण के लिए, साइट पर प्रत्येक पृष्ठ के लिए एक निगम के पास वैश्विक स्टाइल शीट हो सकती है, जिसमें उप-अनुभागों में अतिरिक्त शैलियों होती हैं जो केवल उस उपधारा में लागू होती हैं। उप-अनुभाग स्टाइल शीट से लिंक करके और उस स्टाइल शीट के शीर्ष पर वैश्विक शैलियों को आयात करके, आपको साइट और प्रत्येक उप-अनुभाग के लिए सभी शैलियों के साथ एक विशाल स्टाइल शीट बनाए रखने की आवश्यकता नहीं है। एकमात्र आवश्यकता यह है कि आपके किसी भी @import नियमों को आपके शेष शैली के नियमों से पहले आने की आवश्यकता है। साथ ही, यह याद रखना सुनिश्चित करें कि विरासत अभी भी एक समस्या हो सकती है।

क्यों & lt; लिंक & gt ;? का उपयोग करें

लिंक किए गए स्टाइल शीट का उपयोग करने का नंबर एक कारण है अपने ग्राहकों के लिए वैकल्पिक स्टाइल शीट प्रदान करना। फ़ायरफ़ॉक्स, सफारी और ओपेरा जैसे ब्राउज़र rel = "वैकल्पिक स्टाइलशीट" विशेषता का समर्थन करते हैं और जब कोई उपलब्ध होता है तो दर्शक उनके बीच स्विच करने की अनुमति देंगे। आप आईई में स्टाइल शीट के बीच स्विच करने के लिए एक जावास्क्रिप्ट स्विचर का भी उपयोग कर सकते हैं। यह अक्सर उपयोगिता उद्देश्यों के लिए ज़ूम लेआउट के साथ प्रयोग किया जाता है।

@import का उपयोग करने में कमी में से एक यह है कि यदि आपके पास केवल @import नियम के साथ एक बहुत ही सरल है, तो आपके पृष्ठ लोड होने के बाद "अनस्टील्ड सामग्री का फ्लैश" (FOUC) प्रदर्शित कर सकते हैं। यह आपके दर्शकों के लिए झटकेदार हो सकता है। इसका एक आसान फिक्स यह सुनिश्चित करना है कि आपके में कम से कम एक अतिरिक्त या