Google ChromeのCSS 3対応状況

　Googleから新しくGoogle Chromeというブラウザがリリースされた。ブラウザエンジンにはWebKitが採用され、Safari 3.1と同等の機能を持つとされている。

　そこで今回は、本連載で取り上げたCSS 3の機能にChromeがどのぐらい対応しているのかを検証していきたい。現時点では、Safariが対応している、

• 文字のドロップシャドウ：text-shadow
• 文字のアウトライン：-webkit-text-stroke
• Webフォント：@font-face
• カラーマネジメント

　上記の機能に対応しておらず、Safariと完全に同じというわけではないようだ。

罫線を角丸で表示するborder-radius：対応

　border-radiusは罫線を角丸で表示するCSS 3のプロパティだ。Chromeでは、Safariと同じように-webkit-border-radiusというプロパティ名で対応している。

Google Chromeでの表示

div     {
        -webkit-border-radius: 20px;
        border: solid 5px blue;
        background-color: skyblue;
        padding: 20px;
        width: 100px;
        }

※ブラウザで表示を確認する

• ［参照］border-radiusについて

1枚の画像からサイズ可変な罫線を表示するborder-image：対応

　border-imageは1枚の画像を利用してサイズ可変な罫線を表示するCSS 3のプロパティだ。Chromeでは、Safariと同じように-webkit-border-imageというプロパティ名で対応している。

Google Chromeでの表示

div     {
        -webkit-border-image: url("wakublue.png") 20 20 20 20 / 20px;
        }

※ブラウザで表示を確認する

• ［参照］border-imageについて

カラーマネジメント：未対応