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

118

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

@Import का उपयोग

<style>@import url(Path To stylesheet.css)</style>

लिंक का उपयोग

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

इसे करने का सबसे अच्छा तरीका क्या है? और क्यों? धन्यवाद!

css import hyperlink

— उमर आबिद
स्रोत

142

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

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

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

इसके अलावा, <link>टैग का उपयोग करने से आप "पसंदीदा" और वैकल्पिक स्टाइलशीट को परिभाषित कर सकते हैं । आप ऐसा नहीं कर सकते @import।

— मर्केटर
स्रोत

धन्यवाद - अच्छा हाइपरलिंक - विशेष रूप से पहले वाला।

— फैसल वली

6

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

— merkuro
स्रोत

6

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

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

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

— zenazn
स्रोत

5

निर्दिष्ट करने के लिए मीडिया @import स्टेटमेंट के लिए भी संभव है।

— जॉर्ज शॉली

वास्तव में? मुझे लगता है कि आप अपनी शैली टैग पर एक मीडिया प्रकार डाल सकते हैं, लेकिन यह मेरे लिए एक हैक जैसा लगता है।

— ज़ीनज़ेन

5

आप उदाहरण के लिए "@import url (style.css) स्क्रीन, प्रिंट" कर सकते हैं, हालांकि IE7 और इससे पहले मीडिया प्रकारों का समर्थन नहीं करते हैं।

— व्यापारी

5

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

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

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

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

— बंदर की inago
स्रोत

2

यह लेख यहां उपयोग किया जा सकता है: सीएसएस को HTML में जोड़ने के 4 तरीके: लिंक, एम्बेड, इनलाइन और आयात

— मैथ्यू जेम्स टेलर
स्रोत

1

उद्धरण: "आइए कल्पना करें कि हमारे पास 1000 पृष्ठ की वेबसाइट है और हम साइट पर प्रत्येक पृष्ठ से एक सीएसएस फ़ाइल से लिंक करते हैं। अब हम कल्पना करते हैं कि हम उन सभी पृष्ठों में एक दूसरी सीएसएस फ़ाइल जोड़ना चाहते हैं। हम सभी 1000 HTML फ़ाइलों को संपादित कर सकते हैं। दूसरी सीएसएस लिंक जोड़ें या बहुत बेहतर तरीका होगा पहली फ़ाइल के भीतर से दूसरी सीएसएस फ़ाइल आयात करना। हमने सिर्फ अपने काम के घंटे बचाए! "

— केसबश

1

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

— बैरी गलाघेर
स्रोत

1

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

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

— गेब्रियल हर्ले
स्रोत

0

Microsoft इंटरनेट एक्सप्लोरर 9 (MSIE9) ठीक से @import को संभालता नहीं है। मेरे अपाचे लॉग से इन प्रविष्टियों का निरीक्षण करें (छिपा हुआ आईपी पता लेकिन whoisकहा गया कि यह स्वयं Microsoft के स्वामित्व में है): मुख्य HTML स्क्रीन से जुड़ा हुआ था।

@import url("print.css") print;
@import url("speech.css") aural;

अब मैं linkHTML में तत्वों को बदलने वाला हूं , क्योंकि ऐसा लगता है कि MSIE9 सर्वर को दो गलत अनुरोध जारी करता है, 404 त्रुटियां हो रही हैं जिन्हें मैं बिना कर सकता हूं:

[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net

वहाँ थे इन फ़ाइलों के लिए उचित अनुरोध बाद में, लेकिन हम इस के बिना "शूट सर्वर पर पहले पार्स, क्या कर सकते हैं urlके बाद" तर्क।

— सिलास एस। ब्राउन
स्रोत