উত্তর:
ব্রাউজার রেন্ডারিং সম্পর্কে jdelStrother ডাব্লু 3 স্পেস এবং এআরটিস্টুডিও সম্পর্কে যা উল্লেখ করেছে তার সাথে কেবল যুক্ত করুন।
এটি প্রস্তাবিত কারণ আপনি যখন সিএসএস <body>শুরু হওয়ার আগে ঘোষণা করেছেন তখন আপনার স্টাইলগুলি ইতিমধ্যে ইতিমধ্যে লোড হয়েছে। তাই খুব দ্রুত ব্যবহারকারীরা তাদের স্ক্রিনে কিছু উপস্থিত হতে দেখেন (যেমন পটভূমির রঙ)। যদি তা না হয়, সিএসএস ব্যবহারকারীর কাছে পৌঁছানোর আগে ব্যবহারকারীরা কিছু সময়ের জন্য ফাঁকা স্ক্রিন দেখতে পান।
এছাড়াও, আপনি যদি স্টাইলগুলি কোথাও রেখে যান <body>, ব্রাউজারটিকে ঘোষিত শৈলীগুলি বিশ্লেষণ করার পরে পৃষ্ঠাটি পুনরায় রেন্ডার করতে হবে (লোড করার সময় নতুন এবং পুরানো)।
linkএবং styleএগুলি স্কোপড (স্টাইল) না দেওয়া হয় বা এ্যাট্রিবিউট itemprop(লিঙ্ক) ঘোষণা না করা পর্যন্ত অবশ্যই দেহে উপস্থিত হবে না ।
styleএটি এইচটিএমএল 5 এবং এইচটিএমএল 4.1 এর প্রবাহ উপাদান (এটি স্কোপযুক্ত না হলেও) এবং এটি শরীরে রাখা যেতে পারে।
scopedবৈশিষ্ট্যটি বাতিল করা হয়েছে।
এইচটিএমএল স্পেকের অতি সাম্প্রতিক সংস্করণগুলি এখন <style>শরীরের উপাদানগুলির মধ্যে থাকা ট্যাগকে অনুমতি দেয় । https://www.w3.org/TR/html5/dom.html#scoped ف্লো-কনটেন্ট
এছাড়াও যে বৈশিষ্ট্যটিতে একটি styleট্যাগ থাকার পূর্বশর্ত ব্যবহৃত হত bodyতা এখন অপ্রচলিত।
এর অর্থ, আপনি এটি ব্যবহার করতে পারেন style জায়গাতেই ট্যাগটি করতে পারেন, ব্রাউজারটি পৃষ্ঠা ট্রিতে আরও একবার নীচে শৈলীতে আঘাত করলে একবারে সম্ভাব্য পুনর্বিবেচনা / পুনরায় রঙের কারণে শুধুমাত্র পাতার কার্যকারিতা হ্রাস পায়।
অপ্রচলিত উত্তর:
<style>ট্যাগের মধ্যে অনুমোদিত নয় <body>W3 চশমা অনুযায়ী। (আপনি অবশ্যই <div style="color:red">প্রয়োজনের মাধ্যমে ইনলাইন স্টাইল প্রয়োগ করতে পারেন, তবে এটি সাধারণত স্টাইল এবং সামগ্রীর দুর্বল পৃথকীকরণ হিসাবে বিবেচনা করা হয়)
<style>এটি এইচটিএমএল 5 এবং 4.1 এর একটি প্রবাহ উপাদান এবং শরীরে (অন্যান্য সমস্ত প্রবাহ উপাদান হিসাবে) রেখে দেওয়া যেতে পারে।
সিএসএস শরীরে রাখার অর্থ এটি পরে লোড হয়। এটি এমন একটি কৌশল যা ব্রাউজারটি ইন্টারফেসটি দ্রুত অঙ্কন শুরু করতে দেয় (যেমন এটি একটি ব্লকিং পদক্ষেপ সরিয়ে দেয়)। এটি স্মার্টফোনগুলির ব্যবহারকারীর অভিজ্ঞতার জন্য গুরুত্বপূর্ণ।
আমি একটি ছোট সিএসএস রাখার জন্য যথাসাধ্য চেষ্টা করি <head>এবং আমি বাকীটিকে নীচে রেখে যাই। উদাহরণস্বরূপ, যদি কোনও পৃষ্ঠা জিক্যুরি ইউআই সিএসএস ব্যবহার করে তবে আমি সবসময় <body>জিকুয়ের জাভাস্ক্রিপ্টের লিঙ্কগুলির ঠিক আগে, এর নীচে চলে যাই । কমপক্ষে, সমস্ত জিকোয়ারি আইটেম ইতিমধ্যে আঁকা যেতে পারে।
হেডটির জন্য নকশা করা হয়েছে (ডাব্লু 3 সি উদ্ধৃত):
"বর্তমান নথির তথ্য যেমন এর শিরোনাম, কীওয়ার্ড যা অনুসন্ধান ইঞ্জিনগুলির জন্য দরকারী হতে পারে এবং অন্যান্য ডেটা যা নথির সামগ্রী হিসাবে বিবেচিত হয় না "
এইচটিএমএল ডকুমেন্টের গ্লোবাল কাঠামো দেখুন । সিএসএস যেহেতু ডকুমেন্ট সামগ্রী নয়, এটি অবশ্যই মাথায় থাকা উচিত।
এছাড়াও অন্যান্য প্রতিটি ওয়েব বিকাশকারী এটি সেখানে দেখার প্রত্যাশা করবে, সুতরাং এটি কাজ করে এমনকি শরীরে রেখে জিনিসগুলিকে বিভ্রান্ত করবেন না!
আপনার শরীরে থাকা কেবলমাত্র সিএসএস হ'ল ইনলাইন সিএসএস , যদিও আমি সাধারণত ইনলাইন স্টাইলগুলি এড়িয়ে চলে।
মানগুলি ( এইচটিএমএল 4.01: শৈলী উপাদান ) স্পষ্টভাবে নির্দিষ্ট করে যে শৈলী ট্যাগটি কেবলমাত্র হেড ট্যাগের অভ্যন্তরে অনুমোদিত। আপনি যদি বডি ট্যাগে স্টাইল ট্যাগ রাখেন তবে ব্রাউজারগুলি যদি সম্ভব হয় তবে এটিকে সর্বোত্তম করার চেষ্টা করবে।
আপনি যদি কোনও কঠোর নথি প্রকার নির্দিষ্ট করে থাকেন তবে এটি সম্ভব যে কোনও ব্রাউজার শরীরে কোনও স্টাইল ট্যাগকে উপেক্ষা করবে। কোনও বর্তমান ব্রাউজার এটি করে কিনা তা আমি জানি না, তবে আপনি শৈলীর উপাদানটি কোথায় রাখবেন সে সম্পর্কে ভবিষ্যতের সমস্ত সংস্করণটি এত স্বাচ্ছন্দ্য বোধ করি না।
styleট্যাগগুলিতে শরীরে যদি তাদের কোনও scopedবৈশিষ্ট্য থাকে তা অনুমোদিত হয় ।
যদিও styleদেহে ট্যাগটির অনুমতি নেই তবে linkট্যাগটি হ'ল যতক্ষণ আপনি বাহ্যিক স্টাইলশিটটি উল্লেখ করছেন ততক্ষণ সমস্ত ব্রাউজারগুলিতে সিএসএস সঠিকভাবে রেন্ডার করা উচিত এবং ব্যবহার করা উচিতbody ।
সূত্র: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
পূর্ববর্তী উত্তরগুলি ছাড়াও, যদিও উপাদানটির ভিতরে স্টাইল কোড ব্লক স্থাপন করা আধুনিক ব্রাউজারগুলিতে কাজ করতে পারে (যদিও এটি এখনও এটি সঠিক করে না), সর্বদা একটি বিপদ রয়েছে, বিশেষত পুরানো ব্রাউজারগুলির সাথে ব্রাউজারটি কোডটি রেন্ডার হিসাবে কোডটি রেন্ডার করবে always স্টাইল বিভাগটি সিডিএটিএ বিভাগে অন্তর্ভুক্ত না করা পর্যন্ত।
অবশ্যই ইনলাইন স্টাইলগুলি বাদ দিয়ে উপাদানটির ভিতরে রেখে অন্য জিনিসটি হ'ল এটি ডাব্লু 3 সি এইচটিএমএল / এক্সএইচটিএমএল স্প্যাকের সাথে দেখা করে না যে এটি শরীরের মধ্যে থাকা কোনও পৃষ্ঠা ডাব্লু 3 সি বৈধকরণকারীর সাথে ব্যর্থ হবে। আপনার সমস্ত কোড বৈধ হয়, ভুলগুলি চিহ্নিত করা সহজ করে তোলে, অপ্রত্যাশিত ডিসপ্লে সমস্যাগুলি বগ হান্ট করা সর্বদা সহজ। কোনও অবৈধ এইচটিএমএল উপাদান কোডে যেখানেই ঘটেছিল তার বাইরে যে কোনও এবং সমস্ত উপাদানগুলির রেন্ডিংকে বিরূপভাবে প্রভাবিত করতে পারে, তাই আপনি যেখানে থাকা উচিত নয় এমন জায়গাগুলি থাকা অপ্রত্যাশিত প্রভাবগুলি পেতে পারেন, কারণ যখন কোনও ব্রাউজার কোনও অবৈধ উপাদান খুঁজে পায়, কেবল এটি এটি কীভাবে এটি প্রদর্শিত হবে সে সম্পর্কে এটি সর্বোত্তম অনুমান করে এবং বিভিন্ন ব্রাউজারগুলি কীভাবে এটি রেন্ডার করে তা বিভিন্ন সিদ্ধান্ত নিতে পারে।
আপনি কোনও ট্রানজিশনাল বা কঠোর ডক্টাইপ ব্যবহার করুন না কেন, এটি এখনও (এক্স) এইচটিএমএল স্প্যাস অনুযায়ী অবৈধ।
আপনি আসলে শরীরে শৈলীগুলি রেখে সিএসএস ব্যবহারের উদ্দেশ্যকে পরাস্ত করবেন। মূল বিষয়টি উপস্থাপনা (এবং ফাংশন) থেকে সামগ্রী আলাদা করা হবে। এইভাবে, স্টাইলের যে কোনও পরিবর্তন বিষয়বস্তুতে নয়, স্টাইলশিটে করা যেতে পারে। একবার আপনি ইনলাইন স্টাইল পদ্ধতিটি ব্যবহার করেন, প্রতিটি পৃষ্ঠার ইনলাইন স্টাইলিংয়ের একে একে একে পরিবর্তন করা দরকার। ক্লান্তিকর এবং ঝুঁকিপূর্ণ যেহেতু আপনি কোনও পৃষ্ঠা বা তিন বা দশটি মিস করতে পারেন।
একটি স্টাইলশিট ব্যবহার করে, আপনাকে কেবল স্টাইলশিট পরিবর্তন করতে হবে; পরিবর্তনগুলি স্টাইলশিটের সাথে লিঙ্কযুক্ত প্রতিটি HTML পৃষ্ঠায় স্বয়ংক্রিয়ভাবে প্রচার করে।
নব্যবলের বিষয়টিও অন্য এক দুর্দান্ত কারণ; আপনি যদি সিএসএস ইনলাইন যোগ করে এইচটিএমএলকে বিশৃঙ্খলা করেন তবে রেন্ডারিং একটি সমস্যা হয়ে যায়। এইচটিএমএল আপনার কোডটিতে ব্যতিক্রম ছুঁড়ে না। পরিবর্তে এটি বাইরে যায় এবং এটি এটি সেরা উপস্থাপন করে এবং এগিয়ে যায়।
স্টাইলশীট ব্যবহার করে ওয়েব মান মেনে চলা আরও ভাল ওয়েবসাইট তৈরি করে। এবং যখন আপনার সাহায্যের প্রয়োজন কারণ আপনার পৃষ্ঠায় থাকা জিনিসগুলি আপনি চান ঠিক সেভাবে নয়, শরীরের বিপরীতে নিজের সিএসএস মাথায় রেখে নিজের দ্বারা এবং যার কাছে আপনি যাহার কাছে সহায়তা চান তার পক্ষে আরও ভাল সমস্যার সমাধান করা যায়।
দুটি বিতর্কিত উত্তর:
লিঙ্ক ট্যাগের MDN পৃষ্ঠা থেকে :
একটি
<link>উপাদানের ক্ষেত্রে পারেন ঘটতে পারে<head>বা<body>উপাদান উপর নির্ভর করে কিনা এটা একটি লিঙ্ক প্রকার যে শরীরের-ঠিক আছে হয়েছে। উদাহরণস্বরূপ, স্টাইলশীট লিঙ্কটির প্রকার শরীর-ঠিক আছে এবং সেই কারণেই<link rel="stylesheet">শরীরে অনুমোদিত হয়। এটি তবে সেরা অনুশীলন নয়; আপনার<link>উপাদানগুলিকে আপনার মাথার মধ্যে রেখে আপনার শরীরের বিষয়বস্তুগুলি থেকে পৃথক করা আরও বেশি অর্থবোধ করে ।
সিএসএস থেকে সংজ্ঞা গাইড (চতুর্থ সংস্করণ / 2017) পৃষ্ঠা 10
একটি বাহ্যিক স্টাইলশিট সফলভাবে লোড করার জন্য, লিঙ্কটি অবশ্যই মূল উপাদানটির ভিতরে রাখতে হবে তবে অন্য কোনও উপাদানকে স্থাপন করা যাবে না।
এতে কী তফাত হবে?
পেশাদাররা: নির্দিষ্ট জায়গায় নির্দিষ্ট বৈশিষ্ট্য প্রয়োগ করা কখনও কখনও সহজ, বিশেষত যদি ফ্লাইতে কোড উত্পন্ন হয় (যেমন পিএইচপি এর মাধ্যমে বিল্ডিং এবং গতিশীল আকারের প্রতিটি তালিকার নিজস্ব শ্রেণি প্রয়োজন ... যেমন রূপান্তরের আইটেম টাইমিংয়ের জন্য)।
কনস: সামান্য ধীরে ধীরে, ভবিষ্যতে কোনও দিন কাজ নাও করতে পারে।
এটি সম্পর্কে আমার সাধারণ মতামত: এটি আপনার করবেন না এমনটি করবেন না, তবে আপনাকে যদি তা করতে চান তবে এটি সম্পর্কে কোনও ঘুমোবেন না।
লাগানো <style>দেহে সমস্ত আধুনিক ব্রাউজারের সাথে ভাল কাজ করে।
আমি ইবে এটি ব্যবহার করা হয়েছে।
এটি যদি কাজ করে তবে লাথি মারবেন না।