हम गतिशील (सर्वर-साइड जनरेट) CSS का उपयोग क्यों नहीं करते हैं?


15

जैसा कि सर्वर-साइड जेनरेट किया गया HTML तुच्छ है (और यह AJAX से पहले डायनामिक वेबपेज बनाने का एकमात्र तरीका था), सर्वर-साइड जेनरेट सीएसएस नहीं है। दरअसल, मैंने इसे कभी नहीं देखा। सीएसएस संकलक हैं, लेकिन वे सीएसएस फाइलें उत्पन्न करते हैं जिनका उपयोग स्थिर के रूप में किया जा सकता है।

तकनीकी रूप से, इसके लिए कोई विशेष पुस्तकालयों की आवश्यकता नहीं है, HTML शैली टैग को स्थिर सीएसएस फ़ाइल के बजाय PHP (/ ASP / जो भी) टेम्पल स्क्रिप्ट का संदर्भ देना चाहिए, और स्क्रिप्ट को सीएसएस सामग्री-प्रकार के हेडर को बाहर भेजना चाहिए - बस इतना ही।

क्या इसमें कैश की समस्या है? मुझे ऐसा नहीं लगता। स्क्रिप्ट को नो-कैश आदि हेडर भेजना चाहिए । क्या यह डिजाइनरों के लिए समस्या है? नहीं, उन्हें सीएसएस टेम्पलेट को संपादित करना चाहिए (जैसा कि वे HTML टेम्पलेट को संपादित करते हैं)।

हम गतिशील सीएसएस जनरेटर का उपयोग क्यों नहीं करते हैं? या यदि कोई है, तो कृपया मुझे बताएं।


3
कम, सास, एससीएसएस, आदि
रीन हेनरिक्स

जवाबों:


13

बड़े पैमाने पर सीएसएस शायद ही कभी गतिशील रूप से उत्पन्न होता है (यह जावास्क्रिप्ट के लिए भी सच है) क्योंकि वे कैशिंग के लिए अच्छे उम्मीदवार हैं। CSS आपके पृष्ठों को स्टाइल करने का एक बहुत ही लचीला तरीका है, कक्षाओं के सही संयोजन के साथ, आप अपने सभी अलग-अलग पृष्ठों के सभी हिस्सों के सभी भागों को सभी प्रकार के cues के अनुसार स्टाइल कर सकते हैं, बिना किसी भी स्थिति के CSS में। इस पृष्ठदृश्य पर मौजूद होने के कारण वास्तव में क्या होता है।

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

यह प्रथा इतनी आम है, कि कई ब्राउज़र सिर्फ यह मानते हैं कि सीएसएस स्थिर है; और वे पहले से ही सीएसएस डाउनलोड करने के लिए बहुत अनिच्छुक हैं; भले ही उपयोगकर्ता पृष्ठ को पुनः लोड करते हैं। यह विशेष उपचार केवल सीएसएस पर लागू होता है; अन्य सामग्री प्रकार अपेक्षा के अनुसार पुनः लोड हो जाते हैं।


7

मेरा मानना ​​है कि आपकी धारणा गलत है: मेरे पिछले प्रोजेक्ट में, अनुप्रयोग सर्वर-जनित CSS का उपयोग कर रहा था जिसे ajax द्वारा लोड किया गया था (क्योंकि, आपके द्वारा देखे जा रहे नक्शे के स्थान के आधार पर, पृष्ठ को पूरी तरह से अलग शैलियों के साथ ब्रांड किया गया था)।

हालांकि, उपयोग के मामले जहां अजाक्स द्वारा अतिरिक्त सीएसएस प्राप्त करने से समस्या का समाधान होगा, यह बहुत दुर्लभ है, यही कारण है कि आप कभी भी इसका सामना नहीं कर सकते हैं: यह आमतौर पर स्टाइलशीट के एक सेट को बनाए रखने के लिए आसान है जो तैनाती के समय (LESS + minification और cacheable) में पूर्वनिर्मित हैं उदाहरण के लिए अगला पृष्ठ पहले कैश की गई स्टाइलशीट को फिर से उपयोग करने में सक्षम होगा, इसलिए प्रारंभिक समय कम है)।


आपकी बात उपयोगी है, लेकिन मुझे लगता है कि केस द्वारा विभिन्न मामले हैं, इसलिए good_computer विवरण विश्व स्तर पर संक्षिप्त और उपयोगी है।
QMaster

7

दरअसल, गतिशील सीएसएस के लिए उपयोग के मामले हैं। मैंने तीन अलग-अलग प्रकारों के साथ काम किया है:

  1. कम - कम सीएसएस मूल रूप से एक सीएसएस भाषा एक्सटेंशन है जो "गतिशील व्यवहार जैसे चर, मिश्रण, संचालन और कार्यों को जोड़ता है।" यह "नेस्टेड नियमों" को भी अनुमति देता है, जो बहुत सुविधाजनक है। मैंने पुनरावृत्ति में से कुछ को समाप्त करके सीएसएस लेखन को कम क्रिया बनाने के लिए मुख्य रूप से कम उपयोग किया है।

  2. URL पुनर्लेखन - आपके कथन के प्रमाण के रूप में कि कैश की कोई समस्या नहीं है, मैंने लंबे समय से सही कैश हेडर के साथ CSS फाइलों के रूप में स्क्रिप्ट की सेवा के लिए PHP का उपयोग किया है। मैं मुख्य रूप से पुस्तकालयों से सीएसएस फ़ाइलों की सेवा करने के लिए करता हूं जो वेब रूट के अंदर नहीं हैं।

  3. डायनामिक रिपोर्ट - एक परियोजना पर मैंने काम किया, हमारे पास सिस्टम में सभी प्रकार के डेटा के लिए एक रिपोर्ट बिल्डर था। हम styleरिपोर्ट के निर्माता में मुख्य रूप से रंगों के लिए डायनामिक शैली के नियमों को आउटपुट करते हैं ( जैसा कि आप उल्लेख करते हैं)।

नोट: जब सीएसएस को सीधे URL (जैसे 1 या 2 ) में आउटपुट किया जाता है और इसे उस पेज के भीतर एम्बेड नहीं किया जाता है जो पहले से ही एक स्क्रिप्ट द्वारा उत्पन्न किया जा रहा है, तो आप स्थैतिक सामग्री परोसने वाले सर्वर पर काफी महत्वपूर्ण भार जोड़ देंगे। इसलिए, यदि आपके पास बड़े पैमाने पर ट्रैफ़िक है, भले ही आप इसे हर बार गतिशील रूप से कर सकें , तो आप इसे एक स्थिर फ़ाइल के रूप में कैश करना चाहेंगे यदि आपका उपयोग मामला अनुमति देता है।


लेकिन यह अधिक सामान्य क्यों नहीं है? मुझे लगता है कि एक मुख्य कारण है - सीएसएस वास्तव में आउटपुट सामग्री के लिए नहीं बनाया गया है। तो वहाँ बस एक बड़ी जरूरत नहीं है। उपयोगकर्ता द्वारा चुने गए गतिशील रंगों के आउटपुट के अलावा, जैसा कि हमने किया, या संभवतः पृष्ठभूमि-छवियां (हालांकि अगर छवि सामग्री है , तो यह संभवतः imgटैग का उपयोग करने के लिए एक अच्छा तर्क है ), आपको गतिशील रूप से और क्या करने की आवश्यकता है?

अधिकांश डायनेमिक शैली में परिवर्तन अलग-अलग स्थैतिक सीएसएस दस्तावेजों का हवाला देकर किया जा सकता है ।

तो यह निश्चित रूप से संभव है, जैसा आपने सोचा था, लेकिन ऐसा करने के लिए बहुत सारे कारण नहीं हैं।


4

सीएसएस को गतिशील रूप से लोड करने के लिए दो अलग-अलग पहलू हैं ...

  1. सर्वर पर गतिशील रूप से CSS फ़ाइल बनाना

    यह काफी सीधा है, और बहुत सारी वेबसाइट ऐसा करती हैं। यदि आप अपने CSS को किसी शर्त के आधार पर बदलते हैं तो यह उपयोगी है। उदाहरण के लिए, यदि आप उपयोगकर्ता के भू स्थान के आधार पर अपनी साइट का विषय चुनते हैं।

  2. जेएस स्क्रिप्ट लोडर के माध्यम से मांग पर एक सीएसएस फ़ाइल लोड कर रहा है

    यह काम में आ सकता है यदि आप DOM का एक बड़ा हिस्सा गतिशील रूप से बनाते हैं और फिर आवश्यक शैलियों को लोड करते हैं। लेकिन लबों के लेखक के रूप में कहते हैं ...

    वास्तव में यह निर्धारित करना कि यदि डायनेमिक रूप से लोड सीएसएस फ़ाइल ने लोडिंग समाप्त कर दी है, वास्तव में क्रॉस-ब्राउज़र करने के लिए काफी जटिल और चुनौतीपूर्ण है। "लोड" घटनाओं में आग नहीं लगेगी क्योंकि कोई व्यक्ति उम्मीद / उम्मीद नहीं करेगा। इसलिए इस तरह के समर्थन को जोड़ने पर एक गैर-तुच्छ आकार एलएबीजे में जुड़ जाएगा


3
  1. हम ऐसा करते हैं। पुरे समय। विशेष रूप से सास एप्लिकेशन में ग्राहक-विशिष्ट ब्रांडिंग जैसी चीजों के लिए, जहां रंग आदि डेटाबेस से आते हैं।
  2. यह बहुत तेज़ है (उपयोगकर्ता के दृष्टिकोण से) तैनाती से पहले या आवेदन बूट के दौरान सीएसएस को पूर्व-उत्पन्न करने के लिए, यदि एप्लिकेशन में बूट चरण है। हम आम तौर पर जब भी संभव हो, स्थैतिक CSS फाइलों को प्री-जेनरेट करना पसंद करते हैं।
  3. अधिकतम गति (उपयोगकर्ता के दृष्टिकोण से) के लिए, एक सीडीएन के लिए स्थिर सीएसएस फ़ाइलों को वितरित करना और ब्राउज़र को सीडीएन से प्राप्त करना सबसे अच्छा है, बजाय आपके एप्लिकेशन सर्वर से। यह आम तौर पर केवल तभी संभव होता है जब सीएसएस फाइलें तैनाती से पहले या उसके दौरान पहले से तैयार की जा सकती हैं, और जहां तैनाती का हिस्सा सीडीएन के लिए पूर्व-उत्पन्न स्थिर सीएसएस फाइलों को वितरित कर रहा है। CDN अब बहुत सस्ते और उपयोग में आसान हैं - Amazon के CloudFront और Rackspace's Cloud Files को देखें।

1

क्या इसमें कैश की समस्या है? मुझे ऐसा नहीं लगता। स्क्रिप्ट को नो-कैश आदि भेजना चाहिए

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

अब वह कारण संभवतः क्या हो सकता है?

यदि आप विभिन्न मापदंडों के आधार पर एक शैली को बदलना चाहते हैं तो आप ऐसा करते हैं कि कई स्टाइलशीट रखने और सही को डाउनलोड करने के लिए HTML उत्पन्न करते हैं।


उदाहरण के लिए, मापदंडों के आधार पर विभिन्न स्टाइलशीट बनाना असहनीय हो सकता है, उदाहरण के लिए, तीन रंगों का एक संयोजन, प्रत्येक को 256 के पैलेट से चुना गया है। आप इन सभी को कवर करने के लिए 16 मिलियन स्टाइलशीट नहीं रखना चाहते हैं, क्या आप?
टेम्डमर्स

@ निर्माता: इसके लिए उपयोग-मामला क्या है? लगता है कि यह जावास्क्रिप्ट का उपयोग करके बेहतर हासिल किया जाएगा।
पीडी

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

1

डायनेमिक सीएसएस काफी तुच्छ है, और भले ही इसके अनुप्रयोग अधिक सीमित हैं (यह देखते हुए कि स्टेटिक स्टाइलशीट के साथ डायनामिक रूप से जेनरेट किया गया HTML अधिकांश दिन-प्रतिदिन की जरूरतों को हल करता है, और सीएसएस खुद अर्ध-गतिशील प्राप्त करने के लिए कुछ तंत्र शामिल करता है), 'मैं' मैंने कई मौकों पर इसका इस्तेमाल किया है, और जब भी मुझे जरूरत होती है, मैं खुद इनका इस्तेमाल करता हूं।

अक्सर, 'डायनेमिक' भाग कई स्टाइलशीट को एक में मिलाकर (HTTP अनुरोधों की संख्या को कम करने के लिए) और उन्हें न्यूनतम (बैंडविड्थ उपयोग को कम करने के लिए) करता है, लेकिन चर प्रतिस्थापन जैसी सरल चीजें (जैसे, रंगों के लिए चर का उपयोग करना शैली पत्रक) आपके जीवन को बहुत आसान बना सकता है। हालांकि, चूंकि सीएसएस में कुछ कैविटीज़ के साथ काफी सीधा सिंटैक्स होता है, सामान्य प्रयोजन टेक्स्ट प्रोसेसिंग सिस्टम या PHP जैसी स्क्रिप्टिंग भाषा आमतौर पर इसके लिए पर्याप्त होती है, यही कारण है कि आप कई सीएसएस-ऑफ़-शेल्फ सीएसएस प्रोसेसिंग सिस्टम नहीं देखते हैं।

हो सकता है कि आपने उन्हें जंगल में देखा हो, बिना उन्हें पहचाने। गतिशील स्क्रिप्ट भेजने वाले सर्वर आमतौर पर URL पुनर्लेखन का उपयोग करते हैं ताकि URL सांख्यिकीय रूप से सर्व की गई सामग्री से अप्रभेद्य हो जाए। यह आवश्यक है क्योंकि कुछ ब्राउज़र (सबसे विशेष रूप से IE) कुछ परिस्थितियों में सही MIME प्रकार का पता लगाने के लिए एक्सटेंशन पर भरोसा करते हैं, आपके द्वारा भेजे गए किसी भी सामग्री-प्रकार हेडर को अनदेखा (या खारिज) कर सकते हैं।

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


1

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

इसे देखने का एक और तरीका यह होगा कि "कोई और लड़का सभी दर्दनाक मैनुअल काम कर रहा है, वास्तव में मेरी समस्या नहीं है, आगे बढ़ रहा है।"

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.