html5.2ではstyle要素をbody内に書けるようになりました

投稿 2018年02月09日
0
webのあれこれ
HTMLCSSInformation

意味わからへーん!な方とそうでない方といらっしゃると思いますけれども、結構重要だと思いますので記しておきます。

html5.2が既に正式勧告を済ませてますが、追加要素や廃止要素などに加え
style要素をbody内に書くことがinvalidではなくなりました

* invalid (インヴァリッド) = 無効, 正しくない の意

記事内での装飾がしやすくなります

先に結論を言うと。
記事内でいろんな装飾してるよ、という方にとってCSSは割りと悩みのタネだったのではないかと思います。

  • 記載場所のルール
  • style属性では疑似要素が使えない
  • 限定的にしか使わない内容でもスタイルシートに常に置かなければならない点

こんなところでしょうかね。
これらの問題点が一応解決というかなんというか。
ルールの緩和と捉えても良いと思います。
ただし 個人的にも大手を振った推奨はできません。理由は後述。

CSSを使う3つの方法

  • スタイルシート(FC2ブログは「テンプレート編集」画面の下段にあります)
  • htmlのstyle属性(インラインCSS)
  • head内へのstyle要素(インラインCSS)

最も推奨される方法は「スタイルシートの利用」ですね。
装飾関係を全てまとめて一つのファイルにすることです。
それが大前提です。よほどのことが無い限りはこの推奨方法を守るが吉。

スタイルシート

たださぁ、スタイルシート ってのはテンプレートのhtmlとセットです。
でもテンプレートっていくら気に入ってるっつってもやっぱ変えたくなるじゃん (´・ω・`)
テンプレートを変更するとhtmlはもちろんのこと、CSSも全て別物になります。
ところが「記事内容」というのは固定ですので、記事内で利用していた例えば見出しの装飾ですとかそういったものまでもがクリアされてしまうんですね。
デザインを継続するには関連CSSを移植するという手間が発生します。

style属性

それがめんどうだなぁと思う場合には style属性 を使おうか、って選択肢が出てきますね。こういうの ↓ サンプル

最新映画紹介
<div style="width: 300px; max-width: 100%; background-color: white; border: 3px solid black; color: rgb(51,51,51); padding: 20px; text-align: center;">最新映画紹介</div>

これがstyle属性ですね。htmlのstyleという 属性 としてCSSを直接書きます。
で、すげー見づれぇ (=`ェ´=;) となるわけよ。

見辛い・編集困難という問題もあるのですが。
じゃあサンプルの「最新映画紹介」をこうしたい場合どうする ↓

最新映画紹介

上記は 疑似要素 と呼ばれるCSSを利用しています。
そして 疑似要素はstyle属性内に書くことができません。
疑似要素というのは本来「htmlに存在しないもの」を作り出しますので、「htmlに存在する」要素に直接スタイルを当てるstyle属性ではできないんですね (´・ω・`)

となると結局巻き戻って「スタイルシートに書かなあかんのかい…。」と。

style要素

style要素 と style属性 は全く別のものですので注意。
属性というのは要素に情報を追加する付属品のようなものです。

<style>
h1 {
  margin: auto;
  font-size: 20rem;
}
</style>

例えば上記のようなもの。styleタグで挟まれた内容はCSSそのまんまです。
これが style要素 です。

ここが一番の本題なんですけども、これまでは head内にしか書いてはいけない という決まりだったんですね。
ですが実際にはルール違反も多く見られます。
例えば FC2プラグイン

FC2ブログプラグインのhtml内容というのはテンプレートhtmlとは別で用意されます。
テンプレートhtmlの中に書いてあるわけではありません。当然CSSもそうです。
プラグインだってCSS整形をしなくてはいけませんよね。ではそのCSS内容はどこに書くの?ってことになるんです。
どこに書いてあるかというと、プラグインのhtml内容のすぐ下(笑)
つまりみなさんがプラグインをダウンロードするとそのhtml内容とセットでCSSがstyle要素でもれなく付いてきます。
最近だと「新着記事サムネイルつき」プラグインもそうですね。html内容の下にはstyle要素が書かれています。

ですからこれまではFC2プラグインのほとんどが invalid つまりバリデーションでは エラー だったんですね (´・ω・`)
「head内にしか書いてはいけないものがbody内に書いてあるじゃないか。ダメ!ルール違反!」
ってことです。

そのルールが無くなりましたよ。というのがhtml5.2の改定です。

ただし推奨ではない

これは動作的にもやはり推奨はされないですね。
これまで何度も触れてますが、CSSはレンダリングブロック要因 だからです。

CSSというのは通常html解釈・描画の「前」に解析が行われます。
みなさんhtmlだけのページって見たことありますかね。 CSSが適用されていないページの様子 CSSが読み込まれていない状態ではこんな風にレンダリングされることになります。
CSSが適用されると… CSSが適用されたページの様子 一旦表示されたものがガチャガチャと並び替わったり色がついたりなどしてまともな状態になる。
ですからやはりCSSは先に読ませなければいけないわけなんです。
言い換えると CSS解釈中はhtmlのレンダリングが行われない

CSSの内容が大きすぎるとページが遅くなるよ、というのはこの仕組があるからです。
で、headは一番最初に作業されるべき部位です。通常はそこにCSSファイルへのリンクなりstyle要素なりが設置されます。
今回の改定でhead外、つまりheadより後に書けるようになったわけですが、bodyの途中にstyle要素があるということは、htmlレンダリングが行われており、途中でstyle要素が現れた場合には htmlレンダリングを一旦中断してCSS解釈に集中します。
描画が中途半端に止まってしまうというわけです。
こういう理由から非推奨。CSSはやはり最初に読ませて後一気にhtml描画してもらった方が良いですね。ホントはね。

まとめ

とはいえ途中にあるCSSが何千行もあるような長大な内容というならともかく、数十行なら過剰に心配することもない (´・ω・`)
個人的には 常に使うわけではない内容 であり めちゃくちゃ長い内容ではない 場合にはメンテナンス性も考慮して記事内でも使っていけば良いと思いますYO

というわけで、5.2での改定「style要素をhead外に書いても良い」は割りと重要なんじゃないかしら。
たぶんアレだよね。みんなルール無視してやってるしブラウザの性能も昔よりはるかに優れているのでW3C的には「…なんかもういいや。やっても良いってことにするよ。」という感じなのではないか(笑)

オマケ。8ミリフィルム風ボックスのソース
試しに記事内でやってみてねの意味を込めてCSSはstyle要素にしておきます。
スタイルシートに入れる場合はstyleタグを忘れずに外してください。

<div class="cinema">テキスト内容</div>
<style>
.cinema {
  margin: 30px 0;
  width: 300px;
  max-width: 100%;
  background-color: black;
  border: 1px solid black;
  color: white;
  padding: 26px;
  position: relative;
  z-index: 3;
  text-align: center;
}

.cinema:before {
  content: "";
  display: inline-block;
  background-color: black;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgb(240,240,240)), color-stop(.5, transparent), to(transparent));
  background-image: linear-gradient(to left, rgb(240,240,240) 50%, transparent 50%, transparent);
  background-size: 16px 16px;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.cinema:after {
  content: "";
  display: inline-block;
  background-color: black;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgb(240,240,240)), color-stop(.5, transparent), to(transparent));
  background-image: linear-gradient(to left, rgb(240,240,240) 50%, transparent 50%, transparent);
  background-size: 16px 16px;
  height: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
</style>
YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

0 COMMENTS

There are no comments yet.