सीएसएस में @import और लिंक के बीच अंतर

Question

मैं अपने प्रोजेक्ट टेम्पलेट को ट्विक करने के लिए कुछ सीएसएस सीख रहा हूं। मैं इस समस्या पर आया और वेब पर स्पष्ट उत्तर नहीं मिला। क्या सीएसएस में @ आयात या लिंक का उपयोग करने के बीच कोई अंतर है? @import

<style type="text/css">@import url(Path To stylesheet.css)</style> 

लिंक

<link rel="stylesheet" type="text/css" href="Path To stylesheet.css" /> 

यह करने के लिए सबसे अच्छा तरीका क्या है के उपयोग की

का उपयोग करें? और क्यों? धन्यवाद!

Answer 1

सिद्धांत रूप में, उनके बीच एकमात्र अंतर यह है कि @import एक स्टाइल शीट और <link> HTML तंत्र शामिल करने के लिए सीएसएस तंत्र है। हालांकि, ब्राउज़र प्रदर्शन को संदर्भित करते हुए <link> को स्पष्ट लाभ देते हुए उन्हें अलग-अलग संभालते हैं।

स्टीव साउडर ने <link> और @import (और उनमें से सभी प्रकार के संयोजन) के प्रभाव की तुलना में एक व्यापक ब्लॉग पोस्ट लिखा, जिसे "don’t use @import" कहा जाता है। वह शीर्षक खुद के लिए बहुत ज्यादा बोलता है।

याहू! भी उनके प्रदर्शन सर्वोत्तम प्रथाओं (स्टीव Souders सह-लेखक हैं) में से एक के रूप में यह उल्लेख है: Choose <link> over @import

इसके अलावा, आप "preferred" and alternate stylesheets परिभाषित करने के लिए अनुमति देता है <link> टैग का उपयोग कर। आप @import के साथ ऐसा नहीं कर सकते हैं।

Answer 2

जब मैं @import नियम का उपयोग करता हूं, तो आमतौर पर मौजूदा स्टाइलशीट के भीतर स्टाइलशीट आयात करना होता है (हालांकि मैं इसे शुरू करने से नापसंद करता हूं)। लेकिन आपके प्रश्न का उत्तर देने के लिए, मुझे विश्वास नहीं है कि इसमें कोई अंतर है। मान्य एक्सएचटीएमएल का अनुपालन करने के लिए बस URL को डबल कोट्स में रखना सुनिश्चित करें।

Answer 3

आज कोई वास्तविक अंतर नहीं है, लेकिन @import पुराने ब्राउज़र (नेटस्केप 4, आदि) द्वारा सही ढंग से संभाला नहीं जाता है, इसलिए @import hack का उपयोग इन पुराने ब्राउज़र से सीएसएस 2 नियमों को छिपाने के लिए किया जा सकता है।

फिर से, जब तक कि आप वास्तव में पुराने ब्राउज़र का समर्थन नहीं कर रहे हैं, कोई फर्क नहीं पड़ता।

यदि मैं आप थे, तो भी, मैं आपके HTML पृष्ठों पर <link> संस्करण का उपयोग करूंगा, क्योंकि यह आपको मीडिया प्रकार (प्रिंट, स्क्रीन इत्यादि) जैसी चीजों को निर्दिष्ट करने की अनुमति देता है।

Answer 4

आप आयात कमांड का उपयोग एक सीएसएस फ़ाइल के अंदर एक और सीएसएस आयात करने के लिए कर सकते हैं जो लिंक कमांड के साथ संभव नहीं है। वास्तव में पुराना ब्राउज़र आयात कार्यक्षमता को संभाल नहीं सकता (IE4, IE5 आंशिक रूप से)। इसके अतिरिक्त स्टाइल शीट आयात प्राप्त करने में आपके xhtml/html को पार्स करने में कुछ लाइब्रेरी विफल हो सकती हैं। कृपया ध्यान रखें कि आपका आयात अन्य सभी सीएसएस घोषणाओं से पहले आना चाहिए।

Answer 5

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

कुल मिलाकर, <link> टैग @import नियम से अधिक तेज़ी से संसाधित किया जाता है (जो स्पष्ट रूप से सीएसएस प्रोसेसिंग इंजन के संबंध में कुछ हद तक धीमा है)।

Answer 6

यह लेख उपयोग की यहाँ हो सकता है: 4 methods of adding CSS to HTML: link, embed, inline and import

Answer 7

< लिंक > निर्देश एकाधिक सीएसएस के लिए अनुमति दे सकते हैं लोड और asyncronously व्याख्या की जा।

@import निर्देश ब्राउज़र * को तब तक प्रतीक्षा करने के लिए बाध्य करता है जब तक आयातित स्क्रिप्ट को मूल इंजन में सही ढंग से संसाधित नहीं किया जा सके, क्योंकि तकनीकी रूप से यह केवल एक स्क्रिप्ट है।

बहुत सी सीएसएस न्यूनतमकरण स्क्रिप्ट (और कम या एसएएस जैसी भाषाएं) मुख्य लिपि में लिंक्ड स्क्रिप्ट को स्वचालित रूप से जोड़ती हैं क्योंकि इससे कम स्थानांतरण ओवरहेड होता है।

* (ब्राउज़र पर निर्भर करता है)