क्या <STYLE> को HTML दस्तावेज़ के <HEAD> में होना चाहिए?


136

कड़ाई से बोलना, क्या styleटैग को headHTML दस्तावेज़ के अंदर होना चाहिए ? 4.01 मानक का तात्पर्य है, लेकिन यह स्पष्ट रूप से नहीं कहा गया है:

स्टाइल तत्व लेखकों को दस्तावेज़ के सिर में स्टाइल शीट नियमों को रखने की अनुमति देता है। HTML किसी दस्तावेज़ के HEAD अनुभाग में किसी भी संख्या में STYLE तत्वों की अनुमति देता है।

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


1
यदि आप संदेह में हैं, तो W3C मार्कअप सत्यापनकर्ता हमेशा मदद करता है :) http://validator.w3.org/
लाजो

'हेड <स्टाइल> में <head>' नियम का एक अपवाद HTML ईमेल है, क्योंकि कई वेबमेल सेवाएं किसी भी हेड एलिमेंट्स को हटा देंगी, जिसका अर्थ है कि आपकी शैली समाप्त हो गई है।
user132837 14

1
चश्मा की आवश्यकता होती है समर्थन करने के लिए ब्राउज़रों styleमें body, इतना है कि मेरे लिए काफी अच्छा है, क्या लेखक दिशानिर्देश वर्गों से गर्भित है की परवाह किए बिना।
व्रतकेनी २

जवाबों:


104

styleकेवल headदस्तावेज़ में शामिल होना चाहिए ।

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

HTML 5 ने एक scopedविशेषता पेश की जिसमें styleटैग को शरीर में हर जगह शामिल करने की अनुमति थी , लेकिन फिर उन्होंने इसे फिर से हटा दिया।


6
तिथि करने के लिए ऐसा लगता है कि केवल फ़ायरफ़ॉक्स scopedविशेषता का समर्थन करता है, caniuse.com/#feat=style-scoped देखें ।
Jaime Hablutzel

2
लिंक किए गए लेख लिंक रोट aether में गायब हो गया है, इसलिए यहाँ नवीनतम उपलब्ध संग्रहीत संस्करण है: web.archive.org/web/20150525042412/http://bluerobot.com/web/css/...
जाकारी मरे

@ZacharyMurray सिर के लिए धन्यवाद! मैंने शरीर में लिंक को वेब संग्रह एक में अपडेट किया है।
एस्टेबन कुबेर

1
इस युक्ति styleमें टैग का समर्थन करने के लिए ब्राउज़र की पुष्टि करने की आवश्यकता होती है, कल्पना bodyके लेखक भाग के बावजूद, मैं शरीर की शैलियों को मान्य मानता हूं। github.com/whatwg/html/issues/1605#issuecomment-235961103
WraithKenny

19

संक्षिप्त जवाब

  • वर्तमान युक्ति के अनुसार, हाँ, styleतत्वों को हमेशा अंदर होना चाहिएhead । कोई अपवाद नहीं हैं (एक styleतत्व के अंदर एक templateतत्व को छोड़कर , यदि आप उस गणना करना चाहते हैं)।

  • यह हमेशा ऐतिहासिक रूप से मामला नहीं रहा है। यदि आप युक्ति और उसके इतिहास के विवरण की परवाह करते हैं, तो पढ़ते रहें।

  • कोई फर्क नहीं पड़ता कल्पना कहते हैं, का उपयोग कर styleमें तत्वों body करता है सभी प्रमुख ब्राउज़रों में और अधिक या कम काम करते हैं। हालांकि, यह एक बुरा अभ्यास माना जाता है क्योंकि यह कल्पना का उल्लंघन करता है और क्योंकि यह खराब प्रतिपादन प्रदर्शन या "अस्थिर सामग्री के फ्लैश" जैसे अवांछनीय परिणाम पैदा कर सकता है।


विशिष्ट इतिहास

styleHTML 2 में तत्व मौजूद नहीं थे । उन्हें HTML 3.0 में पेश किया गया था, जहां उन्हें उन तत्वों की सूची में शामिल किया गया था जिन्हें द हेड एलिमेंट में शामिल किया जा सकता था , लेकिन उन तत्वों की सूची में शामिल नहीं किया गया था जो द बॉडी एलिमेंट में मौजूद हो सकते हैं । इस प्रकार, जिस समय तत्व को पहली बार निर्दिष्ट किया गया था, उसे केवल इसमें शामिल किया जा सकता था head

यह HTML 5 तक मामला (अलग-अलग शब्दों का उपयोग करके व्यक्त) बना रहा, जिसने तत्वों के scopedलिए (हटाए गए) विशेषता को पेश किया style। यह विशेषता, जब मौजूद थी, तो उस styleतत्व को शरीर में एक तत्व के भीतर रखने की अनुमति देने के लिए केवल उस तत्व के वंशज को स्टाइल करने की अनुमति थी । हालाँकि, उस विशेषता ने इसे कभी भी किसी वास्तविक ब्राउज़र में नहीं बनाया (कम से कम बिना डेवलपर फ्लैग के सक्षम होने की आवश्यकता नहीं थी) और इसे W3C और व्हाट्सऐप दोनों से हटा दिया गया था "कार्यान्वयनकर्ता की रुचि की कमी के कारण" । तत्पश्चात, styleतत्वों को केवल मेटाडेटा सामग्री की अनुमति देने वाले संदर्भों में अनुमति दी गई थी, जो केवल प्रमुख है। इस प्रकार हम HTML 5 के पहले के समान नियमों पर वापस आ गए थे।

हालांकि, दोनों कल्पना संगठनों द्वारा की गई एक त्रुटि के कारण, दोनों स्पेक्स में परिशिष्ट के रूप में शामिल तत्वों के एक गैर-मानक सूचकांक को हटाने के प्रतिबिंबित करने के लिए ठीक से अपडेट नहीं किया गया था scoped, जो इसे आदर्श कल्पना के साथ असंगत प्रदान करता है। मैंने इसे व्हाट्सएप और डब्लू 3 सी दोनों पर इंगित किया , और ऐसा अनजाने में गति की घटनाओं में सेट किया गया, जिससे दोनों चश्मा अलग हो गए।

मानक युक्ति और गैर-मानक सूचकांक के बीच असंगतता के लिए व्हाट्सएप का समाधान मेरे पैच को गैर-मानक सूचकांक को सही करने के लिए स्वीकार करना था ।

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

इस प्रकार, मार्च 2017 से, यह मामला था कि इस सवाल का आधिकारिक जवाब इस बात पर निर्भर करता था कि आपने किस मानक संगठन को सुनना चुना है। यदि आप (आमतौर पर अधिक सम्मानित) व्हाट्सएप कल्पना को सूचीबद्ध करते हैं, तो एक styleतत्व की अनुमति नहीं थी body। यदि आप डब्ल्यू 3 सी कल्पना में सूचीबद्ध हैं, तो इसे अनुमति दी गई थी, लेकिन अनुशंसित नहीं है।

इस मूर्खतापूर्ण स्थिति को समाप्त कर दिया गया (शायद कई अन्य ऐसी विसंगतियों की तरह) अप्रैल 2019 में W3C और WhatWG के बीच शांति संधि , जो इस बात पर सहमत थी कि व्हाट्सएप कल्पना एक सच्चा जीवित HTML मानक बन जाएगा, W3C के साथ केवल स्नैपशॉट को जारी करने से गिना जाता है। समानांतर में एक प्रतिस्पर्धा युक्ति विकसित करने के बजाय HTML विनिर्देशन। इस प्रकार, 2017 से डब्ल्यू 3 सी कांटा में परिवर्तन जो styleतत्वों को अनुमति देता है, bodyअब किसी भी मौजूदा युक्ति का हिस्सा नहीं है; यह इतिहास की एक जिज्ञासा मात्र है।

इसलिए, आज, हमें आधिकारिक तौर पर क्या अनुमति है यह निर्धारित करने के लिए केवल व्हाट्सएप कल्पना को देखने की जरूरत है । यह कहना है:

4.2.6। styleतत्त्व

श्रेणियाँ :

मेटाडेटा सामग्री

ऐसे तत्व जिनमें इस तत्व का उपयोग किया जा सकता है :

जहां मेटाडेटा सामग्री अपेक्षित है।
एक <noscript>तत्व में जो एक तत्व का एक बच्चा है <head>

एकल पृष्ठ युक्ति के माध्यम से CTRL- फ़िंग से पता चलता है कि एकमात्र तत्व जिसके सामग्री मॉडल में मेटाडेटा सामग्री शामिल है वह headतत्व है।

गैर मानक तत्वों का सूचकांक कि मैंने पहले भी पुष्टि फिक्सिंग है कि एक के लिए केवल तभी अनुमति माता-पिता का उल्लेख styleतत्व एक हैं headया noscriptतत्व।


18

हालांकि अन्य उत्तर सही हैं, मुझे आश्चर्य है कि किसी ने भी यह नहीं बताया है कि मानक शैलियों को बाहर से कहां खदेड़ते हैं head

यह वास्तव में headतत्व (और DTD में ) पर अनुभाग में है :

<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->

हाँ मैं जानता हूँ। DTD को पढ़ना मुश्किल है।

यह एकमात्र स्थान है जहां STYLEतत्व होता है, इसलिए स्पष्ट रूप से यह कहीं और अमान्य है।


6
मैं बहुत उलझा हुआ हूं।
dav_i

1
अब HTML5 का उपयोग करना चाहिए, जिसमें IIRC का कोई DTD नहीं है। एचटीएमएल 5 युक्ति अकेला कहता है कि क्या है या क्या नहीं है।
Jan Kyu Peblik

14

वे सिर के बाहर जाने वाले नहीं हैं, लेकिन वे वैसे भी काम करते हैं; हालांकि आप एक त्वरित झिलमिलाहट नोटिस कर सकते हैं। साइट को सिर के बाहर स्टाइल टैग के साथ मान्य नहीं होना चाहिए, लेकिन क्या यह वास्तव में मायने रखता है? इसके अलावा, लिंक टैग सिर के बाहर भी काम करते हैं, भले ही वे करने वाले न हों।


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

6
imo, शैलियों का प्रतिपादन = कार्य; कुछ भी मुश्किल नहीं है। उस अंतिम वाक्य को फिर से लिखना होगा; इसका कोई मतलब नही बनता। मैंने उल्लेख किया कि यह कैसे "सही" था जब मैंने कहा कि यह मान्य नहीं होगा, तो मुझे यह नहीं समझना चाहिए कि आपके पास उस वाक्य का क्या मतलब है।
geowa4

समस्या यह है कि भले ही वे है कर रहे हैं स्टाइल, आप सामग्री के बारे में कुछ झिलमिलाहट होगा जब उन styleरों में लात।
एस्टेबन कुबेर

2
जब तक स्टाइल टैग पहली बार शरीर में नहीं आता है
भूवि 4

घर पर यह कोशिश मत करो।
TechNyquist

3

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

मानक के साथ रहें और आप सुरक्षित हैं। बहुत बहस के लिए कितना सुरक्षित है।


3

HTML5.2 W3C सिफारिश, 14 दिसंबर 2017 (पहले नहीं मसौदा ऊपर कहा गया है) अब कहते हैं कि आप शामिल कर सकते हैं <style>

"शरीर में, जहां प्रवाह सामग्री अपेक्षित है।" (धारा 4.2.6)


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

2

एक शैली टैग कहीं भी लेकिन <head>W3C नियमों के साथ मान्य नहीं होगा।


2

इस साइट के अनुसार, HTML5.1 (ड्राफ्ट में) और WHATWG <style>टैग को शरीर में लगाने की अनुमति देता है:

http://www.html.am/tags/html-style-tag.cfm

यह भी लगता है कि ब्राउज़र द्वारा काफी समय से समर्थित है। इस StackOverflow उत्तर के अनुसार, Firefox 3+, IE6 +, Safari 2+ और Chrome 12+ इसका समर्थन करते हैं:

https://stackoverflow.com/a/10989663/297793


1

HTML 5.2 विनिर्देशन (ड्राफ्ट में) के अनुसार, स्टाइल टैग केवल एक दस्तावेज़ के प्रमुख में अनुमत है।

स्टाइल टैग पर HTML 5.2 ड्राफ्ट (अगस्त 18, 2016)

एक शैली तत्व दस्तावेज़ के प्रमुख में प्रदर्शित होने के लिए प्रतिबंधित है।


-1

आप हेड सेक्शन या बॉडी सेक्शन के अंदर या html टैग के बाहर भी स्टाइल टैग का उपयोग कर सकते हैं (आउट साइड html की अनुशंसा नहीं की जाती है)। वास्तविक समय परियोजनाओं में कई बार आप देख सकते हैं कि वे HTML टैग के बाहर शैली टैग का उपयोग करते हैं

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