昨年末、HTML5.2が正式勧告となり、これまでＮＧとされてきた<BODY>タグ内のスタイル指定が、ＯＫになってたんですね、知りませんでした。 今後は、ブログの記事の中に↓のように書いても
<style><!--
selecter{
property: value;
}
--></style>
「BODY内にスタイルは書けません」的な注意を受ける（誰から？笑）ことはないわけですね。 ブログなどでは、いちいち記事の中だけで使うスタイルを、ブログ全体のスタイルシートに書くわけにもいかないので・・・ ってまぁ、以前からバンバン使ってましたが(笑) そういえば、いつから使えるようになったんだろう？ ずっと昔は使えなかったような気がします（試した記憶が） でも、いつのまにか使えるようになってることに気づいて、今までは使い方を自分が知らなかっただけだと思っていたのですが(笑) 多分、新しい規格が正式リリースされる前に、各種ブラウザが対応するようになっていたのでしょうね。 2017年12月14日、「HTML 5.2」勧告 https://www.w3.org/TR/2017/REC-html52-20171214/
ただし、スタイルを途中で読み込む瞬間、ブラウザのレンダリングが停止するという問題があるようですね。 ブラウザは、スタイルを読み込んでレンダリングをすべて終了してから一気に描画するという動作をしてるんだそうで、それが、途中でCSSが出てくると、再びそれを読み込んだ後全体をレンダリングしなおすので、二度手間になって遅くなるのだとか？ まぁ、記事内のほんの数行のCSSでそこまで目に見えて遅くなることはないとは思いますが。 5.1→5.2の変更点はここに https://www.w3.org/TR/html52/changes.html ※Google翻訳はこちら(笑) <body>タグ内に<style>タグが記述可能になった以外は、専門的な細かい変更が多くて、あまり関係ないかなぁ・・・
今回の変更で、ということではないのですが、HTML5になって変わったことのおさらい やはり、一番大きいのは、ブロック要素・インライン要素の概念がなくなった事ですかね？ インライン要素の中にブロック要素を入れることは、以前はＮＧだったのですが、HTML5からOKなんですよね。 ※正確には、displayプロパティでブロック要素かインライン要素か（あるいはflexやtableなどその他の要素か）を指定することができる、という感じですかね。 a タグはこれまでインライン要素と言われてきましたが、「display:block;」とすることで、ブロック要素にできちゃうわけです。 古い仕様では、ルール的に下記のように文字にしかリンクが貼れませんでした。(文字の周囲の余白部分はリンクにならない。) LINK 中のテキストをスパン要素にしてpaddingを増やしてやれば、文字以外の部分もリンクになりますが、長い文字列だと折り返されておかしくなってしまったりします。 LINK なので、長い文章の入ったブロック全体をリンク化したいときに、DIVで囲って、さらにそれを a タグで囲うなどということをやってました（古いルール的には多分反則）LINKしかし、a タグを直接ブロック要素化してしまうことができるようになったので、DIVで囲う必要がなくなってしまいますね。（そういう使い方が正しいのかどうかイマイチ分かりませんが。。。） LINK
https://pandaignis.com/wp/40461.html
あいうえおかきくけこさしすせそ
https://pandaignis.com/wp/40461.html
あいうえおかきくけこさしすせそ 余談ですが、a タグのtarget属性から非推奨がはずされてたのですね。 「 target="_blank" は推奨されません」 みたいに怒られることはなくなったので遠慮なく使えるようになったと。 （だから誰から怒られるんでしたっけ？笑）
html5で中に入れられる子タグ早見表
| div | abrdivdlh1〜h6imgulolpspantable | ||||
|---|---|---|---|---|---|
| span | abremstrongsvg | ||||
| a | 親要素のコンテンツモデルを継承 | ||||
| h1〜h6 | abremstrongsvg | ||||
| p | abremstrongsvg | ||||
| ul ol | liのみ（例外：template,script） | ||||
| li | abrdivdlh1〜h6imgulolpspantable | ||||
| table | tbodytheadtfootcaptioncolgroup | ||||
| th/td | abrdivdlh1〜h6imgulolpspantable | ||||
| dl | dtdddiv | ||||
| dt/dd | abrdivdlh1〜h6imgulolpspantable | ||||
※ a タグの扱いが面白い。 親要素のコンテンツモデルを継承 つまり、a タグを囲んでいる要素と同じタグが中に入れられるようになる。 p の中にある a は、p と同じタグが入れられる。 div で囲っちゃえば、ほぼなんでも入れられる。 （なんでこんな分かりにくい設定が必要だったんだろう・・・？）
コメント