タイトルはIE8+ですが主にIE9+、一部IE10+。
スマホは大体OK、一部ベンダープレフィックスorフォールバックが必要。
方針としてはモダンブラウザ向けにCSS3を使って書いたのち、modernizr.js でレガシー用のスタイルを書いていきます。

box-shadow

box-shadow: 10px 10px 10px 10px #EEE;
box-shadow: 10px 10px 10px 10px #EEE inset;

text-shadow

text-shadow: 5px 5px 2px #000;

border-radius

border-radius: 4px 6px 8px 4px;
border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px; /* 水平/垂直 */

background-size

background-size: 10px 20px;
/* contain 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
   cover 縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する */

opacity

opacity: .8;

/* IE8 */
-ms-filter: "alpha(opacity=80)";
zoom:1;

box-sizing

IE8でも使用可。

box-sizing: border-box;
/* border-box パディングとボーダーを幅と高さに含める
   content-box パディングとボーダーを幅と高さに含めない（初期値） */

table, table-cell

IE8でも使用可。

E {display: table; width: 100%;}
E F {display: table-cell;}

rgba()

background-color: rgba(0, 0, 0, 0.6);

text-overflow

ボックスから溢れたテキストの表示方法を指定する。

width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
/* clip 省略符号を表示しない
   ellipsis 省略符号を表示する */

appearance

デフォルトの部品のスタイルを指定する。大体none。

 -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;

transition

滑らかな動きを指定する。transition-property、transition-duration、transition-timing-function、transition-delayのショートハンド。

transition: all 1s linear 500ms;
/* linear 等速、ease ゆっくり始まりゆっくり終わる（初期値）
   その他 ease-in、ease-out、ease-in-out等
   直接指定 cubic-bezier(a, b, c, d)  */

/* ↓のような指定をすることが多い
 -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
         transition: all 200ms; */

transform

2D、3D変形処理を指定する。処理は全て関数。
スマホではGPUを使う（と言われている）ので滑らかな表現が可能。
2DはIE9～、3DはIE10～ でサポート。
スマホはiOS3.2、Android2.1以上でサポートなので堂々と使える。

-webkit-transform: translate(10px, 20px);
	-ms-transform: translate(10px, 20px);
       	transform: translate(10px, 20px);
/* -msベンダープレフィックスはIE9用。IE9は2D変形のみのサポートなので3D変形の場合は必要ないがコピペできるように書いておく。ここに載ってないプロパティに関しては-mozが必要なものもある。 */

translate3d()

移動を指定する。

-webkit-transform: translate3d(10px, 5%, 0); /* X軸 Y軸 Z軸 */
    -ms-transform: translate3d(10px, 5%, 0);
        transform: translate3d(10px, 5%, 0);
/* YとZの値は省略可
   3d変形の場合-ms ベンダープレフィックスは必要ない */

他にtranslate(), translateX(), translateY(), translateZ()もある。
translate3d()でないとスマホのハードウェアアクセラレーションのトリガーにならないという噂もあったが今は2dでも大丈夫そう。
https://w3g.jp/blog/web_gpu_adopt

パフォーマンスは 2dも3dもそれほど変わらない。
http://jsperf.com/translate3d-vs-xy/28

scale()

縮尺比率を指定する。1が基本。

-webkit-transform: scale(0.5, 0.5);
	-ms-transform: scale(0.5, 0.5);
       	transform: scale(0.5, 0.5);

scaleX()、scaleY()、scaleZ()、scale3dもあるがあまり使わない。

rotate()

回転を指定する。単位はdeg。

-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
       	transform: rotate(180deg);

transform-origin

変形処理の基準位置を指定する。rotate()と一緒に指定することが多い。

-webkit-transform-origin: 5px 5px;
	-ms-transform-origin: 5px 5px;
       	transform-origin: 5px 5px;
/* 左上からの基準位置。初期値は50%, 50%, 0。z軸は省略可 */

animation

アニメーションを指定する。@keyframesにアニメーションの流れを定義することができる。
animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-directionのショートハンド。

-webkit-animation: hoge 1.5s ease-out infinite;
        animation: hoge 1.5s ease-out infinite;
@-webkit-keyframes hoge {
   0% { -webkit-transform: scale(1, 1); }
  50% { opacity: 1; }
 100% { -webkit-transform: scale(3, 3); opacity: 0.0; }
}
@keyframes hoge {
   0% { transform: scale(1, 1); }
  50% { opacity: 1; }
 100% { transform: scale(3, 3); opacity: 0.0; }
}

animationの各設定について

animation: hoge 1.5s ease-out 0 infinite normal;
/* 順に以下のプロパティ */
animation-name: hoge;
/* キーフレーム名。必須。初期値noneで、その場合アニメーションしない。 */
animation-duration:  1.5s;
/* アニメーション一回分の長さ。必須。0以下の場合アニメーションしない。 */
animation-timing-function: ease;
/* イージング。省略可。初期値ease。他にlinear, ease-in, ease-out, ease-in-out, cubic-bezier(), step-start, step-stop, steps()がある */
animation-delay: 0;
/* アニメーション開始のディレイ。省略可。初期値0。 */
animation-iteration-count: infinite;
/* アニメーション繰り返し回数。省略可。初期値1。infiniteで無限回。 */
animation-direction: normal;
/* アニメーション方向の指定。省略可。初期値normalで通常方向、alternateで偶数回では逆方向再生になる。*/

keyframesについて

animation-durationの時間を％で分けてキーとなるフレームにスタイルを指定する。

/* 波紋のようなエフェクト */
@keyframes hoge {
   0% { transform: scale(1, 1); }
  50% { opacity: 1; }
 100% { transform: scale(3, 3); opacity: 0.0; }
}

※真面目にアニメーションを作ろうとすると大変なので、どこかでサンプルを拾ってきて少しずつ直すのが良いです。

calc()

計算式で数値の指定ができる。

width: 98%; /* IE8以下とAndroid4.3以下用フォールバック */
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);
/* 加減乗除が可能。calc() をサポートしていなければ指定は無視される */

番外

セレクタ

IE8以上で使えるセレクタ

• E[foo=”bar”] 属性セレクタ
• E:first-child 親要素の最初の子要素
• E > F 親要素の直接の子関係
• E + F 隣接セレクタ
• :first-letter
• :first-line

IE9～、スマホで使えるセレクタ

• :nth-child
• :nth-of-type
• :last-child
• :not

filter

視覚効果フィルタ。以下の種類がある。

filter: url(resources.svg);
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

ブラウザ対応、パフォーマンス等
http://qiita.com/bluebird/items/a3f55206984fa8105e39

 -webkit-filter:sepia(100%);   /* for Google Chrome and Safari */
    -moz-filter:sepia(100%);   /* for Firefox */
     -ms-filter:sepia(100%);   /* for Internet Explorer */
         filter:sepia(100%);

iOSっぽいすりガラスを作る
http://codepen.io/rikschennink/pen/zvcgx?editors=011

modernizr.js

閲覧中のブラウザに応じてに各機能のサポート状況を示すclass名を追加してくれる。
使い方
http://liginc.co.jp/web/js/other-js/128673

/* 3D変形 をサポートしている場合 */
html.csstransforms3d .hoge {
    transform: translate3d(10px, 10px, 0);
}
/* サポートしていない場合 */
html.no-csstransforms3d .hoge {
    left: 10px;
    top: 10px;
}

javascript内でも利用できる。

if(Modernizr.csstransforms3d) {
   // 使用できる場合の処理
}else{
   // 使用できない場合の処理
}

BEM

命名規則。class名の文脈を理解しやすくする。Block, Element, Modifier の頭文字を取って BEM 。
* Block .. アプリケーションの構成要素 に当たるもの。単体の Block （状況によるけど table とか）もあれば複数の Block を含む複合物（ロゴやメニューを含むヘッダーとか）のものもある。
* Element .. Block の構成要素 （検索 Block 内の入力欄とボタンとか）。
* Modifier .. 元となる Block や Element で一部スタイルの変更が必要な時にに使うもの 。

BEM の各カテゴリーを表現するために Element ではアンダースコア 2つ（ __ ）を名前の前に置き、Modifier ではハイフン2つ（ — ）を名前の前に置いて各カテゴリーを連結する。

例えば.contacts_web_form_headingというclass名ならばcontactsがBlock、web_formとheadingがElementなので.contacts__web_form__headingとする。

http://chroma.hatenablog.com/entry/2013/12/12/200817
http://blog.ruedap.com/2013/10/29/block-element-modifier