[1]

CSS は、将来も含めたすべての水準levelで共通の文法を定めています。現在の水準ではまだ使われていない構造の構文解析法 (読み飛ばす方法) も定められており、これを前方互換構文解析ぜんぽうごかんこうぶんかいせきforward‐compatible parsing規則といいます。

また、様々な出力媒体や実装の程度等を考慮して、扱えない構造をどう扱うかも決められています。ここでは、それらある実装が扱えないものをどう処理するかに関する CSS の規定について扱います。

メモ

[57] style 要素の最後が閉じられていない注釈

https://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20color%3A%20green%3B%0D%0A%20%20%2F*%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D%0D%0A;h=%3Cp%3EPASS%20if%20%3Cem%3Egreen%3C%2Fem%3E.%3C%2Fp%3E%0D%0A;p=n;x=style-element (名無しさん)

[58] style 属性の最後が閉じられていない注釈

https://suika.suikawiki.org/gate/2007/cssom/viewer?c=color%3A%20red%3B%0Acolor%3A%20green%3B%0A%2F*%0Acolor%3A%20red%3B%0A;h=%3Cstyle%3Ebody%20%7Bcolor%3A%20red%7D%3C%2Fstyle%3E%0A%3Cp%3EPASS%20if%20%3Cem%3Egreen%3C%2Fem%3E.%3C%2Fp%3E%0A;p=n;x=style-attribute (名無しさん)

[59] >>57-58

>>9 の規則により、閉じられていない注釈は閉じられているものとして扱われるはずです。

WinIE 6 と Firefox 2 は実際にそのように解釈しますが、 Opera 9 はその閉じられていない注釈が含まれる規則集合全体 (または style 属性値全体) を無視するようです (CSSOM や cssText にも現れません)。 (名無しさん)

[60] >>57 に @media を加えてみた: https://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20color%3A%20red%3B%0A%7D%0A%40media%20all%20%7B%0Ap%20%7B%0A%20%20color%3A%20green%3B%0A%20%20%2F*%0A%7D%0Ap%20%7B%0A%20%20color%3A%20red%3B%0A%7D%0A;h=%3Cp%3EPASS%20if%20%3Cem%3Egreen%3C%2Fem%3E.%3C%2Fp%3E%0A;p=n;x=style-element (名無しさん)

[61] >>60

WinIE 6 は正しい解釈 (閉じられていない注釈だけを無視)。

Opera 9 はやはり閉じられていない注釈を含む規則集合を無視。

Firefox 2 は閉じられていない注釈を含む @media @規則全体を無視。 (名無しさん)

[62] >>57, >>58, >>60 の閉じられていない注釈を閉じられていないブロックに変えてみた:

https://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20color%3A%20red%3B%0A%7D%0Ap%20%7B%0A%20%20color%3A%20green%3B%0A%20%20%7B%0A%20%20%20%20color%3A%20red%3B%0A;h=%3Cp%3EPASS%20if%20%3Cem%3Egreen%3C%2Fem%3E.%3C%2Fp%3E%0A;p=n;x=style-element
https://suika.suikawiki.org/gate/2007/cssom/viewer?c=color%3A%20red%3B%0Acolor%3A%20green%3B%0A%7B%0Acolor%3A%20red%3B%0A;h=%3Cstyle%3Ebody%20%7Bcolor%3A%20red%7D%3C%2Fstyle%3E%0A%3Cp%3EPASS%20if%20%3Cem%3Egreen%3C%2Fem%3E.%3C%2Fp%3E%0A;p=n;x=style-attribute
https://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20color%3A%20red%3B%0A%7D%0A%40media%20all%20%7B%0Ap%20%7B%0A%20%20color%3A%20green%3B%0A%20%20%7B%0A%20%20%20%20color%3A%20red%3B%0A;h=%3Cp%3EPASS%20if%20%3Cem%3Egreen%3C%2Fem%3E.%3C%2Fp%3E%0A;p=n;x=style-element

[89] 属性選択子や擬似クラスの引数も閉じられていなくても勝手に閉じられてよさそうに思いますが、実際にはそうなっていません。

[90] http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cp%20class%3Dfoo%3E%0A%0A%3Cscript%3E%0A%20%20w%20(document.querySelector(%27%5Bclass%3Dfoo%5D%27))%3B%0A%20%20w%20(document.querySelector(%27%5Bclass%3Dfoo%27))%3B%0A%3C%2Fscript%3E
[91] http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cp%20class%3Dfoo%3E%0A%0A%3Cscript%3E%0A%20%20w%20(document.querySelector(%27%3Anth-child(1)%27))%3B%0A%20%20w%20(document.querySelector(%27%3Anth-child(1%27))%3B%0A%3C%2Fscript%3E

[63] >>62

WinIE 6: { をブロックの始まりとみなさず、無視する (対応する } があったとしても同じ)。

Firefox 2: 1 と 2 は正しい解釈だ ({ から最後までを無視する) が、 3 はやはりなぜか @media @規則全体を無視する。

Opera 9: 1 と 3 は正しく解釈するが、 2 は属性値全体を無視する (対応する }] があっても同じ)。 (名無しさん)

[64] >>63 { を [ や ( に変えると、 WinIE 6 や Firefox 2 は同じ結果、 Opera 9 は 2 も PASS になりました。 (名無しさん)

[65] >>64 でも Opera 9 は https://suika.suikawiki.org/gate/2007/cssom/viewer?c=color%3A%20red%3B%0D%0Acolor%3A%20green%3B%0D%0A(%0D%0Acolor%3A%20red%3B%0D%0Acolor%3A%20red%0D%0A;h=%3Cstyle%3Ebody%20%7Bcolor%3A%20red%7D%3C%2Fstyle%3E%0D%0A%3Cp%3EPASS%20if%20%3Cem%3Egreen%3C%2Fem%3E.%3C%2Fp%3E%0D%0A;p=n;x=style-attribute が FAIL になります。 [ でも同じです。

つまり、Opera 9 は [ や ( の対応関係をチェックしていません。 (名無しさん)

[66] >>62-65 Opera 9 は { の対応もチェックしていないようです。

https://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20color%3A%20green%3B%0D%0A%20%20%7B%0D%0A%20%20%20%20color%3A%20red%3B%0D%0A%20%20%20%20color%3A%20red%3B%0D%0A%0D%0A;h=%3Cp%3EPASS%20if%20%3Cem%3Egreen%3C%2Fem%3E.%3C%2Fp%3E%0D%0A;p=n;x=style-element

でも { の前に他のものがあればちゃんとブロック全体を無視します。

https://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20color%3A%20green%3B%0D%0A%20%20a%7B%0D%0A%20%20%20%20color%3A%20red%3B%0D%0A%20%20%20%20color%3A%20red%3B%0D%0A%0D%0A;h=%3Cp%3EPASS%20if%20%3Cem%3Egreen%3C%2Fem%3E.%3C%2Fp%3E%0D%0A;p=n;x=style-element

(名無しさん)

[67] >>66 の動作は WinIE 6 と同じようです。 WinIE 6 は >>66 の2つ目のテストを PASS します。 (名無しさん)

[68] 選択子中に ; がある: https://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20color%3A%20green%3B%0A%7D%0Aa%3B%20p%20%7B%0A%20%20color%3A%20red%3B%0A%7D%0A;h=%3Cp%3EPASS%20if%20%3Cem%3Egreen%3C%2Fem%3E.%3C%2Fp%3E%0A;p=n;x=style-element

WinIE 6、Firefox 2、Opera 9 も仕様通りの動作。 (名無しさん)

[69] @; p { ... } https://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20color%3A%20green%3B%0D%0A%7D%0D%0A%40%3B%20p%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D%0D%0A;h=%3Cp%3EPASS%20if%20%3Cem%3Egreen%3C%2Fem%3E.%3C%2Fp%3E%0D%0A;p=n;x=style-element

Firefox 2 と WinIE 6 は @ 以後全体を無視。 Opera 9 は @ と ; だけを無視。 (名無しさん)

[70] >>69 の @ の後に空白を入れてみた: https://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20color%3A%20green%3B%0A%7D%0A%40%20%3B%20p%20%7B%0A%20%20color%3A%20red%3B%0A%7D%0A;h=%3Cp%3EPASS%20if%20%3Cem%3Egreen%3C%2Fem%3E.%3C%2Fp%3E%0A;p=n;x=style-element

Firefox 2 は @ 以後全体を無視。 WinIE 6 と Opera は @ と ; だけを無視。 (名無しさん)

[71]

https://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20color%3A%20%22%0A%20%20%22%3B%0A%20%20color%3A%20red%20!important%3B%0A%20%20color%3A%20green%3B%0A%7D%0A;h=;p=n;x=style-element
https://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20color%3A%20url(%22%0D%0A%20%20%22)%3B%0D%0A%20%20color%3A%20red%20!important%3B%0D%0A%20%20color%3A%20green%3B%0D%0A%7D%0D%0A;h=;p=n;x=style-element

(名無しさん)

[72] >>71 Opera 9, WinIE 6 はどちらも緑色。 Firefox 2 は前者は緑色、後者は黒色 (url( 以後全部無視)。 (名無しさん)

[73] >>71-72 CSS 2.1 の字句の定義通りに解釈すると、引用符〜改行の直前は INVALID とみなされる。てことで INVALID 2連続の後 color: red !important; があるので、そこまで無視される。これが、前者が緑色になる根拠。ただ、 >>7 の引用符の対応を考慮しろという規定があるので、赤色になるという解釈もできなくはない。

後者の場合、 url( があるので、同じく >>7 の ( の組を考慮しろという規定より、どこにも ) がないので、残り全部無視されるというのが一番正しい。この点は Firefox 2 が正しい。ただし、 INVALID の規定よりも " の対応関係の規定を優先すると解釈した場合、 " も ( も一応ちゃんと組になってはいるので、赤色になるのが正しいということにもできなくもない。 (名無しさん)

[74] https://suika.suikawiki.org/gate/2007/cssom/viewer?c=%40media%20all%20%7B%0A%20%20%40invalid%20%7D%0A%20%20p%20%7B%20%7D%0A%7D%0A;h=;p=n;x=style-element (名無しさん)

[75] >>74 Firefox 2 と WinIE 6 は p を無視する (正しい) が、 Opera 9 は p が @media の外にあるとみなす。 (名無しさん)

[76] https://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7D%0Aq%20%7B%20%7D;h=;p=n;x=style-element (名無しさん)

[77] >>76 Firefox 2 と Opera 9 はすべて無視する (正しい) が、 WinIE 6 は q の規則集合とみなす。 (名無しさん)

[78] https://suika.suikawiki.org/gate/2007/cssom/viewer?c=a%20%3Aunknown(%20%7B%20%7D%0D%0Ap%20%7B%20%7D%0D%0A)%20%7B%7D%0D%0Aq%20%7B%7D%0D%0A%20;h=;p=n;x=style-element (名無しさん)

[79] >>78 WinIE 6 と Opera 9 は 4つの規則集合、 Firefox 2 は2つの規則集合とみなします。 (名無しさん)

[80] https://suika.suikawiki.org/gate/2007/cssom/viewer?c=a%20%5B%20%7B%20%7D%0D%0Ap%20%7B%20%7D%0D%0A%5D%20%7B%7D%0D%0Aq%20%7B%7D%0D%0A%20;h=;p=n;x=style-element (名無しさん)

[81] >>80 こちらは Firefox 2、Opera 9、WinIE 6 共に4つの規則集合として解釈します。 (名無しさん)

[82] >>78-79 https://suika.suikawiki.org/gate/2007/cssom/viewer?c=a%20%3Anot(%20%7B%20%7D%0Ap%20%7B%20%7D%0A)%20%7B%7D%0Aq%20%7B%7D%0A%20;h=;p=n;x=style-element は Firefox 2 も4つの規則集合とみなします。 (名無しさん)

[83] >>78-82 規則集合の定義のところで選択子は { の直前まで全部と書いてあるので、 4つの規則集合とみなすのが正解です。

[92] CSS Print Profile ( (2013-03-14 20:50:03 +09:00 版)) http://www.w3.org/TR/2013/NOTE-css-print-20130314/#section-conformance