::first-letterにまつわる謎な挙動
::first-letter疑似要素をめぐり、謎めいたブラウザの挙動に遭遇
text-shadow for MSIEの実装を見直している最中だが、::first-letter疑似要素をめぐり、謎めいたブラウザの挙動に遭遇して足踏み中。
足踏みついでだから、テストしてみた。
W3Cの仕様には
Punctuation (i.e, characters defined in Unicode in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included.
If an element has
::before
or::after
content, the::first-letter
applies to the first letter of the element including that content.Example:
After the rule
p::before {content: "Note: "}
, the selectorp::first-letter
matches the "N" of "Note".
とあって、Punctuation(引用符)についてはわざわざ
と画像で例示もしているが、どのブラウザも実はその例示通りにならないケースがある。
::first-letter { color : blue; font-size : 3em; text-transform : uppercase; }
Firefox, Safari, Opera, Chrome, IE9, IE10:いずれも「::F」となる。これは仕様通り
::first-letter(before疑似要素で引用符(\22)を付与)
BlinkのChromeとOpera:一切first-letterが適用されない
Firefox, Safari, Opera, Chrome : before疑似要素の引用符「"」にしかfirst-letterが適用されない
IE9, IE10:「"::F」となる。仕様通り
::first-letter(float付き)
Firefox, Safari, Opera, Chrome, IE9, IE10:いずれも「::F」となる。仕様通り
::first-letter(float付き。before疑似要素で引用符を付与)
BlinkのChromeとOpera:一切first-letterが適用されない
Firefox, Safari, Opera, Chrome, IE9:before疑似要素の引用符「"」にしかfirst-letterが適用されない
IE10:「"::F」となる。仕様通り
ところが、よく見るとW3Cの仕様には、前後の引用符を含めるのはshould
(要請)とあり、そうである以上は例2も例4もバグとは言い切れないってこと?…なんとなく腑に落ちないw
ってことはIE7も仕様に適合してるってことなの?…もっと腑に落ちない(爆
Bugzillaで見つけた。一応バグと認識されてはいるらしい 509685 – ::first-letter does not extend through punctuation across multiple elements / pseudo-elements / parts of pseudo-elements / text nodes
でも、さすがに↓はFirefoxのバグじゃないのかなぁ
::first-letter(before疑似要素で「>」(\3e)を付与)
Safari, Opera, Chrome, IE9:before疑似要素にしかfirst-letterが適用されないが、「>」はそもそもPunctuationではなくSymbol, Math [Sm]。しかし後続する「::」にfirst-letterとしてのスタイルが適用されていない
Firefox:一切first-letterが適用されてない
IE10:「>::」にfirst-letterが適用されている。仕様通り
こっちもBugzillaにあった。 597510 – ::first-letter doesn't style some characters (e.g., "$")
"::first-letterにまつわる謎な挙動"へのTwitter上でのコメントやRT
5件のツイートがあります。
ツイート 1
asamuzaK.jp : ::first-letterにまつわる謎な挙動 http://t.co/GaB7jFxo
ツイート 2
IE10(Win7用のPre-Release版)での結果を追記 asamuzaK.jp : ::first-letterにまつわる謎な挙動 / ::first-letter疑似要素をめぐり、謎めいたブラウザの挙動に遭遇 http://t.co/GaB7jFxo
ツイート 3
BlinkになってからChromeとOperaの挙動が変わっていたので修正 / asamuzaK.jp : ::first-letterにまつわる謎な挙動 / ::first-letter疑似要素をめぐり、謎めいたブラウザの挙動に遭遇 http://t.co/ZKoMl4anYP
ツイート 4
FirefoxだけじゃなくSafariやChromeやOperaにもある>::first-letter絡みのバグ 正しく実装しているのはIEだけ(IE10~) asamuzaK.jp : ::first-letterにまつわる謎な挙動 http://t.co/ZKoMl4anYP
ツイート 5
RT @asamuzakjp: FirefoxだけじゃなくSafariやChromeやOperaにもある>::first-letter絡みのバグ 正しく実装しているのはIEだけ(IE10~) asamuzaK.jp : ::first-letterにまつわる謎な挙動 http:…