<স্টাইল> একটি HTML ডকুমেন্টের <HEAD> এ থাকতে হবে?


136

কঠোরভাবে বলতে গেলে, styleট্যাগগুলির কি headকোনও HTML ডকুমেন্টের অভ্যন্তরে থাকা দরকার ? 4.01 স্ট্যান্ডার্ড এটিকে বোঝায়, তবে এটি সুস্পষ্টভাবে বলা হয়নি:

স্টাইল উপাদানটি লেখকদের দস্তাবেজের শিরোনামে স্টাইল শীট বিধিগুলি রাখতে দেয়। এইচটিএমএল একটি নথির শিরোনাম বিভাগে স্টাইলের কয়েকটি সংখ্যার অনুমতি দেয়।

আমি বলি "কঠোরভাবে বলতে" কারণ আমার কাছে এমন একটি অ্যাপ রয়েছে যা শৈলীর উপাদানগুলি দেহের অভ্যন্তরে রাখে এবং আমি যে সমস্ত ব্রাউজারগুলি পরীক্ষা করেছি সেগুলি শৈলীর উপাদান ব্যবহার করে বলে মনে হচ্ছে। আমি সত্যিই আইনী কিনা তা ভাবছি।


1
আপনার যদি সন্দেহ হয় তবে ডাব্লু 3 সি মার্কআপ যাচাইকারী সর্বদা সহায়তা করে :) http://omotator.w3.org/
লাজলো

'হেড> ইন পুট <স্টাইল>' র একটি ব্যতিক্রম হ'ল এইচটিএমএল ইমেল, কারণ অনেকগুলি ওয়েবমেল পরিষেবা কেবলমাত্র কোনও প্রধান উপাদানকে বের করে দেয় যার অর্থ আপনার স্টাইলগুলি চলে গেছে।
ব্যবহারকারী 132837

1
চশমাগুলিতে ব্রাউজারগুলির সমর্থন করার প্রয়োজনstyle হয় body, তাই লেখকের গাইডলাইন বিভাগগুলি দ্বারা নির্ধারিত নির্বিশেষে এটি আমার পক্ষে যথেষ্ট ভাল good
WraithKenny

উত্তর:


104

styleশুধুমাত্র headডকুমেন্টের অন্তর্ভুক্ত থাকার কথা ।

বৈধতা বিন্দু এছাড়া এক সতর্কীকরণ আপনি যখন ব্যবহার আগ্রহের হতে পারে styleউপর bodyহয় unstyled বিষয়বস্তুর ফ্ল্যাশ । ব্রাউজারটি উপাদানগুলি প্রদর্শিত হওয়ার পরে স্টাইল করা হবে যা তাদের আকার / আকার / ফন্ট এবং / বা ঝাঁকুনিতে স্থানান্তরিত করে। এটি সাধারণত খারাপ কারুশিল্পের লক্ষণ। সাধারণত আপনি styleযে কোনও জায়গায় রেখেই পালাতে পারেন, তবে যখনই সম্ভব এটি এড়াতে চেষ্টা করুন।

এইচটিএমএল 5 এমন একটি scopedবৈশিষ্ট্য প্রবর্তন করেছে যা styleট্যাগগুলি দেহের যে কোনও জায়গায় অন্তর্ভুক্ত করার অনুমতি দেয় , তবে তারা আবার এটিকে সরিয়ে দেয়।


6
এখনও তারিখটি মনে হচ্ছে যে কেবল ফায়ারফক্স এই scopedবৈশিষ্ট্যটিকে সমর্থন করে , caniuse.com/#feat=style-scoped দেখুন
যায়েম হাবলুটজেল

2
লিঙ্কযুক্ত নিবন্ধটি লিঙ্কটি রোট-এ হারিয়ে গেছে, সুতরাং এখানে সর্বশেষ উপলব্ধ আর্কাইভ সংস্করণটি রয়েছে: web.archive.org/web/20150525042412/http://bluerobot.com/web/css/…
জাচারি মারে

@ জ্যাকারিমুরে মাথা নিচু করার জন্য ধন্যবাদ! আমি দেহের লিঙ্কটি ওয়েব সংরক্ষণাগারটিতে আপডেট করেছি।
এস্তেবান কাবার

1
চশমাটির জন্য styleট্যাগগুলিকে সমর্থন করার জন্য ব্রাউজারগুলির অনুসারে কনফর্মিং ব্রাউজারের প্রয়োজন হয়, চশমাটির bodyলেখক অংশ থাকা সত্ত্বেও আমি বডি স্টাইলগুলি বৈধ বলে বিবেচনা করি। github.com/hatwg/html/issues/1605#issuecomment-235961103
WraithKenny

19

সংক্ষিপ্ত উত্তর

  • বর্তমান অনুমান অনুসারে, হ্যাঁ, styleউপাদান অবশ্যই সর্বদা থাকা উচিতhead । কোন ব্যতিক্রম (ক ব্যতীত styleএকটি ভিতরে উপাদান templateউপাদান , যদি আপনি যে গণনা করতে চান)।

  • এটি সর্বদা historতিহাসিকভাবে হয়নি। আপনি যদি স্পেকের বিবরণ এবং এর ইতিহাস সম্পর্কে চিন্তা করেন তবে পড়তে থাকুন।

  • কোন ব্যাপার কি বৈশিষ্ট বলছেন, ব্যবহার styleউপাদান body আছে সমস্ত প্রধান ব্রাউজার আরও-অর-কম হবে। তবে এটি উভয়কেই একটি খারাপ অনুশীলন হিসাবে বিবেচনা করা হয় কারণ এটি অনুমানের লঙ্ঘন করে এবং কারণ এটি খারাপ রেন্ডারিং পারফরম্যান্স বা "আনস্টাইলযুক্ত সামগ্রীর ফ্ল্যাশ" এর মতো অনাকাঙ্ক্ষিত পরিণতি ঘটাতে পারে।


বৈশিষ্ট ইতিহাস

styleএইচটিএমএল 2 এ উপাদানগুলির অস্তিত্ব ছিল না । তারা এইচটিএমএল 3.0, যেখানে তারা অনেক উপাদান আছে যা এর মধ্যে অন্তর্ভুক্ত করা যায়নি তালিকায় অন্তর্ভুক্ত করা হয়েছে ব্যবস্থা চালু হয়েছে হেড উপাদান , কিন্তু না যে উপাদান উপস্থিত হতে পারে তালিকায় অন্তর্ভুক্ত শরীরের উপাদান । সুতরাং, এই মুহুর্তে উপাদানটি প্রথম অনুমান করা হয়েছিল, কেবলমাত্র এটিতে অন্তর্ভুক্ত করা যেতে পারে head

এটি এইচটিএমএল 5 অবধি পৃথক শব্দের সাহায্যে (বিভিন্ন শব্দ ব্যবহার করে প্রকাশ করা) থেকে যায়, যা উপাদানগুলির scopedজন্য (অপসারণের পরে) বৈশিষ্ট্যটি প্রবর্তন করে style। এই বৈশিষ্ট্যটি যখন উপস্থিত থাকে তখন styleকেবলমাত্র উপাদানটির বংশধরদের শৈলীতে দেহের কোনও উপাদানকে কোনও উপাদানের মধ্যে স্থাপন করার অনুমতি দেওয়া হয়েছিল । তবে, সেই বৈশিষ্ট্যটি কখনই কোনও আসল ব্রাউজারে এলো না (কমপক্ষে কোনও বিকাশকারী পতাকার মাধ্যমে সক্ষম করার প্রয়োজন ছাড়াই নয়) এবং ডাব্লু 3 সি এবং হোয়াটডাব্লু স্পেস থেকে "প্রয়োগকারী আগ্রহের অভাবে" সরানো হয়েছিল । এরপরে, styleউপাদানগুলিকে কেবলমাত্র মেটাডেটা সামগ্রীতে মঞ্জুরি দেওয়া প্রসঙ্গে অনুমতি দেওয়া হয়েছিল, যা কেবলমাত্র প্রধান। সুতরাং আমরা এইচটিএমএল 5 এর আগের মতো একই নিয়মে ফিরে এসেছি।

যাইহোক, উভয় অনুষঙ্গ সংস্থার ত্রুটির কারণে, উভয় চশমাতে পরিশিষ্ট হিসাবে অন্তর্ভুক্ত উপাদানগুলির একটি নন-আদর্শিক সূচক যথাযথভাবে অনুমানের সাথে সম্পর্কিত নয়, অপসারণকে প্রতিস্থাপনের জন্য সঠিকভাবে আপডেট করা হয়নি scoped। আমি এই উভয় উল্লেখ WHATWG করতে এবং W3C এর জন্য , এবং করছেন তাই নিজের অজান্তেই গতি ঘটনা বিকিরণ ঘটে দুটি চশমা সৃষ্ট সেট।

আদর্শ বৈশিষ্ট এবং অ আদর্শ সূচক মধ্যে অসঙ্গতি থেকে WHATWG এর সমাধান ছিল আমার প্যাচ গ্রহণ অ আদর্শ সূচক সংশোধন।

অন্যদিকে, ডাব্লু 3 সি আমার সমতুল্য প্যাচটিকে প্রত্যাখ্যান করেছে পরিবর্তে পরিবর্তিত মৌলিক উপাদানগুলিকে উপাদানগুলির ব্যবহারের অনুমতি দেওয়ার জন্য আপডেট করার পক্ষে , যখন এটি একটি নোট দিয়ে জানিয়েছিল যে এটি সমস্যার কারণ হতে পারে এবং "যত্ন সহকারে" করা উচিত। এই পরিবর্তনের পেছনের যুক্তিটি ছিল আসল জীবনের ব্রাউজার আচরণের সাথে অনুমানটিকে প্রান্তিক করা।stylebody

সুতরাং, মার্চ 2017 থেকে, কেসটি হয়েছিল যে এই প্রশ্নের সরকারী উত্তরটি নির্ভর করে আপনি কোন মানদণ্ডের সংগঠনটি শুনতে পছন্দ করেছেন তার উপর নির্ভর করে। আপনি যদি (সাধারণত অধিক সম্মানিত) হোয়াটাব্লু জি স্পেকের তালিকাভুক্ত করেন তবে এরপরে কোনও styleউপাদানটির অনুমতি দেওয়া হয়নি body। আপনি যদি ডাব্লু 3 সি অনুমানের তালিকায় থাকেন তবে এটি অনুমোদিত ছিল তবে প্রস্তাবিত নয়।

ডাব্লু 3 সি এবং হোয়াটডাব্লুজি-র মধ্যে এপ্রিল 2019 সালের শান্তিচুক্তির মাধ্যমে এই নির্বিকার অবস্থাটি সম্ভবত (সম্ভবত এই জাতীয় অনেক অন্যান্য অসঙ্গতির মতো) সমাপ্ত হয়েছিল , যা একমত হয়েছিল যে ডাব্লু 3 জি কেবলমাত্র এটির থেকে স্নাপশট প্রকাশ করেছে সমান্তরালে প্রতিযোগিতামূলক স্পেক বিকাশের পরিবর্তে এইচটিএমএল স্পেসিফিকেশন। সুতরাং, 2017 থেকে ডাব্লু 3 সি কাঁটাচামচ পরিবর্তনের ফলে যে styleউপাদানগুলিকে মঞ্জুরি দেওয়া হয়েছিল তা bodyএখনকার কোনও নির্দিষ্ট অংশের অংশ নয়; এটি কেবল ইতিহাসের কৌতূহল।

সুতরাং, আজ, আমাদের সরকারীভাবে অনুমোদিত কি তা নির্ধারণ করার জন্য আমাদের কেবলমাত্র ডাব্লুডাব্লু স্পিকারের দিকে নজর দেওয়া দরকার। এটি বলতে হবে:

4.2.6। styleউপাদান

বিভাগসমূহ :

মেটাডেটা সামগ্রী

প্রসঙ্গগুলিতে এই উপাদানটি ব্যবহার করা যেতে পারে :

যেখানে মেটাডেটা সামগ্রী আশা করা যায়।
একটি <noscript>উপাদান একটি উপাদান একটি শিশু <head>

মাধ্যমে জন্য CTRL-Fing একক পৃষ্ঠার বৈশিষ্ট প্রকাশ করে যে শুধুমাত্র উপাদান যাদের সামগ্রী মডেল মেটাডেটা বিষয়বস্তু রয়েছে headউপাদান।

আমি পূর্বে ফিক্সিংয়ের উল্লেখ করে থাকা উপাদানগুলির অ-আদর্শিক সূচকগুলিও নিশ্চিত করে যে কোনও styleউপাদানের একমাত্র অনুমোদিত পিতা-মাতা একটি headবা noscriptউপাদান।


18

অন্য উত্তরগুলি সঠিক হলেও আমি আশ্চর্য হয়েছি যে এখানে স্ট্যান্ডার্ডগুলি বাইরে স্টাইলগুলি অস্বীকার করে এমন কোনও ব্যাখ্যা করেন নি head

এটি আসলে এলিমেন্টের বিভাগেhead (এবং ডিটিডি তে ):

<!-- %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 -->

হ্যা আমি জানি. ডিটিডিগুলি পড়া শক্ত।

এটি একমাত্র জায়গা যেখানে STYLEউপাদানটি ঘটে তাই স্পষ্টতই এটি অন্য কোথাও অবৈধ।


6
আমি তাই বিভ্রান্ত.
dav_i

1
এখনই এইচটিএমএল 5 ব্যবহার করা উচিত, যা আইআইআরসি-তে কোনও ডিটিডি নেই। এইচটিএমএল 5 স্পাই যা বলে তা হ'ল যা হয় বা না।
জানু কিউ পেব্লিক

14

তাদের মাথার বাইরে যাওয়ার কথা নয়, তবে তারা যেভাবেই কাজ করে; যদিও আপনি একটি দ্রুত ঝাঁকুনি লক্ষ্য করতে পারেন। সাইটের মাথার বাইরে স্টাইল ট্যাগ দিয়ে বৈধতা দেওয়া উচিত নয়, তবে এটি কি সত্যিই গুরুত্বপূর্ণ? এছাড়াও, লিঙ্ক ট্যাগগুলি মাথার বাইরেও কাজ করে, যদিও তাদের ধারণা করা হয় নি।


5
"তারা কাজ করে" বলার বিষয়টি কিছুটা জটিল। সর্বোপরি আপনি বলতে পারেন বেশিরভাগ বর্তমান ব্রাউজারগুলি এখনও শৈলীগুলি রেন্ডার করতে পারে তবে এই ত্রুটি সম্পর্কে কিছুই নেই যা কেবল সহজাতভাবে "কাজ করে"। এটি কোনও ব্রাউজারের ভবিষ্যতের সংস্করণে কাজ করতে পারে না এবং তারা কোনও খারাপ কাজ করবে না।
চাক

6
imo, styles rendered = work; কিছুই জটিল। শেষ বাক্যটি আবার লিখতে হবে; এটা আমার বুঝে আসেনা. আমি উল্লেখ করেছি যে এটি কীভাবে "ঠিক" ছিল না যখন আমি বললাম এটি বৈধ হবে না, সুতরাং আপনাকে অবশ্যই এই বাক্যটি দিয়ে কী বোঝাতে চেয়েছিল তা বুঝতে হবে না।
geowa4

সমস্যাটি হ'ল এগুলি স্টাইল করা হলেও , আপনি যখন তাদের styleলাথি
মারবেন

2
শৈলীর ট্যাগটি দেহে প্রথম না হলে
geowa4

বাড়িতে এটি চেষ্টা করবেন না।
টেকনিউইকিস্ট

3

অন্যান্য প্রত্যুত্তর মতো বলেছে যে এটি আসলে থাকার দরকার নেই। তবে এটি বৈধ হবে না। এই ঘটনায় এটি বা তাত্পর্যপূর্ণ হতে পারে না তবে দয়া করে মনে রাখবেন যে এইচটিএমএল রেন্ডারিং পুরোপুরি ব্রাউজারগুলির মধ্যে। আমি যা জানি আজকের সমস্ত ব্যবহৃত ব্রাউজারগুলি এটিকে মাথার বাইরে রাখার পক্ষে সমর্থন করবে তবে ভবিষ্যতের ব্রাউজার এবং ভবিষ্যতের ব্রাউজারের জন্য আপনি গ্যারান্টি দিতে পারবেন না।

স্ট্যান্ডার্ডের সাথে লেগে থাকুন এবং আপনি নিরাপদ হন। খুব বেশি বিতর্কের জন্য কতটা নিরাপদ।


3

HTML5.2 W3C পরামর্শ, 14 ডিসেম্বর 2017 (না আগের খসড়া উপরে উল্লেখ করা হয়েছে) এখন আপনাকে বিশেষ অন্তর্ভুক্ত করতে পারে <style>

"দেহে যেখানে প্রবাহের সামগ্রী প্রত্যাশিত।" (বিভাগ ৪.২..6)


যদিও এখন, ডাব্লু 3 সি আনুষ্ঠানিকভাবে জানিয়েছে যে হোয়াটডব্লিউজি স্পেকটি সমস্ত পূর্ববর্তী চশমাগুলিকে অপ্রচলিত করে এবং হোয়াটাব্লুজি স্পেকটি এতে অনুমতি দেয় styleনা body, তাই আমরা এটিকে নিঃসংশ্লিষ্টভাবে নিষিদ্ধ করে ফিরছি । আপনি যদি আমাদের এখানে পৌঁছে যে টুইস্টি পথে আগ্রহী হন তবে আমার উত্তরটি দেখুন ।
মার্ক

2

স্টাইল ট্যাগটি কোথাও কিন্তু এর অভ্যন্তরে <head>ডাব্লু 3 সি নিয়মের সাথে বৈধ হবে না।


2

এই সাইট অনুসারে, HTML5.1.1 (খসড়াতে) এবং WHATWG <style>ট্যাগটি দেহে রাখার অনুমতি দেয় :

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

এটি বেশ কিছুক্ষণ ব্রাউজার দ্বারা সমর্থিত বলে মনে হয়। এই স্ট্যাকওভারফ্লো উত্তর অনুসারে, ফায়ারফক্স 3+, আই 6 +, সাফারি 2+ এবং ক্রোম 12+ এটি সমর্থন করে:

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


1

এইচটিএমএল 5.2 স্পেসিফিকেশন অনুসারে (খসড়াতে) স্টাইল ট্যাগটি কেবলমাত্র একটি নথির শিরোনামে অনুমোদিত।

স্টাইল ট্যাগে এইচটিএমএল 5.2 খসড়া (আগস্ট 18, 2016)

একটি শৈলী উপাদান ডকুমেন্টের মাথায় উপস্থিত হওয়া সীমাবদ্ধ।


-1

আপনি হেড সেকশন বা বডি বিভাগের ভিতরে বা এইচটিএমএল ট্যাগের বাইরেও (স্টাইল এইচটিএমএল প্রস্তাবিত নয়) ব্যবহার করতে পারেন style রিয়েল টাইম প্রকল্পগুলিতে অনেক সময় আপনি দেখতে পাবেন যে তারা HTML ট্যাগের পাশের স্টাইল ট্যাগ ব্যবহার করে style

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.