もずはっく日記(2007年3月)

Bug 5127 [CSS2][Cairo] outlineプロパティから'invert'値をドロップすべき
初回投稿日時: 2007年03月17日02時34分40秒
最終更新日時: 2007年03月17日02時39分52秒
カテゴリ: CSS Mozilla Core
SNS: Tweet (list)

修正完了。

この修正により、trunkではoutline-colorでinvert値がサポートされなくなった。invertを指定しても色が設定されないのではなく、エラーになってしまうことに要注意。

つまり、outline: 1px solid invert;とすると、Gecko1.9ではエラーになり、この行は無視される。つまり、outlineプロパティでの色指定でinvert値を指定するのはクロスブラウザなスタイルを書くためのノウハウではタブーとなる。次のような例を考えてみよう。

a:link {
  outline: 1px dotted;
  outline: 3px solid invert;
}

この例のような状況があり得ないと思うなら、ひとつめのスタイル指定をUAのデフォルトスタイルシートに入っている指定だと考えると、よくある話であると思ってもらえると思う。この例の表示結果は、invert値を解釈するUAでは太さ3ピクセルの実線として表示されるが、Gecko1.9では二つ目のスタイル指定を無視するために、太さ1ピクセルの点線として表示される(色はcolor値になる)。

つまり、outline-styleとoutline-widthのみを指定し、残りをUAデフォルトの状態にしたい、というのが2行目の意図である場合(大抵は反転させたいのではなく、そうだろう)、outlineで色を指定しなければ良い。色の指定が短縮プロパティで指定されていない場合、outline-color値はリセットされ、invertがデフォルトで用いられる他のUAではinvertが、Gecko1.9ではinvertがサポートできないUAのデフォルト値であるcolor値が設定されることになる。

つまり、outline: 3px solid;と書くのが意図したものとしては正解。この場合、色はUAの初期値が利用され、outline-styleとoutline-widthのみを変更することができる。