আমার ধারণা এটি সীমিত প্রসঙ্গে যেমন একটি সমস্যা হতে পারে, উদাহরণস্বরূপ, প্রোগ্রামার নয় এমন ব্যবহারকারীদের দ্বারা ব্যবহৃত ওয়েব সিস্টেমে ডাব্লুওয়াইআইওয়াইওয়াইজি সম্পাদক , যা মানগুলি অনুসরণ করার সম্ভাবনাগুলিকে সীমিত করে। কখনও কখনও (TinyMCE এর মতো), এটি এমন একটি লিবা যা আপনার সামগ্রী / কোডকে একটি textareaট্যাগের মধ্যে রাখে , যা সম্পাদক হিসাবে একটি বড় হিসাবে রেন্ডার করা হয়div ট্যাগ । এবং কখনও কখনও, এটি এই সম্পাদকগুলির একটি পুরানো সংস্করণ হতে পারে।
আমি মনে করি যে:
- এই নন-প্রোগ্রামার ব্যবহারকারীদের সিস্টেমে কিছু সিএসএস বিধি অন্তর্ভুক্ত করার জন্য জিজ্ঞাসা করার জন্য সিস্টেম অ্যাডমিনগুলির (বা প্রতিষ্ঠানের ওয়েবদেব) সাথে একটি মুক্ত চ্যানেল নেই
stylesheets । প্রকৃতপক্ষে, অ্যাডমিনদের (বা ওয়েবদেবগণ) তাদের কাছে যে অনুরোধ থাকবে সেই সংখ্যার বিবেচনা করে এটি অযৌক্তিক হবে।
- এই সিস্টেমটি উত্তরাধিকারসূত্রে রয়েছে এবং এখনও HTML এর নতুন সংস্করণগুলিকে সমর্থন করে না।
কিছু ক্ষেত্রে, ব্যবহারের styleনিয়ম ছাড়াই , এটি একটি খুব দুর্বল ডিজাইনের অভিজ্ঞতা হতে পারে। সুতরাং, হ্যাঁ, এই ব্যবহারকারীদের কাস্টমাইজেশন প্রয়োজন। ঠিক আছে, তবে এই পরিস্থিতিতে কী সমাধান হবে? কোনও htmlপৃষ্ঠায় সিএসএস toোকানোর বিভিন্ন উপায় বিবেচনা করে , আমি মনে করি এই সমাধানগুলি:
প্রথম বিকল্প: আপনার সিসাদ্মকে জিজ্ঞাসা করুন
সিস্টেমের সিএসএসের কিছু বিধি অন্তর্ভুক্ত করার জন্য আপনার সিস্টেমের বিজ্ঞাপনকে জিজ্ঞাসা করুন stylesheets। এটি বাহ্যিক বা অভ্যন্তরীণ সিএসএস সমাধান হবে। যেমনটি ইতিমধ্যে বলা হয়েছে, এটি সম্ভব নাও হতে পারে।
২ য় বিকল্প: <link>চালু<body>
ব্যবহার করুন বহিস্থিত স্টাইল শীট উপর bodyট্যাগ, অর্থাত, ব্যবহার linkট্যাগ ভিতরে এলাকা এক্সেস আছে (যে হতে হবে, সাইটে ভিতরে bodyট্যাগ এবং নেই headট্যাগ)। কিছু উত্স বলছে এটি ঠিক আছে, তবে MDN এর মতো "একটি ভাল অনুশীলন নয়" :
একটি <link>উপাদানের ক্ষেত্রে পারেন ঘটতে পারে <head>বা <body>উপাদান উপর নির্ভর করে কিনা এটা একটি লিঙ্ক যে ধরনের থাকে শরীর-ঠিক আছে । উদাহরণস্বরূপ, stylesheetলিঙ্কের ধরণটি দেহ-ঠিক আছে, এবং তাই <link rel="stylesheet">দেহে অনুমোদিত। তবে এটি অনুসরণ করা ভাল অভ্যাস নয়; এটি আপনার <link>উপাদানগুলিকে আপনার দেহের সামগ্রী থেকে পৃথক করে আরও ভাল করে তোলে <head>।
কিছু অন্যান্য, w3schools<head> মত বিভাগে সীমাবদ্ধ :
দ্রষ্টব্য: এই উপাদানটি কেবলমাত্র প্রধান বিভাগে যায়, তবে এটি বেশ কয়েকবার প্রদর্শিত হতে পারে।
পরীক্ষামূলক
আমি এটি এখানে (ডেস্কটপ পরিবেশ, একটি ব্রাউজারে) পরীক্ষা করেছি এবং এটি আমার পক্ষে কাজ করে। একটি ফাইল তৈরি করুন 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ট্যাগ)। এই কি চার্লস স্যালভিয়া 's এবং SZ এর এখানে উত্তর চলেছেন। এই বিকল্পটি নির্বাচন করা, তাদের উদ্বেগ বিবেচনা করুন।
৪ র্থ, ৫ ম এবং 6th ষ্ঠ বিকল্প: জেএস উপায় ways
সতর্কতা এইগুলি <head>পৃষ্ঠার উপাদানটি পরিবর্তন করার সাথে সম্পর্কিত । হয়তো এটি প্রতিষ্ঠানের সিস্টেম প্রশাসকরা অনুমতি দেবেন না । সুতরাং, প্রথমে তাদের অনুমতি চাইতে সুপারিশ করা হয়।
ঠিক আছে, ধরুন অনুমতি দেওয়া হয়েছে, কৌশলটি অ্যাক্সেস করছে <head> । কিভাবে? জাভাস্ক্রিপ্ট পদ্ধতি।
চতুর্থ বিকল্প: নতুন <link>চালু<head>
এটি ২ য় বিকল্পের আরেকটি সংস্করণ। ব্যবহার করুন বহিস্থিত স্টাইল শীট উপর <head>ট্যাগ, অর্থাত, ব্যবহার <link>উপাদান বাহিরে এলাকা এক্সেস আছে (যে হতে হবে, সাইটে, না ভিতরে bodyট্যাগ এবং ভিতরে হ্যাঁ headট্যাগ)। এই সমাধানটি এমডিএন এবং ডাব্লু 3 স্কুলগুলির সুপারিশগুলি মেনে চলে , যেমন উপরে উল্লিখিত হিসাবে ২ য় বিকল্প সমাধানে। একটি নতুন Linkঅবজেক্ট তৈরি করা হবে।
জেএসের মাধ্যমে বিষয়টি সমাধানের জন্য, অনেকগুলি উপায় রয়েছে তবে নীচের কোডলাইনগুলিতে আমি একটি সহজ দেখায়।
পরীক্ষামূলক
আমি এটি এখানে (ডেস্কটপ পরিবেশ, একটি ব্রাউজারে) পরীক্ষা করেছি এবং এটি আমার পক্ষে কাজ করে। একটি ফাইল তৈরি করুন 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);
এবং তারপরে সিএসএস ফাইলে একই ডিরেক্টরিতে বলা হয় bar.css(২ য় বিকল্প হিসাবে):
.test1 {
color: green;
};
যেমনটি আমি ইতিমধ্যে বলেছি: আপনি যদি সিস্টেম সিস্টেমে কোনও সিএসএস ফাইল আপলোড করেন তবে এটি কেবল সম্ভব হবে।
5 তম বিকল্প: নতুন <style>চালু<head>
নতুন ব্যবহার করুন অভ্যন্তরীণ শৈলী পত্রক উপর <head>ট্যাগ, অর্থাত, একটি নতুন ব্যবহার <style>উপাদান বাহিরে এলাকা এক্সেস আছে (যে হতে হবে, সাইটে ভিতরে না bodyট্যাগ এবং ভিতরে হ্যাঁ headট্যাগ)। একটি নতুন Styleঅবজেক্ট তৈরি করা হবে।
এটি জেএসের মাধ্যমে সমাধান করা হয়। একটি সহজ উপায় নিম্নলিখিত প্রদর্শিত হয়।
পরীক্ষামূলক
আমি এটি এখানে (ডেস্কটপ পরিবেশ, একটি ব্রাউজারে) পরীক্ষা করেছি এবং এটি আমার পক্ষে কাজ করে। একটি ফাইল তৈরি করুন 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);
6th ষ্ঠ বিকল্প: একটি বিদ্যমান ব্যবহার করে <style> করে<head>
একটি বিদ্যমান ব্যবহার করুন অভ্যন্তরীণ শৈলী পত্রক উপর <head>ট্যাগ, অর্থাত্, একটি ব্যবহার <style>উপাদান বাহিরে এলাকা এক্সেস আছে (যে হতে হবে, সাইটে, না ভিতরে bodyট্যাগ এবং হ্যাঁ ভিতরে headট্যাগ), কিছু যদি উপস্থিত থাকে। একটি নতুন Styleঅবজেক্ট তৈরি করা হবে বা একটি CSSStyleSheetঅবজেক্ট ব্যবহার করা হবে (এখানে গৃহীত সমাধানের কোডটিতে)।
এটি ঝুঁকিপূর্ণ দেখার এক পর্যায়ে।
প্রথমত , কারণ এটিতে কোনও <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অবজেক্ট ব্যবহার করছে ( ডাব্লু 3 স্কুল এবং এমডিএন )) তবে এটি সিস্টেমের সিএসএসে বিদ্যমান নিয়মগুলিকে ওভাররাইড করার ঝুঁকি বিবেচনা করে আকর্ষণীয় হতে পারে না।
সপ্তম বিকল্প: ইনলাইন সিএসএস
ইনলাইন সিএসএস ব্যবহার করুন । এটি সমস্যার সমাধান করে, যদিও পৃষ্ঠার আকারের উপর নির্ভর করে (কোড লাইনে), কোডটির রক্ষণাবেক্ষণ (নিজেই লেখক বা অন্য নির্ধারিত ব্যক্তির দ্বারা) খুব কঠিন হতে পারে।
তবে প্রতিষ্ঠানে আপনার ভূমিকার প্রসঙ্গে বা তার ওয়েব সিস্টেম সুরক্ষা নীতিগুলির উপর নির্ভর করে এটি আপনার কাছে অনন্য উপলব্ধ সমাধান হতে পারে।
পরীক্ষামূলক
একটি ফাইল তৈরি করুন _foobar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 style="color: green;">Hello</h1>
<h1 style="color: blue;">World</h1>
</body>
</html>
গাগন কর্তৃক জিজ্ঞাসিত প্রশ্নের কঠোর জবাব দেওয়া
কীভাবে ব্রাউজারের সিএসএস রেন্ডার করার কথা হয় যা অবিসংবাদযুক্ত?
- কোনও পৃষ্ঠায় সমস্ত CSS শৈলী ব্যবহার করে কোনও ডেটা স্ট্রাকচার তৈরি করার এবং রেন্ডারিংয়ের জন্য এটি ব্যবহার করার কথা কি?
- অথবা এটি শৃঙ্খলা সম্পর্কিত তথ্যটি দেখতে ক্রমে ব্যবহার করে রেন্ডার করে?
(উদ্ধৃতি অভিযোজিত)
আরও সঠিক উত্তরের জন্য, আমি Google এই নিবন্ধগুলিতে পরামর্শ দিচ্ছি:
- ব্রাউজারগুলি কীভাবে কাজ করে: আধুনিক ওয়েব ব্রাউজারগুলির নেপথ্যে
- রেন্ডার-ট্রি নির্মাণ, লেআউট এবং পেইন্ট
- ওয়েবপেজটি "রেন্ডার" করার অর্থ কী?
- ব্রাউজার রেন্ডারিং কীভাবে কাজ করে - পর্দার আড়ালে
- রেন্ডারিং - এইচটিএমএল স্ট্যান্ডার্ড
- 10 রেন্ডারিং - এইচটিএমএল 5