2009-09-01 12 views
43

[यह this question से संबंधित है, लेकिन नहीं, क्योंकि यह ईमेल के बारे में नहीं है।]एचटीएमएल बॉडी में शैली और स्क्रिप्ट टैग ... क्यों नहीं?

कई मामलों में - खासकर जब एक सीएमएस या किसी और के ढांचे के साथ काम कर रहा है, यह <style> टैग और <script> टैग एम्बेड करने के लिए बहुत आसान है <head> की तुलना में <body> में। ऐसा लगता है कि आईई 6, आईई 7 (विंडोज़), फ़ायरफ़ॉक्स 3.x और सफारी (ओएस एक्स) में काम करता है।

कड़ाई से बोलना, क्या यह गलत है? और यदि ऐसा है, तो इसका क्या नकारात्मक परिणाम हो सकता है ... कुछ ग्राहकों में पूरी तरह अनदेखा होने से?

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

आप केंद्रीय सामग्री को केंद्रीकृत करते हैं। केंद्रीय स्टाइलशीट में बाकी सब कुछ फूट गया है।

+1

http://stackoverflow.com/questions/1213281/does-javascript-have-to-be-in-the-head-tags – Gumbo

उत्तर

26

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

Google, जो एचटीएमएल 5 spec प्रयास की ओर जाता है, साथ ही google.com को बनाए रखता है जो कि सीएसएस स्पेस के खिलाफ चयनकर्ता हैक्स का उपयोग करके उद्धरणों को छोड़कर, बाइट्स को बचाने के लिए चश्मे का उल्लंघन करता है, जिसमें स्क्रिप्ट टैग शामिल नहीं हैं या भाषा, और लिंक टैग किसी प्रकार के साथ। एक शुद्धवादी तर्क दे सकता है कि इंटरनेट पर सबसे अधिक उपयोग की जाने वाली साइटों में से एक चश्मा का उल्लंघन कर रहा है और गंभीर रूप से गलत तरीके से गलत होने के गंभीर खतरे में है। या, हम तर्क दे सकते हैं कि कोई ब्राउज़र लोकप्रिय उपयोग में प्रवेश नहीं करेगा जो इस तरह के व्यापक रूप से उपयोग किए जाने वाले हैक को प्रस्तुत नहीं कर सकता है।

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

* इस लेखन के अनुसार, शरीर में स्टाइल टैग फ़ायरफ़ॉक्स 3+, आईई 6 +, सफारी 2+, क्रोम 12+ में एचटीएमएल 5 डॉक्ट टाइप के साथ समर्थित हैं। समर्थन संभवतः पीछे की तरफ जाता है लेकिन उन ब्राउज़रों को शायद ही कभी इंटरवब्स पर देखा जाता है।

+7

जबकि मैं मानता हूं कि यह सबसे प्रासंगिक उत्तर है, मुझे लगता है कि यह मानने योग्य है कि उद्धरण सभी विशेषताओं पर वैकल्पिक हैं जब तक कि मूल्य में कोई सफेद स्थान/अवैध वर्ण नहीं है। – Sleavely

+0

अच्छा बिंदु - पिछली चश्मा ने इसकी अनुमति नहीं दी। इसमें खुदाई करने में एक टन लग गया (वे धारा 8 तक क्यों इंतजार करते हैं कि यह परिभाषित करने के लिए कि क्या विशेषता है?), लेकिन यहां यह कल्पना में है: http://www.w3.org/html/wg/drafts/html/ मास्टर/syntax.html # unquoted मतलब यह है कि अब भी spec में यह पूरी तरह से कानूनी है:

15

संदर्भ जिनमें <script> और <style> टैग का उपयोग किया जा सकता है, जिस प्रकार आप उपयोग कर रहे हैं उस पर निर्भर करता है। उदाहरण के लिए, मैं तुम्हें एचटीएमएल 5 doctype का उपयोग कर रहे मान लेंगे:

<!DOCTYPE html> 

script tag एचटीएमएल 5 doctype के तहत तीन संदर्भों है:

  1. कहाँ metadata content की उम्मीद है।
  2. जहां phrasing content अपेक्षित है।
  3. जहां script-supporting elements अपेक्षित हैं।

    1. तो scoped attribute अनुपस्थित है: जहां metadata content की उम्मीद है

    style tag एचटीएमएल 5 doctype के तहत लिए थोड़ी ज्यादा जटिल संदर्भ संरचना है।

  4. यदि scoped attribute अनुपस्थित है: noscript तत्व में जो head तत्व का बच्चा है।
  5. यदि scoped attribute मौजूद है: जहां flow content अपेक्षित है, लेकिन इंटर-एलिमेंट व्हाइटस्पेस और स्टाइल तत्वों के अलावा किसी अन्य प्रवाह सामग्री से पहले, और उस तत्व के बच्चे के रूप में नहीं, जिसका सामग्री मॉडल पारदर्शी है।

अनिवार्य रूप से, यह कहता है कि आप शरीर में स्टाइल टैग और स्क्रिप्ट टैग डाल सकते हैं, क्योंकि शरीर वह जगह है जहां हम प्रवाह सामग्री रखते हैं, और सामग्री को phrasing करते हैं।

हमेशा की तरह, आप जिस डॉक्टरेट का उपयोग कर रहे हैं उसके लिए spec से परामर्श लें।

2

ठीक है, आपको अपनी सामग्री में शैलियों और स्क्रिप्ट को सीधे एम्बेड करने की समस्या है। प्राथमिक मंत्र यहां DRY है (स्वयं को दोहराएं) सिद्धांत। आप कई स्थानों पर एक स्क्रिप्ट या विशेष शैली का उपयोग कर सकते हैं।जब उस शैली या स्क्रिप्ट को संशोधन की आवश्यकता होती है, तो अब आप उन सभी स्थानों के लिए एक स्कैनेंजर शिकार पर जाते हैं जहां वह कोड मौजूद है। एक सामान्य जगह में अपनी शैलियों और स्क्रिप्ट को रखना आदर्श है।

दूसरी ओर, यदि यह मामूली शैली का मुद्दा है (पिक्सेल पुशिंग या केवल एक दृश्य से संबंधित कुछ), तो शायद यह ठीक है।

+1

सत्य देखें, जाहिर है कि हम एक-ऑफ के बारे में बात कर रहे हैं। एक से अधिक स्थानों में उपयोग की जाने वाली चीजें केंद्रीकृत हैं। –

0

मेरी राय में सबसे बड़ी समस्या सुविधा है। यदि आप किसी पृष्ठ की शैली को बदलना चाहते हैं, तो ऐसा करना बहुत आसान है यदि सभी शैली और स्क्रिप्ट जानकारी एक क्षेत्र में है। <style> नोड में style गुण () या बाहरी फ़ाइल में (यानी <link rel='stylesheet' type='text/css' href='style.css' />) में शैली/स्क्रिप्ट जानकारी <style> नोड में हो सकती है। एक शैली हो सकती है कि सभी जगहों का शिकार करने की कोशिश करने के बजाय एक स्थिर स्थान का उपयोग करना बहुत आसान है।

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

+0

मैं असहमत हूं, पुनः: अंतिम बिंदु। एचटीएमएल और सीएसएस इतनी अप्रत्याशित है, आईएमओ, कि अगर मुझे किसी निश्चित ग्राहक के बारे में पता नहीं है, तो मेरी स्टाइल को अनदेखा करना अज्ञात तरीके से सम्मान करने से कहीं अधिक सुरक्षित हो सकता है। –

1

लेकिन आपके शरीर में style -tags क्यों होंगे? शैलियों वैश्विक हैं, इसलिए मुझे ऐसा करने के लिए कोई तार्किक कारण नहीं मिल रहा है।

चीजों को सरल और अलग करने के लिए आपको बाहरी स्टाइलशीट का भी उपयोग करना चाहिए।

लिपियों की अनुमति है, और एक कारण के लिए है: वे आउटपुट दे सकते हैं, उन्हें विशिष्ट समय और अन्य कारणों पर चलाना चाहिए।

+1

कुछ एमवीसी डेवलपर विशिष्ट स्टाइलशीट को उनके विचारों की सामग्री में लोड करते हैं, जो उन्हें किसी टेम्पलेट के बीच में और इस प्रकार शरीर में लगा सकता है। – Sampson

+1

फिर आपको या तो सब कुछ एक स्टाइलशीट (या स्टाइलशीट का एक सेट) में रखना चाहिए जो हमेशा शामिल होता है, या उस दृश्य के आधार पर एक स्टाइल शीट उत्पन्न करता है। यदि आपको प्रत्येक दृश्य के लिए अलग स्टाइलशीट की आवश्यकता है, तो आपने सीएसएस के बुनियादी सिद्धांतों में से एक को गलत समझा है। यह हमेशा एक निश्चित (सेट) स्टाइलशीट के साथ किया जाता है - अब ऐसा क्यों नहीं किया जा सकता है? –

+1

हमें इस वार्तालाप को सीमित करना चाहिए कि आप इसे कर सकते हैं या नहीं, मुझे लगता है। मैं, एक निश्चित दृष्टि पर, विशेष शैलियों को ग्लोबल नहीं बल्कि प्रति अनुच्छेद आधार पर, या प्रति पृष्ठ आधार पर कर सकता हूं।शैली का उपयोग शैली = "" विशेषता का उपयोग करने से कुछ हद तक अधिक पठनीय है। –

9

संक्षिप्त उत्तर:


विस्तृत जवाब:

STYLEhead.misc में होना परिभाषित किया गया है:

<!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- repeatable head elements --> 

और head.misc के तत्वों केवल के बच्चों रहने की अनुमति है HEAD तत्व। तो STYLE केवल HEAD तत्व के बच्चे होने की अनुमति है। परिभाषित किया गया है inline में होने की

<!ENTITY % special 
    "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO"> 

और विशेष:

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;"> 

इसके अतिरिक्त SCRIPT भी है

SCRIPThead.misc में और special में होना परिभाषित किया गया है BODY तत्व के बच्चे होने की अनुमति है। HEAD तत्व नाड में इनलाइन की अनुमति है। शरीर में शैली के लिए

+0

तो इसका मतलब क्या है कि अधिकांश ब्राउज़र शरीर में पार्स करते हैं? वैसे भी इसका इस्तेमाल नहीं किया जाना चाहिए? –

+0

@yar: हाँ, यह मानक का हिस्सा नहीं है और इस प्रकार इसका उपयोग नहीं किया जाना चाहिए हालांकि यह अधिकांश ब्राउज़रों में काम कर सकता है। – Gumbo

+0

नोट यह उत्तर HTML4 spec संदर्भित करता है जबकि @ सैम्पसन के संदर्भ एचटीएमएल 5 spec --- इसलिए छोटे अंतर। –

3

दो संभव जवाब:

  1. उपयोग इनलाइन स्टाइल। सच है, आप आंतरिक और बाहरी स्टाइल के फायदे खो देंगे, लेकिन अगर आपके पास हेडर तक पहुंच नहीं है, तो आपके पास हेडर तक पहुंच नहीं है।

  2. शैली तत्व में स्कॉप्ड विशेषता का उपयोग करें। यह एचटीएमएल 5 के लिए नया है, लेकिन विचार है कि पृष्ठ के एक हिस्से में सीएसएस के दायरे को सीमित करना है, उदाहरण के लिए एक एकल div। बुरी खबर यह है कि यह अभी तक समर्थित नहीं है (जुलाई 2011 तक), न ही यह पीछे की ओर संगत है। लेकिन वहां (कथित तौर पर) एक JQuery प्लगइन है जो मदद कर सकता है। अधिक जानकारी के लिए:

+0

+1 भविष्य में दिख रहा है! –

+0

जब मैंने देखा "विशेषता को वर्तमान विनिर्देश से हटा दिया गया है" रोने के करीब था - http://caniuse.com/#search=scoped देखें - जाहिर है कि उन्हें आधिकारिक तौर पर किसी भी समय आधिकारिक तौर पर पेश नहीं किया जाएगा। अभी तक, क्योंकि प्रत्येक ब्राउजर आने के लिए तैयारी कर रहा था, कहीं भी