HTMLのbody内に<style>～</style>定義は作法的にOKでしょうか？

現在のHTMLの仕様にお詳しい方アドバイスを頂けないでしょうか？

タイトルの通りなのですが、HTMLのbody内に<style>～</style>を定義し、そこにstyleの内容を定義していくことは、現在のHTMLの仕様としてありでしょうか？

実際に試してみると、問題無く動作するのを確認しています。
出来れば、CSSの設置してある外部ファイルに記述するのがお作法的には正しいと思うのですが、サイトの構成がパーツごとにincludeされていたり、ほんの少しの、または一時的にCSSを定義する際に、大元のSCSSから書き直して、コンパイルしてCSSに設定して、また戻して…。

とやっていると作業に時間がかなりかかってしまいます。
なので、特定のincludeされているHTML部分に、ちょこっと<style>～</style>を記述しています。
大変便利な方法なのですが、何か問題はありますでしょうか？

HTML5は終わったと伺っています、これからはWHATWGが仕様を管理されると思うのですが、WHATWG的には、このような方法はどうなのでしょうか？
調べてみるのですが、明確な回答が見つけれず…。

この辺りお詳しい方いらっしゃいましたら、ご助言を頂けますと幸いです。
なお、その方法はNGとなる場合、何か簡易的に行える良き代替案は御座いますでしょうか？

宜しくお願いいたします。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2023/10/05 23:47

こんばんは

基本的に head 内の記述が原則です。

＞調べてみるのですが、明確な回答が見つけれず…。
◇ 5 October 2023 時点の仕様書
https://html.spec.whatwg.org/#the-style-element

◇ 11 September 2023 版の日本語訳
https://momdo.github.io/html/semantics.html#the- …

とは言え、解釈してくれるブラウザも多いと思います。


＞何か簡易的に行える良き代替案～～
要素の style 属性に記述する。

この回答へのお礼

有難うございます。
その後、色々と調べた結果、HTML5の段階で一時body内でのstyleを許可されていた時期があるみたいで、その影響かもですが、現在のブラウザでほぼ動作の確認ができますね…。良くない使い方かもですが。

代替案に頂いた、
>>要素の style 属性に記述する。
こちらは逆にHTMLとCSSの分離の観点からどうなのでしょう？
今、javascriptからのしてもありなのかな？などど考えながら調べております。

貴重な情報有難うございます。

お礼日時：2023/10/07 19:46

No.3 回答者： bx2 回答日時： 2023/10/08 14:00

私の認識不足でした。

HTML 5.2以降で、body内でstyleの使用が可能になっていました。

その後、HTML5は廃止され、WHATWGのHTML Living Standardでは、body内でstyleの使用は認められていません。

「W3CのHTML 5.2」が作成される前に「WHATWGのHTML」が誕生して、別々に発展した結果のようです。

時系列は下記サイトが参考になります。

・どうしてHTML5が廃止されたのか
https://future-architect.github.io/articles/2021 …


HTML 5.2
W3C Recommendation, 14 December 2017
https://www.w3.org/TR/2017/REC-html52-20171214/d …
＞Contexts in which this element can be used:
＞In the body, where flow content is expected.

https://www.w3.org/TR/2017/REC-html52-20171214/c …
＞The following constructions are now valid HTML:
＞style within the body.


現在の仕様（WHATWGのHTML Living Standard）で認められていない以上、現在のブラウザで動作可能でも、いつ動作しなくなるかわかりません。

簡単な記述であれば、他の方が回答されたように「要素の style 属性に記述する」で良いと思います。

JavaScriptを使ってhead内に追加するなら下記の記述で出来ます。

document.head.insertAdjacentHTML('beforeend', '<style> ... </style>');
document.head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="style.css">');

No.1 回答者： bx2 回答日時： 2023/10/05 22:34

＞HTMLのbody内に<style>～</style>を定義し、そこにstyleの内容を定義していくことは、現在のHTMLの仕様としてありでしょうか？

「なし」です。過去と現在で、body内でstyleの使用は仕様にありません。仮に動作しても、他のブラウザで動作する保証はありません。


styleを使用できるのはhead内です。それなら、すべてのブラウザで動作します。

・ブラウザーの互換性
https://developer.mozilla.org/ja/docs/Web/HTML/E …

この回答へのお礼

有難うございます。
やはり基本はhead内での定義ですよね…。

一旦HTML5の仕様でbody内でのstyle OKになったみたいなので、踏襲されている感じはあります…。相当マニアックなブラウザ以外は動作しますが…。

scriptはどこに書いても行けそうなので、javascriptで書いた方が良いのかもしれないですね。。。

お礼日時：2023/10/07 19:42