ASH | サーバ | セキュリティ | Linux | FreeBSD | DB | Web | CGI | Perl | Java | XML | プログラム | ネットワーク | 標準 | Tips集

CSS 3.0 対応状況

　CSS 3.0に対応しているブラウザも、出てきましたので、各ブラウザのCSS 3.0の対応状況を調べてみました。 CSS 3.0に対応しているブラウザでだけ、サンプルを見ることができます。
　uuAltCSSという、CSS3.0互換のJavaScriptライブラリを使うことで、CSS3.0の新機能を使うこともできます。

角の丸いボーダー枠（border-radius）

サンプル

　CSS 3.0に対応しているブラウザでは、下記のような、角の丸いボーダー枠が表示されます。
サンプル

ブラウザでの表示確認

　CSS 3.0のborder-radius属性に対応したブラウザでは、角の丸い枠が表示されます。
　CSS 3.0互換の-moz-border-radius属性に対応したブラウザでは、角の丸い枠が表示されます。
　CSS 3.0互換の-webkit-border-radius属性に対応したブラウザでは、角の丸い枠が表示されます。
　CSS 3.0互換のuuAltCSSが利用可能な場合、角の丸い枠が表示されます。

ブラウザの対応状況

属性 IE
8		 IE
7		 IE
6		 Firefox
3		 Safari
4		 Chrome
3		 Opera
10		 Sleipnir
2
border-radius × × × × × ○ × ×
-moz-border-radius × × × ○ × × × ×
-webkit-border-radius × × × × ○ ○ × ×
-uu-border-radius ○ ○ ○ ○ ○ ○ ○ ○

記述内容

　スタイルシートのborder-radiusで、ボーダー枠の角の半径を指定します。
　角が丸くなる分、paddingの値も大きくした方が良いです。
　uuAltCSSを利用する場合、上位タグに、viewbox(round_vv)が必要となります。
HTMLの記述 
<div class="round">
　CSS 3.0のborder-radius属性に対応したブラウザでは、角の丸い枠が表示されます。
</div>

<div class="round_moz">
　CSS 3.0互換の-moz-border-radius属性に対応したブラウザでは、角の丸い枠が表示されます。
</div>

<div class="round_webkit">
　CSS 3.0互換の-webkit-border-radius属性に対応したブラウザでは、角の丸い枠が表示されます。
</div>

<div class="round_vv"><div class="round_uu">
　CSS 3.0互換のuuAltCSSが利用可能な場合、角の丸い枠が表示されます。
</div></div>
CSSの記述 
div.round {
  border-radius: 10px;
  border: #000077 2px solid;
  padding: 5px;
}
div.round_moz {
  -moz-border-radius: 10px;
  border: #000077 2px solid;
  padding: 5px;
}
div.round_webkit {
  -webkit-border-radius: 10px;
  border: #000077 2px solid;
  padding: 5px;
}
div.round_vv {
  margin: 5px;
  padding: 0px;
}
div.round_uu {
  -uu-border-radius: 10px;
  border: #000077 2px solid;
  padding: 5px;
  margin: 0px;
}

画像を使ったボーダ枠（border-image,background-image）

サンプル

　CSS 3.0に対応しているブラウザでは、下記のような、画像枠が表示されます。
サンプル

ブラウザでの表示確認

　CSS 3.0のborder-image属性に対応したブラウザでは、画像枠が表示されます。
　CSS 3.0互換の-moz-border-image属性に対応したブラウザでは、画像枠が表示されます。
　CSS 3.0互換の-webkit-border-image属性に対応したブラウザでは、画像枠が表示されます。
　CSS 3.0互換のuuAltCSSが利用可能な場合、画像枠が表示されます。

ブラウザでの対応状況

属性 IE
8		 IE
7		 IE
6		 Firefox
3		 Safari
4		 Chrome
3		 Opera
10		 Sleipnir
2
border-image × × × × × × × ×
-moz-border-image × × × × × × × ×
-webkit-border-image × × × × ○ ○ × ×
-uu-background-image ○ ○ ○ ○ ○ ○ ○ ○

記述内容

　スタイルシートのborder-imageで、枠の画像ファイル 固定部分のドット数（上右下左） / ボーダー枠の幅（上右下左）を、指定します。
　uuAltCSSを利用する場合、border-imageの代わりにbackground-imageを使っています。また、上位タグに、viewbox(image_vv)が必要となります。
HTMLの記述 
<div class="image">
　CSS 3.0のborder-image属性に対応したブラウザでは、画像枠が表示されます。
</div>

<div class="image_moz">
　CSS 3.0互換の-moz-border-image属性に対応したブラウザでは、画像枠が表示されます。
</div>

<div class="image_webkit">
　CSS 3.0互換の-webkit-border-image属性に対応したブラウザでは、画像枠が表示されます。
</div>

<div class="image_vv"><div class="image_uu">
　CSS 3.0互換のuuAltCSSが利用可能な場合、画像枠が表示されます。
</div></div>
CSSの記述 
div.image {
  border-image: url(img/waku01.png) 20 35 / 20px 35px;
}
div.image_moz {
  -moz-border-image: url(img/waku01.png) 20 35 / 20px 35px;
}
div.image_webkit {
  -webkit-border-image: url(img/waku01.png) 20 35 / 20px 35px;
}
div.image_vv {
  margin: 5px;
  padding: 0px;
}
div.image_uu {
  margin: 0px;
  padding: 20px 35px;
  -uu-background-image:
    url(img/waku01tl.png), url(img/waku01tr.png), url(img/waku01bl.png), url(img/waku01br.png),
    url(img/waku01t.png), url(img/waku01l.png), url(img/waku01r.png), url(img/waku01b.png);
  -uu-background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat,
    repeat-x, repeat-y, repeat-y, repeat-x;
  -uu-background-position:
    left top, right top, left bottom, right bottom,
    center top, left middle, right middle, center bottom;
}
枠の画像
枠の画像

ボックスのドロップシャドウ（box-shadow）

サンプル

　CSS 3.0に対応しているブラウザでは、下記のような、影付きのボックスが表示されます。
サンプル

ブラウザでの表示確認

　CSS 3.0のbox-shadow属性に対応したブラウザでは、影付きのボックスが表示されます。
　CSS 3.0互換の-moz-box-shadow属性に対応したブラウザでは、影付きのボックスが表示されます。
　CSS 3.0互換の-webkit-box-shadow属性に対応したブラウザでは、影付きのボックスが表示されます。
　CSS 3.0互換のuuAltCSSが利用可能な場合、影付きのボックスが表示されます。

ブラウザの対応状況

属性 IE
8		 IE
7		 IE
6		 Firefox
3		 Safari
4		 Chrome
3		 Opera
10		 Sleipnir
2
box-shadow × × × × × × × ×
-moz-box-shadow × × × × × × × ×
-webkit-box-shadow × × × × ○ ○ × ×
-uu-box-shadow ○ ○ ○ ○ ○ ○ ○ ○

記述内容

　スタイルシートのbox-shadowで、影の位置、影の大きさ、影の色を指定します。
　borer枠を表示し、影が付く分、marginの値を大きくした方が良いです。
　uuAltCSSを利用する場合、上位タグに、viewbox(boxshadow_vv)が必要となります。
HTMLの記述 
<div class="boxshadow">
　CSS 3.0のbox-shadow属性に対応したブラウザでは、影付きのボックスが表示されます。
</div>

<div class="boxshadow_moz">
　CSS 3.0互換の-moz-box-shadow属性に対応したブラウザでは、影付きのボックスが表示されます。
</div>

<div class="boxshadow_webkit">
　CSS 3.0互換の-webkit-box-shadow属性に対応したブラウザでは、影付きのボックスが表示されます。
</div>

<div class="boxshadow_vv"><div class="boxshadow_uu">
　CSS 3.0互換のuuAltCSSが利用可能な場合、影付きのボックスが表示されます。
</div></div>
CSSの記述 
div.boxshadow {
  border: #000077 1px solid;
  box-shadow: 2px 2px 3px #555599;
  margin: 7px 3px;
}
div.boxshadow_moz {
  border: #000077 1px solid;
  -moz-box-shadow: 2px 2px 3px #555599;
  margin: 7px 3px;
}
div.boxshadow_webkit {
  border: #000077 1px solid;
  -webkit-box-shadow: 2px 2px 3px #555599;
  margin: 7px 3px;
}
div.boxshadow_vv {
  margin: 0px;
  padding: 5px 8px 8px 5px;
}
div.boxshadow_uu {
  border: #000077 1px solid;
  -uu-box-shadow: 2px 2px 3px #555599;
  margin: 0px;
  padding: 2px 1px;
}

文字のドロップシャドウ（text-shadow）

サンプル

　CSS 3.0に対応しているブラウザでは、下記のように、文字に影が表示されます。
サンプル

ブラウザでの表示確認

　CSS 3.0のtext-shadow属性に対応したブラウザでは、文字に影が表示されます。
　CSS 3.0互換のuuAltCSSが利用可能な場合、文字に影が表示されます。

ブラウザの対応状況

属性 IE
8		 IE
7		 IE
6		 Firefox
3		 Safari
4		 Chrome
3		 Opera
10		 Sleipnir
2
text-shadow × × × × ○ ○ ○ ×
-uu-text-shadow △ △ △ × ○ ○ ○ △

記述内容

　スタイルシートのtext-shadowで、影の位置、影の大きさ、影の色を指定します。
HTMLの記述 
<div class="shadow">
　CSS 3.0のtext-shadow属性に対応したブラウザでは、文字に影が表示されます。
</div>

<div class="shadow_uu">
　CSS 3.0互換のuuAltCSSが利用可能な場合、文字に影が表示されます。
</div>
CSSの記述 
div.shadow {
  text-shadow: 1px 1px 3px #000099;
}
div.shadow_uu {
  -uu-text-shadow: 1px 1px 3px #000099;
}

CSS3.0の仕様

　CSS3.0の仕様は、W3Cによって仕様策定作業中です。 作業状況や仕様書は、W3Cのサイト(English)で確認してください。
　CSS3の仕様書は、モジュール単位に分割されています。ここでは、主なモジュールのみ紹介しています。
　日本語訳のページも掲載していますが、正式な仕様書はW3Cの英語版ですので、参考程度に利用してください。


[WebデザインTips] [ASHのホームページ]
Copyright (C) 1995-2009 ASH.
URL:http://ash.jp/ Mail:info@ash.jp