Google ChromeのCSS 3対応状況

エ・ビスコム・テック・ラボ
2008-09-05 21:50:01
  • このエントリーをはてなブックマークに追加
最新特集【一覧】

 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での表示 Google Chromeでの表示
div     {
        -webkit-border-radius: 20px;
        border: solid 5px blue;
        background-color: skyblue;
        padding: 20px;
        width: 100px;
        }
ブラウザで表示を確認する

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

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

Google Chromeでの表示 Google Chromeでの表示
div     {
        -webkit-border-image: url("wakublue.png") 20 20 20 20 / 20px;
        }
ブラウザで表示を確認する

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

  • 新着記事
  • 特集
  • ブログ