[CSS]CSS 3のサンプルとブラウザでの見え方
Post on:2008年4月24日
CSS3対応ブラウザも増えてきたので、CSS3.infoのエントリー「CSS3 Preview」のサンプルが、どのようにブラウザで表示されるかを試してみました。
使用したブラウザは、Firefox 3beta5, Safari 3.1, Opera 9.5betaです。
各プロパティの下の記載は、キャプチャを撮ったブラウザで、対応ブラウザの全てではありません。
Border
![border-colorのキャプチャ](/wp-content/uploads/2008042401-01.png)
border-color
Fx 3
![border-imageのキャプチャ](/wp-content/uploads/2008042401-02.png)
border-image
Safari 3.1
![border-radiusのキャプチャ](/wp-content/uploads/2008042401-03.png)
border-radius
Fx 3
![box-shadowのキャプチャ](/wp-content/uploads/2008042401-04.png)
box-shadow
Safari 3.1
Background
![background-origin and background-clipのキャプチャ](/wp-content/uploads/2008042401-05.png)
background-origin and background-clip
Safari 3.1
![background-sizeのキャプチャ](/wp-content/uploads/2008042401-06.png)
background-size
Safari 3.1
![multiple backgroundsのキャプチャ](/wp-content/uploads/2008042401-07.png)
multiple backgrounds
Safari 3.1
Color
![HSL colorsのキャプチャ](/wp-content/uploads/2008042401-08.png)
HSL colors
Fx 3
![HSLA colorsのキャプチャ](/wp-content/uploads/2008042401-09.png)
HSLA colors
Fx 3
![opacityのキャプチャ](/wp-content/uploads/2008042401-10.png)
opacity
Safari 3.1
![RGBA colorsのキャプチャ](/wp-content/uploads/2008042401-11.png)
RGBA colors
Fx 3
Text effects
![text-shadowのキャプチャ](/wp-content/uploads/2008042401-12.png)
text-shadow
Safari 3.1
![text-overflowのキャプチャ](/wp-content/uploads/2008042401-13.png)
text-overflow
Fx 3
![word-wrapのキャプチャ](/wp-content/uploads/2008042401-14.png)
word-wrap
Safari 3.1
User-interface
![box-sizingのキャプチャ](/wp-content/uploads/2008042401-15.png)
box-sizing
Fx 3
![resizeのキャプチャ](/wp-content/uploads/2008042401-16.png)
resize
Safari 3.1
![outlineのキャプチャ](/wp-content/uploads/2008042401-17.png)
outline
Fx 3
Selectors
![attribute selectorsのキャプチャ](/wp-content/uploads/2008042401-18.png)
attribute selectors
Safari 3.1
Other modules
![media queriesのキャプチャ](/wp-content/uploads/2008042401-19.png)
media queries
Safari 3.1
![multi-column layoutのキャプチャ](/wp-content/uploads/2008042401-20.png)
multi-column layout
Fx 2
![speachのキャプチャ](/wp-content/uploads/2008042401-21.png)
speach
Op 9.5
sponsors