<Candidate Recommendation>
この項に記載したプロパティは「勧告候補(Candidate Recommendation)」になっているため、W3Cからはベンダープレフィックスを外すことを推奨されています。
opacity
opacity:0.5;
rgba
color:rgba
(245,00,127,0.75);
border-radius
border-radius:20px;
text-shadow
text-shadow:
-2px -2px 1px #fff,
2px 2px 1px #aaa
background
background:
url(images/bg01.png) repeat-x, url(images/bg02.png) repeat-y, url(images/bg03.png) repeat;
background-clip
background-clip:padding-box;
background-clip:content-box;
background-clip:border-box;
background-origin
background-origin:padding-box;
background-origin:content-box;
background-origin:border-box;
box-shadow
W3C
box-shadow:8px 8px 5px 3px rgba(00,24,49,0.3);
Webkit/Mozila/Opera/IE9
- -webkit-box-shadow:8px 8px 5px 3px rgba(00,24,49,0.3);
- -moz-box-shadow:8px 8px 5px 3px rgba(00,24,49,0.3);
- -o-box-shadow:8px 8px 5px 3px rgba(00,24,49,0.3);
- -ms-box-shadow:8px 8px 5px 3px rgba(00,24,49,0.3);
linear-gradient
W3C
background:linear-gradient(top,#00eee6,#00baff);
Webkit/Mozila/Opera/IE9
- background:-webkit-linear-gradient(top,#00eee6,#00baff);
- background:-moz-linear-gradient(top,#00eee6,#00baff);
- background:-o-linear-gradient(top,#00eee6,#00baff);
- background:-ms-linear-gradient(top,#00eee6,#00baff);
radial-gradient
W3C
background:radial-gradient(50% 50%,circle contain,#00eee6,#00baff);
Webkit/Mozila/Opera/IE9
- background:-webkit-radial-gradient(50% 50%,circle contain,#00eee6,#00baff);
- background:-moz-radial-gradient(50% 50%,circle contain,#00eee6,#00baff);
- background:-o-radial-gradient(50% 50%,circle contain,#00eee6,#00baff);
- background:-ms-radial-gradient(50% 50%,circle contain,#00eee6,#00baff);
transform
W3C
transform:translate(10px,20px) rotate(5deg);
Webkit/Mozila/Opera/IE9
- -webkit-transform:translate(10px,20px) rotate(5deg);
- -moz-transform:translate(10px,20px) rotate(5deg);
- -o-transform:translate(10px,20px) rotate(5deg);
- -ms-transform:translate(10px,20px) rotate(5deg);
transition
青い四角にマウスを載せてください。
#transition .blue_box:hover{ background:#00baff; }
W3C
transition:background ease 1s;
Webkit/Mozila/Opera/IE9
- -webkit-transition:background ease 1s;
- -moz-transition:background ease 1s;
- -o-transition:background ease 1s;
- -ms-transition:background ease 1s;
box-sizing
W3C
[border-box]
width:280px;
padding:30px;box-sizing:border-box;
Webkit/Mozila/Opera/IE9
[border-box]
- width:280px;
- padding:30px;
- -webkit-box-sizing:border-box;
- -moz-box-sizing:border-box;
- -o-box-sizing:border-box;
- -ms-box-sizing:border-box;
columns
W3C
columns:4;
「ではみなさん、さういふふうに川だと云はれたり、乳の流れたあとだと云はれたりしてゐた、このぼんやりと白いものが何かご承知ですか。」 先生は、黒板に吊した大きな黒い星座の圖の、上から下へ白くけぶつた銀河帶のやうなところを指しながら、みんなに問ひをかけました。 カムパネルラが手をあげました。それから四五人手をあげました。ジヨバンニも手をあげようとして、急いでそのままやめました。 たしかにあれがみんな星だと、いつか雜誌で讀んだのでしたが、このごろはジヨバンニはまるで毎日教室でもねむく、本を讀むひまも讀む本もないので、なんだかどんなこともよくわからないといふ氣持がするのでした。 ところが先生は早くもそれを見附けたのでした。 「ジヨバンニさん。あなたはわかつてゐるのでせう。」 ジヨバンニは勢よく立ちあがりましたが、立つて見るともうはつきりとそれを答へることができないのでした。ザネリが前の席から、ふりかへつて、ジヨバンニを見てくすつとわらひました。ジヨバンニはもうどぎまぎしてまつ赤になつてしまひました。
Webkit/Mozila/Opera/IE9
- -webkit-columns:4;
- -moz-columns:4;
- -o-columns:4;
- -ms-columns:4;
「ではみなさん、さういふふうに川だと云はれたり、乳の流れたあとだと云はれたりしてゐた、このぼんやりと白いものが何かご承知ですか。」 先生は、黒板に吊した大きな黒い星座の圖の、上から下へ白くけぶつた銀河帶のやうなところを指しながら、みんなに問ひをかけました。 カムパネルラが手をあげました。それから四五人手をあげました。ジヨバンニも手をあげようとして、急いでそのままやめました。 たしかにあれがみんな星だと、いつか雜誌で讀んだのでしたが、このごろはジヨバンニはまるで毎日教室でもねむく、本を讀むひまも讀む本もないので、なんだかどんなこともよくわからないといふ氣持がするのでした。 ところが先生は早くもそれを見附けたのでした。 「ジヨバンニさん。あなたはわかつてゐるのでせう。」 ジヨバンニは勢よく立ちあがりましたが、立つて見るともうはつきりとそれを答へることができないのでした。ザネリが前の席から、ふりかへつて、ジヨバンニを見てくすつとわらひました。ジヨバンニはもうどぎまぎしてまつ赤になつてしまひました。
memo
- UIセレクターは基本的にベンダープレフィックスなしで使えるようですが、各ブラウザの対応待ちっぽいので省略。
- 各ブラウザのCSS3対応状況についてはフォローしていないので、[findmebyIP.com]とかを参考にしてください。
- 対応してるブラウザが少ないものは省略しました。追加が必要なものがあったらブログ記事の方にコメント頂ければ追加します。
- border-imageは入れたかったんですがうまくいかなかったので省略しました。余裕があったら追加しときます。