मुझे लगता है कि यह सीमित संदर्भों के बारे में एक मुद्दा हो सकता है, उदाहरण के लिए एक वेब सिस्टम पर WYIWYG संपादकों का उपयोग किया जाता है , जो प्रोग्रामर उपयोगकर्ताओं द्वारा उपयोग नहीं किया जाता है , जो मानकों के पालन की संभावनाओं को सीमित करता है। कभी-कभी (TinyMCE की तरह), यह एक ऐसा textareaटैग है जो आपकी सामग्री / कोड को टैग के अंदर रखता है , जिसे संपादक द्वारा एक बड़े divटैग के रूप में प्रस्तुत किया जाता है । और कभी-कभी, यह इन संपादकों का पुराना संस्करण हो सकता है।
मैं मान रहा हूँ कि:
- ये नहीं-प्रोग्रामर उपयोगकर्ताओं के पास सिस्टम एडिंस (या संस्थान के वेबदेव) के साथ एक खुला चैनल नहीं है, सिस्टम के कुछ सीएसएस नियमों को शामिल करने के लिए कहने के लिए
stylesheets। वास्तव में, यह इस तरह से अनुरोधों की संख्या को देखते हुए कि वे होगा, इस तरह के प्रवेशकों (या वेबदेवों) के लिए अव्यावहारिक होगा।
- यह प्रणाली विरासत है और अभी भी HTML के नए संस्करणों का समर्थन नहीं करती है।
कुछ मामलों में, उपयोग के styleनियमों के बिना , यह बहुत खराब डिजाइन अनुभव हो सकता है। तो, हाँ, इन उपयोगकर्ताओं को अनुकूलन की आवश्यकता है। ठीक है, लेकिन इस परिदृश्य में, समाधान क्या होगा? एक htmlपृष्ठ में सीएसएस डालने के विभिन्न तरीकों को ध्यान में रखते हुए , मुझे लगता है कि ये समाधान हैं:
पहला विकल्प: अपने sysadm से पूछें
सिस्टम में कुछ सीएसएस नियमों को शामिल करने के लिए अपने सिस्टम की प्रशंसा के लिए पूछें stylesheets । यह एक बाहरी या आंतरिक सीएसएस समाधान होगा। जैसा कि पहले ही कहा गया है, यह संभव नहीं हो सकता है।
दूसरा विकल्प: <link> पर<body>
टैग पर बाहरी शैली की शीट का उपयोग करें body, अर्थात, आपके द्वारा उपयोग किए गए क्षेत्र के अंदरlink टैग का उपयोग करें (जो कि साइट पर होगा, टैग के अंदर और टैग में नहीं )। कुछ सूत्रों का कहना है कि यह ठीक है, लेकिन "अच्छा अभ्यास नहीं", जैसेbodyhead एमडीएन :
एक <link>तत्व या तो तत्व <head>या <body>तत्व में हो सकता है , यह इस बात पर निर्भर करता है कि क्या उसका लिंक प्रकार शरीर-ठीक है । उदाहरण के लिए, stylesheetलिंक प्रकार शरीर-ठीक है, और इसलिए <link rel="stylesheet">शरीर में इसकी अनुमति है। हालांकि, यह पालन करने के लिए एक अच्छा अभ्यास नहीं है; यह आपके को अलग करने के लिए अधिक समझ में आता है<link> तत्वों को आपके शरीर की सामग्री से है, उन्हें अंदर डाल रहा है <head>।
कुछ अन्य, इसे <head>अनुभाग में प्रतिबंधित करते हैं , जैसे w3schools :
ध्यान दें: यह तत्व केवल हेड सेक्शन में जाता है, लेकिन यह किसी भी समय दिखाई दे सकता है।
परिक्षण
मैंने इसे यहां (डेस्कटॉप वातावरण, एक ब्राउज़र पर) परीक्षण किया और यह मेरे लिए काम करता है। एक फ़ाइल बनाएँ foo.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<link href="bar.css" type="text/css" rel="stylesheet">
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
</body>
</html>
और फिर एक सीएसएस फ़ाइल, उसी निर्देशिका में, जिसे कहा जाता है bar.css:
.test1 {
color: green;
};
ठीक है, यह सिर्फ तभी संभव होगा जब आपके पास संस्था प्रणाली में कहीं सीएसएस फ़ाइल अपलोड हो। शायद यह मामला होगा।
तीसरा विकल्प: <style>पर<body>
टैग पर इंटरनेट स्टाइल शीट का उपयोग करें body, यानी, styleआपके पास जिस क्षेत्र में पहुंच है, उसके अंदर bodyटैग का उपयोग करें (जो साइट पर, टैग के अंदर और टैग में नहीं होगा head)। यह वही है जिसके बारे में चार्ल्स साल्विया और एसजे के उत्तर यहां दिए गए हैं। इस विकल्प को चुनना, उनकी चिंताओं पर विचार करें।
4 वें, 5 वें और 6 वें विकल्प: जेएस तरीके
चेतावनी ये <head>पृष्ठ के तत्व को संशोधित करने से संबंधित हैं । हो सकता है कि संस्थान के सिस्टम प्रशासकों द्वारा इसकी अनुमति नहीं होगी । इसलिए, उन्हें पहले अनुमति मांगने की सलाह दी जाती है।
ठीक है, दी गई अनुमति को दबाते हुए, रणनीति तक पहुंच है <head> । कैसे? जावास्क्रिप्ट विधियों।
चौथा विकल्प: नया <link>पर<head>
यह दूसरा विकल्प का दूसरा संस्करण है। टैग पर बाहरी शैली की शीट का उपयोग करें <head>, अर्थात, आपके द्वारा उपयोग किए जाने वाले क्षेत्र के बाहर<link> तत्व का उपयोग करें (जो कि साइट पर होगा, टैग के अंदर नहीं और टैग के अंदर हां )। यह समाधान MDN और w3schools की सिफारिशों का अनुपालन करता है , जैसा कि ऊपर बताया गया है, दूसरा विकल्प समाधान पर। एक नई वस्तु बनाई जाएगी।bodyheadLink
जेएस के माध्यम से मामले को हल करने के लिए, कई तरीके हैं लेकिन निम्नलिखित कोडलाइन पर मैं एक सरल प्रदर्शित करता हूं।
परिक्षण
मैंने इसे यहां (डेस्कटॉप वातावरण, एक ब्राउज़र पर) परीक्षण किया और यह मेरे लिए काम करता है। एक फ़ाइल बनाएँ f.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
scriptटैग के अंदर :
var newLink = document.createElement("link");
newLink.href = "bar.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newLink);
और फिर CSS फ़ाइल में, उसी निर्देशिका में, जिसे bar.css(दूसरे विकल्प पर) कहा जाता है :
.test1 {
color: green;
};
जैसा कि मैंने पहले ही कहा है: यह केवल तभी संभव होगा जब आपके पास संस्था प्रणाली में कहीं सीएसएस फ़ाइल अपलोड हो।
5 वां विकल्प: नया <style>ऑन<head>
टैग पर नई आंतरिक शैली शीट का उपयोग करें <head>, अर्थात, आपके पास पहुंच वाले क्षेत्र के बाहर एक नए <style>तत्व का उपयोग करें (जो साइट पर होगा, टैग के अंदर नहीं और टैग के अंदर हां )। एक नई वस्तु बनाई जाएगी।bodyheadStyle
इसे JS के माध्यम से हल किया गया है। एक सरल तरीका निम्नलिखित दर्शाया गया है।
परिक्षण
मैंने इसे यहां (डेस्कटॉप वातावरण, एक ब्राउज़र पर) परीक्षण किया और यह मेरे लिए काम करता है। एक फ़ाइल बनाएँ foobar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
scriptटैग के अंदर :
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {"+
"color: green;"+
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
6 विकल्प: किसी मौजूदा का उपयोग कर <style>पर<head>
टैग पर मौजूदा आंतरिक शैली की शीट का उपयोग करें <head>, अर्थात, आपके पास पहुंच वाले क्षेत्र के बाहर एक <style>तत्व का उपयोग (जो साइट पर होगा, टैग के अंदर नहीं और हां टैग के अंदर ), यदि कुछ मौजूद है। एक नई वस्तु बनाई जाएगी या एक वस्तु का उपयोग किया जाएगा (यहां अपनाए गए समाधान के कोड में)।bodyheadStyleCSSStyleSheet
यह जोखिम भरा है।
पहला , क्योंकि यह किसी <style> वस्तु में मौजूद नहीं हो सकता है । इस समाधान को लागू करने के तरीके के आधार पर, आपको undefinedरिटर्न मिल सकता है (सिस्टम बाहरी स्टाइल शीट का उपयोग कर सकता है )।
दूसरा , क्योंकि आप सिस्टम डिज़ाइन लेखक के काम (लेखक के मुद्दों) का संपादन करेंगे।
तीसरा , क्योंकि यह आपके संस्थान की सुरक्षा की आईटी राजनीति में अनुमति नहीं दी जा सकती है। तो, ऐसा करने के लिए अनुमति मांगें (अन्य जेएस समाधान में) ।
मान लेना, फिर से अनुमति मिल गई:
आप इस तरह से करने के लिए विधि उपलब्ध कुछ प्रतिबंध पर विचार करना होगा: insertRule()। प्रस्तावित समाधान डिफ़ॉल्ट परिदृश्य का उपयोग करता है, और पहली बार एक ऑपरेशन stylesheet, अगर कुछ मौजूद है।
परिक्षण
मैंने इसे यहां (डेस्कटॉप वातावरण, एक ब्राउज़र पर) परीक्षण किया और यह मेरे लिए काम करता है। एक फ़ाइल बनाएँ foo_bar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
scriptटैग के अंदर :
function demoLoop(){ // remove this line
var elmnt = document.getElementsByTagName("style");
if (elmnt.length === 0) {
// there isn't style objects, so it's more interesting create one
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {" +
"color: green;" +
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
} else {
// Using CSSStyleSheet interface
var firstCSS = document.styleSheets[0];
firstCSS.insertRule("h1.test2{color:blue;}"); // at this way (without index specified), will be like an Array unshift() method
}
} // remove this too
demoLoop(); // remove this too
demoLoop(); // remove this too
इस समाधान के लिए एक और दृष्टिकोण यह CSSStyleDeclarationऑब्जेक्ट ( w3schools और MDN पर डॉक्स ) का उपयोग कर रहा है । लेकिन यह दिलचस्प नहीं हो सकता है, सिस्टम के सीएसएस पर मौजूदा नियमों को ओवरराइड करने के जोखिम को देखते हुए।
7 वां विकल्प: इनलाइन सीएसएस
इनलाइन सीएसएस का उपयोग करें । यह समस्या को हल करता है, हालांकि पृष्ठ आकार (कोड लाइनों में) के आधार पर, कोड के रखरखाव (लेखक स्वयं या अन्य असाइन किए गए व्यक्ति द्वारा) बहुत मुश्किल हो सकता है।
लेकिन संस्थान, या इसकी वेब सिस्टम सुरक्षा नीतियों में आपकी भूमिका के संदर्भ के आधार पर, यह आपके लिए अद्वितीय उपलब्ध समाधान हो सकता है।
परिक्षण
एक फ़ाइल बनाएँ _foobar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 style="color: green;">Hello</h1>
<h1 style="color: blue;">World</h1>
</body>
</html>
गगन द्वारा पूछे गए प्रश्न का कड़ाई से उत्तर देना
एक ब्राउज़र को css प्रदान करने वाला कैसे माना जाता है जो कि गैर सन्निहित है?
- क्या यह एक पृष्ठ पर सभी सीएसएस शैलियों का उपयोग करके कुछ डेटा संरचना उत्पन्न करना है और इसका उपयोग करना है?
- या यह शैली जानकारी का उपयोग करके प्रस्तुत करता है जिस क्रम में यह देखता है?
(बोली अनुकूलित)
अधिक सटीक उत्तर के लिए, मैं Google को ये लेख सुझाता हूं:
- ब्राउज़र कैसे काम करता है: आधुनिक वेब ब्राउज़रों के दृश्यों के पीछे
- रेंडर-ट्री कंस्ट्रक्शन, लेआउट और पेंट
- एक वेबपेज पर "रेंडर" करने का क्या मतलब है?
- ब्राउज़र रेंडरिंग कैसे काम करता है - पर्दे के पीछे
- प्रतिपादन - HTML मानक
- 10 प्रतिपादन - एचटीएमएल 5