CSS को शामिल करने का सबसे अच्छा तरीका? क्यों @import का उपयोग करें?

Question

मूल रूप से मैं सोच रहा हूँ कि @importमौजूदा स्टाइलशीट में स्टाइलशीट आयात करने का क्या फायदा / उद्देश्य है बस एक और जोड़ना ...

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

दस्तावेज़ के प्रमुख के लिए?

Comments

पोर्टेबिलिटी वह पहली चीज है जो दिमाग में आती है। आप विभिन्न पृष्ठों में सीएसएस फ़ाइलों के समूहों को शामिल करना चाहते हैं, इसके आसान और अधिक पोषणीय 5. से प्रत्येक पृष्ठ में सिर्फ एक सीएसएस फ़ाइल से जोड़ने के लिए बल्कि, के लिए

— xbonez

@xbonez: ज्यादातर ऐसी स्थितियों में, हालांकि, इसमें शामिल अन्य सामान्य HTML की एक महत्वपूर्ण राशि होगी, इसलिए आमतौर पर दोनों स्टाइलशीट को एक टेम्पलेट में लिंक करना बेहतर होता है।

— डस्कवफ-एक्टिव-

बुरे पुराने दिनों में, @import दोनों "अच्छे" ब्राउज़र (नेटस्केप 4, IE5) और बुरे ब्राउज़र (IE3, N3) को सपोर्ट करने के लिए आसान था। आजकल, यह लगभग बेकार है।

— mddw

stevesouders.com/blog/2009/04/04/09/dont-use-import

— chharvey

HTML5 में <लिंक> एक शून्य तत्व है , इसलिए .. आप इसे स्लैश के बिना उपयोग कर सकते हैं, जैसे ,। <link rel="stylesheet" type="text/css" href="theme.css">

— Константин Ван

Answer 1

एक पृष्ठ गति दृष्टिकोण से, @importसीएसएस फ़ाइल से लगभग कभी भी उपयोग नहीं किया जाना चाहिए, क्योंकि यह स्टाइलशीट्स को समवर्ती रूप से डाउनलोड होने से रोक सकता है। उदाहरण के लिए, यदि स्टाइलशीट A में पाठ है:

@import url("stylesheetB.css");

तब दूसरी स्टाइलशीट का डाउनलोड तब तक शुरू नहीं हो सकता है जब तक कि पहली स्टाइलशीट डाउनलोड न हो गई हो। यदि, दूसरी ओर, <link>मुख्य HTML पृष्ठ के तत्वों में दोनों स्टाइलशीट संदर्भित हैं , तो दोनों को एक ही समय में डाउनलोड किया जा सकता है। यदि दोनों स्टाइलशीट हमेशा एक साथ लोड की जाती हैं, तो उन्हें केवल एक फाइल में संयोजित करने में भी मदद मिल सकती है।

कभी-कभी ऐसी परिस्थितियाँ होती हैं जहाँ @importउपयुक्त होता है, लेकिन वे आम तौर पर अपवाद होते हैं, नियम नहीं।

Comments

There are occasionally situations where @import is appropriate@mediaविभिन्न उपकरणों के लिए विभिन्न शैलियों को लागू करने के लिए उपयोग करना।

— डेरेक 會 功夫 ere

एक अन्य कारण @importGoogle शीट के लिए स्टाइल शीट (जैसे @import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);) में जोड़ना होगा , ताकि आपको linkउस स्टाइलशीट का उपयोग करके प्रत्येक पृष्ठ में पेस्ट न करना पड़े ।

— सेहोरस्टमन

उन लोगों के लिए जो उत्सुक हैं: मेरे पसंदीदा उपयोगों में से @importएक है जब आपके पास एक बिल्ड प्रक्रिया होती है जैसे कुछ का उपयोग करके grunt-concat-css। विकास के दौरान, @importबयान काम करते हैं और पृष्ठ लोड गति चिंता का विषय नहीं है। फिर, जब आप उत्पादन के लिए निर्माण कर रहे होते हैं, तो इस तरह का एक उपकरण आपकी सीएसएस फ़ाइलों के सभी को उचित रूप से हटा देगा और हटा देगा @import। मैं अपनी जावास्क्रिप्ट फ़ाइलों का उपयोग करके एक समान काम करता हूं grunt-browserify।

— ब्रैंडन

@ डेरेक 會 朕 功夫 यदि आप @importडिवाइस विशिष्ट शैलियों को लागू करने के लिए उपयोग कर रहे हैं , तो <link>मीडिया विशेषता के साथ टैग का उपयोग क्यों न करें ?

— जोमार सेविजो

@MuhammedAsif कोई कारण नहीं है कि @importतेजी से होगा। आप शायद किसी प्रकार की माप कलाकृतियों को देख रहे हैं।

— डस्कवफ़-एक्टिव-

Answer 2

मैं शैतान के वकील का किरदार निभाने जा रहा हूं, क्योंकि मैं इससे नफरत करता हूं जब लोग बहुत ज्यादा सहमत होते हैं।

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

दो चर हैं जो आप किसी भी समय के लिए अनुकूलित कर रहे हैं - आपके कोड का प्रदर्शन , और डेवलपर का प्रदर्शन । कई मामलों में, यदि अधिकांश मामले नहीं हैं, तो डेवलपर को अधिक कुशल बनाना अधिक महत्वपूर्ण है , और उसके बाद ही कोड को अधिक प्रदर्शनकारी बनाना चाहिए ।

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

(इस तरह की निर्भरता कब होगी? यह बहुत दुर्लभ है, मेरी राय में - आमतौर पर एक स्टाइलशीट पर्याप्त है। हालांकि, विभिन्न सीएसएस फ़ाइलों में चीजों को डालने के लिए कुछ तार्किक स्थान हैं :)

• थीमिंग: यदि आपके पास एक ही पृष्ठ के लिए अलग-अलग रंग योजनाएं या थीम हैं, तो वे कुछ घटक साझा कर सकते हैं, लेकिन सभी घटक नहीं।
• उपसंपादक: एक आकस्मिक उदाहरण - कहते हैं कि आपके पास एक रेस्तरां पृष्ठ है जिसमें एक मेनू शामिल है। यदि मेनू शेष पृष्ठ से बहुत अलग है, तो इसे बनाए रखना आसान होगा यदि यह अपनी फ़ाइल में है।

आमतौर पर स्टाइलशीट स्वतंत्र होते हैं, इसलिए उन सभी का उपयोग करना शामिल करना उचित है <link href>। हालांकि, अगर वे एक आश्रित श्रेणीबद्ध हैं, तो आपको वह काम करना चाहिए जो करने के लिए सबसे तार्किक समझ में आता है।

पायथन आयात का उपयोग करता है; सी का उपयोग शामिल हैं; जावास्क्रिप्ट की आवश्यकता है। सीएसएस में आयात है; जब आपको इसकी आवश्यकता हो, तो इसका उपयोग करें!

2. एक बार जब आप उस बिंदु पर पहुंच जाते हैं, जहां साइट को स्केल करने की आवश्यकता होती है, तो सभी सीएसएस को संक्षिप्त करें।

किसी भी प्रकार के एकाधिक सीएसएस अनुरोध - चाहे लिंक के माध्यम से या @imports के माध्यम से - उच्च प्रदर्शन वेब साइटों के लिए बुरा अभ्यास है। एक बार जब आप उस बिंदु पर पहुंच जाते हैं, जहां अनुकूलन मायने रखता है, तो आपके सभी सीएसएस को एक मिनिफायर के माध्यम से बहना चाहिए। Cssmin आयात बयानों को जोड़ती है; जैसा कि @Brandon बताते हैं, ग्रंट के पास ऐसा करने के लिए कई विकल्प हैं। ( यह प्रश्न भी देखें )।

एक बार जब आप मिनीकृत चरण में होते हैं, <link>तो तेजी से होता है, जैसा कि लोगों ने बताया है, इसलिए कुछ स्टाइलशीट के अधिकांश लिंक पर और यदि संभव हो तो किसी भी समय @import नहीं करें।

साइट के उत्पादन के पैमाने पर पहुंचने से पहले हालांकि, यह अधिक महत्वपूर्ण है कि कोड व्यवस्थित और तार्किक है, क्योंकि यह थोड़ा तेज है।

Comments

'बुरा आदमी' खेलने के लिए +1 वास्तव में ऐसे बिंदु हैं जो इस विषय पर व्यापक दृष्टिकोण में योगदान करते हैं।

— हैरोगैस्टन

"किसी भी तरह के एकाधिक सीएसएस अनुरोध - चाहे लिंक के माध्यम से या @imports के माध्यम से - उच्च प्रदर्शन वेब साइटों के लिए बुरा अभ्यास है।" मल्टीप्लेक्सिंग के कारण HTTP / 2 का उपयोग करते समय यह बुरा अभ्यास नहीं है।

— गुम्मिस्तो

Answer 3

@importगति कारणों से पृष्ठ में CSS शामिल करने के लिए इसका उपयोग नहीं करना सबसे अच्छा है । जानने के लिए यह उत्कृष्ट लेख देखें: http://www.stevesouders.com/blog/2009/04/04/09/dont-use-import/

इसके अलावा अक्सर @ सीएमओ टैग के माध्यम से सेव की जाने वाली सीएसएस फाइलों को छोटा और संयोजित करना कठिन होता है, क्योंकि मिनिफाई स्क्रिप्ट अन्य सीएसएस फाइलों से @import लाइनों को "छील" नहीं सकती है। जब आप उन्हें <लिंक टैग के रूप में शामिल करते हैं, तो आप मौजूदा minify php / dotnet / java मॉड्यूल का उपयोग कर सकते हैं।

इसलिए: के <link />बजाय का उपयोग करें @import।

Comments

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

— bjorsig

Answer 4

लिंक विधि का उपयोग करके, स्टाइलशीट को समानांतर (तेज और बेहतर) लोड किया जाता है, और लगभग सभी ब्राउज़र लिंक का समर्थन करते हैं

आयात किसी भी अतिरिक्त सीएसएस फ़ाइलों को एक-एक करके (धीमी) लोड करता है, और आपको फ्लैश ऑफ अनस्टाइल कंटेंट दे सकता है

Answer 5

@ नीबो इज़नाद मिज़ो ग्रगुर

निम्नलिखित सभी सही तरीके हैं @ @पोर्ट का उपयोग करने के लिए

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

स्रोत: https://developer.mozilla.org/en-US/docs/Web/CSS/@import

Answer 6

आयात कार्यक्षमता का उपयोग करके बनाम सिर में एक सीएसएस स्टाइलशीट जोड़ने में वास्तव में बहुत अंतर नहीं है। का उपयोग @importआम तौर पर स्टाइलशीट का उपयोग करने के लिए किया जाता है ताकि किसी को आसानी से बढ़ाया जा सके। यह कुछ सामान्य सीएसएस परिभाषाओं के साथ संयोजन में उदाहरण के लिए अलग-अलग रंग लेआउट को आसानी से स्वैप करने के लिए इस्तेमाल किया जा सकता है। मैं कहूंगा कि मुख्य लाभ / उद्देश्य व्यापकता है।

मैं xbonez टिप्पणी के साथ सहमत हूँ कि पोर्टेबिलिटी और मेंटेनेंस को अतिरिक्त लाभ मिला है।

Answer 7

वे बहुत समान हैं। कुछ का तर्क हो सकता है कि @import अधिक रखरखाव योग्य है। हालाँकि, प्रत्येक @import आपको "लिंक" विधि का उपयोग करने के लिए उसी तरह से एक नया HTTP अनुरोध देगा। तो गति के संदर्भ में यह तेज नहीं है। और जैसा कि "duskwuff" ने कहा, यह एक साथ लोड नहीं होता है जो एक गिरावट है।

Answer 8

एक स्थान जहां मैं @import का उपयोग करता हूं, जब मैं एक पृष्ठ के दो संस्करण कर रहा हूं, अंग्रेजी और फ्रेंच। मैं एक main.css का उपयोग करके अंग्रेजी में अपना पेज बनाऊंगा। जब मैं फ्रांसीसी संस्करण का निर्माण करता हूं, तो मैं एक फ्रेंच स्टाइलशीट (main_fr.css) से लिंक करूंगा। फ्रेंच स्टाइलशीट के शीर्ष पर, मैं main.css को आयात करूंगा, और फिर फ्रेंच संस्करण में अलग-अलग हिस्सों की आवश्यकता के लिए विशिष्ट नियमों को फिर से परिभाषित करूंगा।

Answer 9

Http://webdesign.about.com/od/beginningcss/f/css_import_link.htm से उद्धृत

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

Answer 10

कभी-कभी आपको इनलाइन के विपरीत @import का उपयोग करना पड़ता है। यदि आप एक जटिल एप्लिकेशन पर काम कर रहे हैं जिसमें 32 या अधिक सीएसएस फाइलें हैं और आपको IE9 का समर्थन करना चाहिए तो कोई विकल्प नहीं है। IE9 पहले 31 के बाद किसी भी css फ़ाइल को अनदेखा करता है और इसमें css और इनलाइन शामिल हैं। हालांकि, प्रत्येक शीट 31 अन्य आयात कर सकती है।

Answer 11

@Import का उपयोग करने के कई अच्छे कारण हैं।

@Import का उपयोग करने का एक शक्तिशाली कारण क्रॉस-ब्राउज़र डिज़ाइन करना है। आयातित चादरें, सामान्य रूप से, कई पुराने ब्राउज़रों से छिपी हुई हैं, जो आपको नेटस्केप 4 या पुरानी श्रृंखला जैसे मैक, ओपेरा 6 और पुराने के लिए इंटरनेट एक्सप्लोरर 5.2, और पीसी के लिए IE 3 और 4 जैसे पुराने ब्राउज़रों के लिए विशिष्ट स्वरूपण लागू करने की अनुमति देती हैं।

ऐसा करने के लिए, आपके base.css फ़ाइल में आपके पास निम्नलिखित हो सकते हैं:

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

अपनी आयातित कस्टम शीट में (newbrowsers.css) बस नई कैस्केडिंग शैली लागू करें:

html body {
  font-size:1em;
}

"ईएम" इकाइयों का उपयोग करना "पीएक्स" इकाइयों से बेहतर है क्योंकि यह उपयोगकर्ता सेटिंग्स के आधार पर फोंट और डिज़ाइन दोनों की अनुमति देता है, जहां पुराने ब्राउज़र पिक्सेल-आधारित के साथ बेहतर करते हैं (जो कठोर हैं और ब्राउज़र उपयोगकर्ता सेटिंग्स में नहीं बदला जा सकता है) । अधिकांश पुराने ब्राउज़रों द्वारा आयातित शीट नहीं देखी जाएगी।

आप ऐसा कर सकते हैं, कौन परवाह करता है! कुछ बड़े पुरातन सरकार या कॉरपोरेट सिस्टम में जाने की कोशिश करें और आप अभी भी उन पुराने ब्राउज़रों का उपयोग देखेंगे। लेकिन इसका वास्तव में सिर्फ अच्छा डिज़ाइन है, क्योंकि आज जिस ब्राउज़र को आप प्यार करते हैं, वह किसी दिन प्राचीन और पुराना भी होगा। और एक सीमित तरीके से CSS का उपयोग करने का मतलब है कि अब आपके पास उपयोगकर्ता-एजेंटों का एक बड़ा और बढ़ता हुआ समूह है जो आपके साइट के साथ अच्छा काम नहीं करते हैं।

@Import का उपयोग करने से आपकी क्रॉस-ब्राउज़र वेब साइट संगतता अब 99.9% संतृप्ति तक पहुंच जाएगी, क्योंकि इतने सारे पुराने ब्राउज़र आयातित शीट्स को नहीं पढ़ेंगे। यह गारंटी देता है कि आप उनके HTML के लिए एक मूल सरल फ़ॉन्ट सेट करते हैं, लेकिन नए एजेंटों द्वारा अधिक उन्नत CSS का उपयोग किया जाता है। यह नए डेस्कटॉप ब्राउज़रों में आवश्यक समृद्ध दृश्य प्रदर्शनों से समझौता किए बिना सामग्री को पुराने एजेंटों के लिए सुलभ होने की अनुमति देता है।

याद रखें, आधुनिक ब्राउज़र HTML संरचनाओं और वेब साइट पर पहली कॉल के बाद बहुत अच्छी तरह से CSS। एक बार सर्वर पर एकाधिक कॉल यह अड़चन नहीं थी।

मेगाबाइट्स और मेगाबाइट्स ऑफ़ जावास्क्रिप्टस्क्रिप्ट एपीआई एंड जोंस को स्मार्ट डिवाइसों पर अपलोड किया गया है और खराब HTML डिज़ाइन किया गया है जो पृष्ठों के बीच संगत नहीं है, आज धीमी रेंडरिंग का मुख्य चालक है। Youre औसत Google समाचार पृष्ठ केवल पाठ के एक छोटे से प्रस्तुत करने के लिए ECMAScript के 6 मेगाबाइट से अधिक है! जबरदस्त हंसी

कैश्ड CSS की कुछ किलोबाइट और छोटे जावास्क्रिप्ट फुटप्रिंट्स के साथ लगातार क्लीन एचटीएमएल एक उपयोगकर्ता-एजेंट को बिजली की गति में रेंडर करेगा, क्योंकि ब्राउज़र लगातार DOM मार्कअप और CSS दोनों को कैश करता है, जब तक कि आप जावास्क्रिप्ट सर्कस ट्रिक के माध्यम से हेरफेर और परिवर्तन करना नहीं चुनते।

Answer 12

मुझे लगता है कि इसमें दो कारण हैं कि आप वास्तव में कई सीएसएस स्टाइल शीट क्यों लिख रहे हैं।

1. आप कई पत्रक लिखते हैं क्योंकि आपकी वेबसाइट के विभिन्न पृष्ठों के लिए अलग-अलग सीएसएस परिभाषाओं की आवश्यकता होती है। या कम से कम उन सभी को सभी सीएसएस परिभाषाओं की आवश्यकता नहीं होती है जो एक दूसरे पृष्ठों की आवश्यकता होती है। तो आप सीएसएस फाइलों को अलग-अलग पृष्ठों पर लोड करने के लिए शीट को अलग करने के लिए विभाजित करते हैं और बहुत सीएसएस परिभाषाओं को लोड करने से बचते हैं।
2. दूसरा कारण जो आपके दिमाग में आता है वह यह है कि आपका CSS इतना बड़ा हो रहा है कि संभालना अनाड़ी हो गया है और बड़ी CSS फ़ाइल को बनाए रखने के लिए इसे आसान बनाने के लिए आपने उन्हें कई CSS फाइलों में विभाजित कर दिया है।

पहले कारण के लिए अतिरिक्त <link>टैग लागू होगा क्योंकि यह आपको विभिन्न पृष्ठों के लिए सीएसएस फ़ाइलों के विभिन्न सेट को लोड करने की अनुमति देता है।

दूसरे कारण के लिए @importकथन सबसे अधिक उपयोगी है क्योंकि आपको कई सीएसएस फाइलें मिलती हैं लेकिन भरी हुई फाइलें हमेशा समान होती हैं।

लोडिंग समय के दृष्टिकोण से अलग नहीं है। ब्राउज़र को अलग सीएसएस फ़ाइलों की जांच और डाउनलोड करना पड़ता है, चाहे वे कैसे भी लागू हों।

Comments

आप कहते हैं, "लोडिंग समय के दृष्टिकोण से कोई भिन्न नहीं है। ब्राउज़र को अलग सीएसएस फ़ाइलों की जांच और डाउनलोड करना पड़ता है, भले ही वे कैसे लागू हों।" हालांकि यह सही नहीं है। ब्राउज़र समानांतर में कई <लिंक> CSS फ़ाइलों को डाउनलोड कर सकता है, लेकिन @ आयात सीएसएस फ़ाइलों के लिए, उन्हें डाउनलोड किया जाना चाहिए, पार्स किया गया और फिर @ आयात फ़ाइलें डाउनलोड की गईं। यह आपके पेज लोड की गति को धीमा कर देगा, खासकर अगर आयातित सीएसएस फ़ाइल में यह @ आयात फ़ाइलें है

— साइबरस्पेस

Answer 13

अपने सीएसएस में @import का उपयोग करें यदि आप एरिक मेसेट का उपयोग कर रहे हैं, जैसे एरिक मेयर का रीसेट सीएसएस v2.0, तो यह आपके सीएसएस को लागू करने से पहले काम करता है, इस प्रकार संघर्षों को रोकता है।

Answer 14

मुझे लगता है कि कई उपकरणों के लिए कोड लिखते समय @import सबसे उपयोगी है। एक सशर्त विवरण शामिल करें केवल प्रश्न में डिवाइस के लिए शैली शामिल करें, फिर केवल एक शीट लोड हो जाती है। आप अभी भी किसी भी सामान्य शैली के तत्वों को जोड़ने के लिए लिंक टैग का उपयोग कर सकते हैं।

Answer 15

मुझे लिंक किए गए स्टाइलशीट के "उच्च शिखर" का अनुभव हुआ जिसे आप जोड़ सकते हैं। लिंक किए गए किसी भी जावास्क्रिप्ट को जोड़ने के दौरान मेरे मुफ्त होस्ट प्रदाता के लिए कोई समस्या नहीं थी, बाहरी स्टाइलशीट की संख्या दोगुनी होने के बाद मुझे एक क्रैश / धीमा मिला। और सही कोड उदाहरण है:

@import 'stylesheetB.css';

इसलिए, मुझे यह एक अच्छा मानसिक नक्शा होने के लिए उपयोगी लगता है, जैसा कि नितराम ने उल्लेख किया है, जबकि अभी भी डिजाइन को हार्ड-कोडिंग कर रहा है। गॉडस्पीडः। और मैं अंग्रेजी व्याकरण की गलतियों के लिए क्षमा चाहता हूँ, यदि कोई हो।

Answer 16

@Import का उपयोग करने का लगभग कोई कारण नहीं है क्योंकि यह हर एक आयातित CSS फ़ाइल को अलग से लोड करता है और आपकी साइट को काफी धीमा कर सकता है। यदि आप सीएसएस से निपटने के लिए इष्टतम तरीके में रुचि रखते हैं (जब यह पृष्ठ गति की बात आती है), तो यह है कि आपको सभी सीएसएस से कैसे निपटना चाहिए :

• अपनी सभी CSS फाइलें खोलें और हर एक फाइल के कोड को कॉपी करें
• अपने पृष्ठ के HTML हेडर में एक एकल टैग के बीच सभी कोड चिपकाएँ
• जब तक आपके पास बड़ी मात्रा में कोड न हो या कोई विशिष्ट आवश्यकता न हो, तब तक CSS वितरित करने के लिए CSS @import या अलग CSS फाइलों का उपयोग कभी न करें।

अधिक विस्तृत जानकारी यहाँ: http://www.giftofspeed.com/optimize-css-delivery/

उपरोक्त कारण सबसे अच्छा काम करता है क्योंकि यह ब्राउज़र से निपटने के लिए कम अनुरोध बनाता है और यह अलग-अलग फ़ाइलों को डाउनलोड करने के बजाय तुरंत सीएसएस प्रदान करना शुरू कर सकता है।

Comments

एक अत्यंत संकीर्ण, लेकिन मान्य, "अनुकूलन" शब्द का दृश्य। अपनी पवित्रता के लिए, इस तरह के अनुकूलन को प्राप्त करने के लिए प्रकाशन चरण के दौरान एक उपकरण का उपयोग करें। तब तक आप जो भी सोचते हैं और तेजी से कोड करने में मदद करते हैं ।

— जेसी चिशोल्म

चूंकि अधिकांश वेबसाइटों में 1 से अधिक पृष्ठ होते हैं, और आमतौर पर प्रत्येक एक ही सीएसएस का उपयोग करता है, इसलिए क्या सीएसएस फ़ाइल (हेडर में लिंक) का उपयोग करना तेजी से नहीं होगा? यह इसे एक बार स्थानांतरित करने का कारण बनेगा, फिर ब्राउज़र कैश (अक्सर मेमोरी में) का उपयोग किया जाता है, बनाम हर पेज के लिए पूरी चीज को डाउनलोड करने पर जब यह हर पेज के HTML का हिस्सा होता है।

— लेगोलस

यह सभी सीएसएस फ़ाइलों को कॉपी करने और स्टाइल के अंदर पेस्ट करने के लिए एक आपदा है .. कम से कम 1 सीएसएस को शामिल करने के लिए बेहतर है<HEAD>

— T.Todua

यह पूरी तरह से ब्राउज़र कैशिंग की उपेक्षा करता है

— माइकल 10

मैं इस जवाब को मजाक मान रहा हूं? (नि: शुल्क बोल्ड प्रकार और लिंक किए गए पृष्ठ पर उपयोग स्टाइल टैग नहीं कहते हैं)

— संजय मनोहर

Answer 17

यह एक PHP डेवलपर की मदद कर सकता है। नीचे दिए गए फ़ंक्शंस सफ़ेद स्थान को हटा देंगे, टिप्पणियां हटाएंगे और आपकी सभी सीएसएस फ़ाइलों को संक्षिप्त करेंगे। फिर <style>पृष्ठ लोड करने से पहले इसे सिर में एक टैग में डालें ।

नीचे दिया गया कार्य टिप्पणियों को छीन लेगा और सीएसएस में पारित कर देगा। इसे अगले फ़ंक्शन के साथ जोड़ा जाता है।

<?php
function minifyCSS($string)
{
    // Minify CSS and strip comments

    # Strips Comments
    $string = preg_replace('!/\*.*?\*/!s','', $string);
    $string = preg_replace('/\n\s*\n/',"\n", $string);

    # Minifies
    $string = preg_replace('/[\n\r \t]/',' ', $string);
    $string = preg_replace('/ +/',' ', $string);
    $string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);

    # Remove semicolon
    $string = preg_replace('/;}/','}',$string);

    # Return Minified CSS
    return $string;
}
?>

आप इस फ़ंक्शन को अपने दस्तावेज़ के प्रमुख में कहेंगे।

<?php
function concatenateCSS($cssFiles)
{
    // Load all relevant css files

    # concatenate all relevant css files
    $css = '';
    foreach ($cssFiles as $cssFile)
    {
        $css = $css . file_get_contents("$cssFile.css");
    }

    # minify all css
    $css = minifyCSS($css);
    echo "<style>$css</style>";
}
?>

concatenateCSS()अपने दस्तावेज़ सिर में फ़ंक्शन शामिल करें । अपने पथ के साथ अपने स्टाइलशीट के नाम के साथ एक सरणी में पास करें IE css/styles.css:। आपको एक्सटेंशन जोड़ने की आवश्यकता नहीं है .cssक्योंकि यह ऊपर के फ़ंक्शन में स्वचालित रूप से जोड़ा जाता है।

<head>
    <title></title>
    <?php
    $stylesheets = array(
        "bootstrap/css/bootstrap.min", 
        "css/owl-carousel.min", 
        "css/style"
        );
    concatenateCSS( $stylesheets );
    ?>
</head>

Comments

मुझे लगता है कि आपके सीएसएस की सामग्री को मैन्युअल रूप से 'मिनीफाई' करना बेहतर होगा, फिर चुने हुए स्टाइल शीट के माध्यम से लूपिंग करना और उन्हें हर पृष्ठ पर जोड़ना होगा। इसके अलावा file_get_contents()cURL का उपयोग करने की तुलना में काफी धीमी है।

— कॉनर सिम्पसन

यह एक बुरा विचार है जो ब्राउज़र कैश को उपयोग करने से रोकता है।

— सुधार