2012-05-17

border: 2px ridge gray

borderプロパティーのridgeはブラウザーによってどのように違うかを軽くテストした。複数の枠線を組み合わせて作るわずかに凹んだ(凸んだ)直線の代わりに使うのは無理がありそうという結論だった。だった。だった……。

テストは以下のような簡単なCSSで行った。

.test {
  border-left: 2px ridge gray;
  height: 240px;
}

Firefox 12が一番コントラスがきつく、Chrome 19とSafari 5、Opera 11が明るい方が指定した色になりコントラストは弱い。Internet Explorer 9はこの両者の中間。色によって違う可能性もある。

RGBAで透過させると擬似的にコントラスをが低下するのでCh19あたりからぎりぎりIE9までは違和感ない程度にコントラスを合わせられるが、Fx12はちょっと無理そう。事情により複数の枠線を組み合わせられない場合はborderとbox-shadowプロパティーを組み合わせて実現するというのがモダンで現実的な解っぽい。insetなbox-shadowを使うとOpera 11でborderと重なって見えないバグ(?)とかにはまる(った)。