HTML5-CSS3-jQuery

ベンダープレフィックス

『ベンダープレフィックス』とは、草案段階のプロパティに対して 先行して実装する場合に、 それが拡張機能であることを明示する ために付けるプレフィックス（接頭辞）のこと。

border-radius: 50px; // プレフィックス無し
-webkit-border-radius: 50px; // chrome用、safari用
-moz-border-radius: 50px; // firefox用

-moz-　　…… Firefox
-webkit-　…… Google Chrome、Safari
-o-　　　　…… Opera
-ms-　　　…… Internet Explorer

セレクタの追加

• E[foo^="bar"]

  foo属性の値がbarで始まっている要素

• E[foo$="bar"]

  foo属性の値がbarで終わっている要素

• E[foo*="bar"]

  foo属性の値にbarを含む要素

• E:root

  文書のルート要素

• E:nth-child(n)

  n番目の子要素

• E:nth-last-child(n)

  後ろから数えてn番目の子要素

• E:nth-of-type(n)

  n番目の特定の種類の要素

• E:nth-last-of-type(n)

  後ろから数えてn番目の特定の種類の要素

• E:last-child

  最後の子要素

• E:first-of-type

  最初のその種類の要素

• E:last-of-type

  最後のその種類の要素

• E:only-child

  唯一の子要素

• E:only-of-type

  唯一のその種類の要素

• E:empty

  子を持たない要素

• E:target

  URI参照のターゲットとなる要素

• E:enabled

  有効となっているユーザーインターフェース要素

• E:disabled

  無効となっているユーザーインターフェース要素

• E:checked

  チェックされているユーザーインターフェース要素（例えば、ラジオボタンやチェックボックス）

• E:not(s)

  シンプルセレクタにマッチしない要素

• E ~ F

  E要素の前にあるF要素

CSS3の新機能

border-radius: 50px; // プレフィックス無し
-webkit-border-radius: 50px; // chrome用、safari用
-moz-border-radius: 50px; // firefox用

box-shadow: 10px 10px 20px #000; // プレフィックス無し
-webkit-box-shadow: 10px 10px 20px #000; // chrome用、safari用
-moz-box-shadow: 10px 10px 20px #000; // firefox用

box-shadow: 10px 10px 20px rgba(0,0,75,0.5); // プレフィックス無し
-webkit-box-shadow: 10px 10px 20px rgba(0,0,75,0.5); 
// chrome用、safari用
-moz-box-shadow: 10px 10px 20px rgba(0,0,75,0.5); // firefox用

text-shadow: 4px 4px 7px #777; // プレフィックス無し
-webkit-text-shadow: 4px 4px 7px #777; // chrome用、safari用
-moz-text-shadow: 4px 4px 7px #777; // firefox用

// firefox用
background-image: -moz-linear-gradient(top, #0099ff, #000);

// 旧chrome用、safari用
background: -webkit-gradient(linear, left top, left bottom, 
from(#0099ff), to(#000));

// chrome用、safari用
background-image: -webkit-linear-gradient(top, #0099ff, #000);

// firefox用
background: -moz-radial-gradient(100px, circle closest-corner, 
#0099FF 0%, #000 100%);

// 旧chrome用、safari用
background: -webkit-gradient(radial, center center, 0, center center, 
100, from(#0099FF),to(#000000));

// chrome用、safari用
background: -webkit-radial-gradient(100px, circle closest-corner, 
#0099FF 0%, #000 100%);

background-color: #ff9900;
opacity: 0.5;

/* もしくは */
background-color: rgba(255,153,0,0.5);

#box {
background-color: #ff9900;
-webkit-transition: all 1s ease-out;
}

#box:hover{
background-color: #0099ff;
-webkit-box-shadow: 0 0 30px #000;
}

IE対応