使えるとレスポンシブWebデザインに便利なCSS

box-sizing

27	21	6	8	9	10	6	2.3	3	4.2
○	△	○	○	○	○	○	○	○	○

デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。

	#box-sizing{
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	

特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。
例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。

デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅を指定します。
一方box-sizing:border-boxを指定した場合、2カラムは全体のカラム数の半分、つまり50%にあたるので単純にwidth:50%を指定すればOKです。これにpaddingでガター幅を指定します。
このようにカラム幅の計算が感覚的に行えます。最近では多くのFluid Grid SystemやCSSフレームワークで使用されてます。
（※余談：CSSプリプロセッサを使用すればそもそも計算の手間は省けますが…）

策定状況は草案です。なお、殆どのブラウザはpadding-boxに対応していません。
CSS Basic User Interface Module Level 3 (CSS3 UI)

Flexible Box

27	21	6	8	9	10	6	2.3	3	4.2
△	△	△	×	×	△	△	△	△	△

その名の通り柔軟にコンテンツを配置できます。縦並びや横並び、配置したボックスの並びや可変設定なども指定できます。特に表示する順序も変えることができるので、PCとスマートフォンサイズでコンテンツの順番を入れ替えたりできます。

	.flex{
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-direction: column;
		-moz-box-orient: vertical;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	.flex > div{
		-webkit-flex: 1;
		-moz-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}
	@media screen and (max-width: 600px){
		.flex > div:nth-child(1){
			-webkit-order: 3;
			-moz-box-ordinal-group: 3;
			-ms-flex-order: 3;
			order: 3;
		}
		.flex > div:nth-child(2){
			-webkit-order: 1;
			-moz-box-ordinal-group: 1;
			-ms-flex-order: 1;
			order: 1;
		}
		....
	}
	

現在はブラウザの対応状況もマチマチで、ひとつひとつ書くのも大変なのでCSSプリプロセッサのMixinを使ったほうがいいと思います。
詳細な使い方は下記のサイトで丁寧に説明されてるので参考にしてください。
今こそ未来！CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG

策定状況は勧告候補です。
CSS Flexible Box Layout Module

Multi column

27	21	6	8	9	10	6	2.3	3	4.2
△	△	△	×	×	○	△	△	△	△

マルチカラムレイアウトを作成できます。
カラム幅とカラム間の幅を指定することができ、表示領域に応じて自動的にカラム数を調整してくれます。

	.column{
		margin-bottom: 3em;
		-webkit-column-width: 200px;
		-moz-column-width: 200px;
		column-width: 200px;
		-webkit-column-gap: 50px;
		-moz-column-gap: 50px;
		column-gap: 50px;
	}
	

IE10以外はベンダープレフィックスが必要です。
なお、殆どのブラウザはbreak-before, break-after, break-insideに対応してません。
策定状況は勧告候補です。CSS Multi-column Layout Module

calc

27	21	6	8	9	10	6	2.3	3	4.2
○	○	○	×	○	○	△	×	×	×

calcはCSS内で四則演算が使えます。計算結果の値を返します。
相対数値と固定数値も合わせて使用できるので、width:calc(100%-20px)といった使い方も可能です。
box-sizingと同様にFluid Grid Systemでwidthとmarginやborderを同時に指定するときなどに便利です。

	.calc{
		margin: 0 20px;
		width: -webkit-calc(100% - 40px);
		width: calc(100% - 40px);
	}
	

Android非対応、Safariは-webkit-をつけて対応します。
策定状況は勧告候補です。
CSS Values and Units Module Level 3

background-size

27	21	6	8	9	10	6	2.3	3	4.2
○	○	○	×	○	○	○	○	○	○

background-sizeはCSSで指定した背景画像のサイズを指定します。値にはpxや%、coverなどを指定できます。
Retinaなど高解像度ディスプレイ対応に使用できます。
高解像度ディスプレイに画像を対応するとき、img要素の画像はwidth、heightで指定しますが、CSSで指定した背景画像の場合はbackground-sizeでサイズを調整します。

	.cat{
		width: 300px;
		height: 200px;
		background: url(img_cat.jpg);
		background-size: 300px 200px;
	}
	

策定状況は勧告候補です。
CSS Backgrounds and Borders Module Level 3

rem

27	21	6	8	9	10	6	2.3	3	4.2
○	○	○	×	○	○	○	○	○	○

remは単位のひとつで、root+emの意味です。rootつまりhtmlのフォントサイズを基準にしたサイズとなります。
マルチデバイスに対応するためにフォントサイズは相対サイズのemや%で指定することが多いと思いますが、emは指定する位置によってコントロールしにくいことがあります。
その点remは常にどの箇所に指定しても常にrootを基準にしているので使用しやすいです。

	#rem li{		font-size: 1.5rem;	}
	#rem li strong{	font-size: 1.5rem;	}
	

策定状況は勧告候補です。
CSS Values and Units Module Level 3

終わりに

まだ非サポートのブラウザもあるので全ての状況で使用できるわけではないですが、案件によってはこれらのCSSをうまく活用することで作業がラクになったり、設計の幅が広がります。
その他、Grid Layout、Regions、vw、vhなども使えたら便利そうですが、まだ利用できるブラウザが限られてるのと私が消化不良のため今回は省いてます。
レスポンシブWebデザインはそもそもそれまでに合った技術を組み合わせたものなので、構成によってはまだまだ工夫したりしなければならないケースがありますが、新しい仕様が出てきたり提案されたりしていますので、今後より設計がしやすくなっていくと思われます。

参考

• CSS Values and Units Module Level 3
• CSS Grid Layout
• CSS Regions Module Level 1