インライン記述のstyle属性に疑似要素が使えるって本当!?

W3Cのドラフトによると、HTMLに直接指定するインラインCSSで疑似要素が使えるんだそうです。ちょっとびっくりしたので一連の流れを調べて簡単にまとめてみました。

インライン記述のstyle属性に疑似要素が使えるって本当!?

CSSを書く上で、HTML/XMLにstyle属性を使ってインライン記述するのはメンテナンス上あまり好ましくありません。しかしやむを得ず使うこともあるので、一通りの仕様は押さえておきたいところです。

そんな折、インラインスタイルでも疑似要素が使えるらしいという記述を見て驚いたので調べてみました。

インラインスタイルに疑似要素が使える!?

W3C TRのドラフト翻訳を見てたらびっくり案件が載ってました。CSSのインラインスタイルで疑似要素が使えるそうです。

HTML の “style” 属性における CSS 規則の構文 – ToyFish.Net

XML ベースの文書形式がすべて “style” 属性を用意していて、ユーザが CSS で文書や文書中の特定の要素にスタイル指定できるというわけではありませんが、 ある形式で “style” 属性が用意されており、その属性の値に CSS を使えるような場合については、 この仕様がその属性の構文と解釈を規定します。

ここでいくつか例を示しましょう。

1. 擬似要素や擬似クラスを使わず、要素自体のプロパティのみを設定する。
<p style=”color: #090; line-height: 1.2″>…</p>

2. 要素に加え、’::first-letter’ 擬似要素を使って要素の 1 文字目にもプロパティを 設定する。この場合は大括弧 ({…}) が必要になる点に注意してください。

<p style=”{color: #090; line-height: 1.2}
::first-letter {color: #900}”>…</p>

えっ…!?
インラインで疑似要素の指定!? (((( ;゚Д゚)))

…あ、中括弧で中をくくるわけですね。でもそんなインラインCSSの実例コードを見たことないけど…?

びっくりして英語版を読みに行ったら、やっぱりインラインスタイルには「中括弧を使って疑似要素を指定する」と書いてあります。

Syntax of CSS rules in HTML’s “style” attribute – W3C Working Draft

2. Setting properties on the element, as well as on the first letter of the element, by means of the ‘::first-letter’ pseudo-element. Note that curly braces ({…}) are required in this case:

ふぇぇぇぇぇ、マジっすか。

インラインスタイルで疑似要素が動くかテストする

自分の行動範囲で実例を見たことがないだけで、実は実装されてるのかも知れません。ドラフトに載ってたソースを実際にHTMLに起こしてブラウザで読み込んでみました。

【XML】
<p style="{color: #090; line-height: 1.2} ::first-letter {color: #900}">これはインラインCSSの動作デモです</p>

これが動けば、パラグラフの文字色が緑で最初の文字だけ赤くなるはずです。

インライン疑似要素動作チェック

<!– ↓↓ここからデモ↓↓ –>

これはインラインCSSの動作デモです

<!– ↑↑ここまでデモ↑↑ –>

…動かねぇじゃん。(ΦωΦ)

W3C TR 最新版を改めて確認する

よく見ると草案の日付は2001年版だったので(古っ!)、最新版の【W3C Recommendation 07 November 2013】を確認しにいくことにしました。

該当のインラインスタイルに関する項目を確認します。

インラインスタイルに関するW3C最新版CSS Style Attributes

どうやら1番の「要素のプロパティを設定」については記述がありますが、肝心の二番以降が見当たりません…?

ちょ…やっだー!該当する仕様が丸ごと消えてるじゃないですかー!( ・`д・´)

色々ぐぐったところによると、実装されないまま保留になってた案件が、今は正式に削除されたようです。少なくとも2007年くらいまではうやむやになってたことを確認しました。

関連情報を調べてる最中に「近年の日付による肯定発言」をいくつか見かけたので、2014年時点の現状として記録しておきます。

はー、びっくりした!(^^;