CSSの空白

CSSの空白

[1] CSS 2.1 によれば、字句化の段階で空白とみなされるのは

<IW:CSS2:"syndata.html#tokenization">

[2] Firefox 2 は >>1 の5文字に加え、

空白とみなします。

[3] WinIE 6>>1-2 の6文字に加え、 U+00A0, U+2000, U+2001, U+2002, U+2003, U+2004, U+2005, U+2006, U+2007, U+2008, U+2009, U+200A, U+200B, U+3000, U+FEFF空白とみなします。

[5] Opera 9 は >>1-2 に加えて U+00A0, U+1680, U+180E, U+180F, U+2000, U+2001, U+2002, U+2003, U+2004, U+2005, U+2006, U+2007, U+2008, U+2009, U+200A, U+2028, U+2029, U+202F, U+205F, U+3000空白とみなします。 WinIE と出入りがあるのに注意してください。

[4] 参考: <http://suika.fam.cx/~wakaba/-temp/test/css/tokenize/whitespace/space-char-1> (IE 用)、 <http://suika.fam.cx/~wakaba/-temp/test/css/tokenize/whitespace/space-char-2> (その他用)

[6] 空白文字であっても、名前文字でもあることがあります。

例えば、子孫結合子のつもりで U+3000 だけを使うと、 WinIE でも Opera でも U+3000要素名の一部とみなされてしまいます。

<http://suika.fam.cx/gate/2007/cssom/viewer?c=div%E3%80%80p%20%7Bcolor%3Ared%7D;h=AAA%3Cdiv%3EBBB%3Cp%3ECCC%3C%2Fp%3E%3C%2Fdiv%3E;p=q>

ですが、 U+0020 の後ならば、 U+3000要素名とはみなされません。

<http://suika.fam.cx/gate/2007/cssom/viewer?c=div%20%E3%80%80p%20%7Bcolor%3Ared%7D;h=AAA%3Cdiv%3EBBB%3Cp%3ECCC%3C%2Fp%3E%3C%2Fdiv%3E;p=q>

WinIE要素名鍵語で違った字句化を行うようです。 red の直後にある U+3000 は無視してくれます。 Opera では U+3000鍵語の一部とみなすらしく、宣言自体が無視されます。

<http://suika.fam.cx/gate/2007/cssom/viewer?c=div%20p%20%7Bcolor%3Ared%E3%80%80%7D;h=AAA%3Cdiv%3EBBB%3Cp%3ECCC%3C%2Fp%3E%3C%2Fdiv%3E;p=q>

FirefoxU+3000空白とはみなさないのですが、 鍵語の後に1つ以上 U+3000 が続いていても、 ついていないものとみなされるようです。色名の場合は、 U+3000CSSOM に現れますが、 レンダリングへの影響としては無視されます (先の例は WinIE 同様字になります)。色名以外 (少なくても float: righttext-align: right) では CSSOM には U+3000 を除去したものが現れ、 レンダリングへの影響としても無視されます (右寄せになります)。