Webページをコーディングする際に、昔から一番コストがかかる作業が各ブラウザへの対応です。
昔からWeb制作をしてきた人は、クロスブラウザ 、主にIEへの対応で苦労しないデザインとかタグの組み方のノウハウが蓄積していると思います。

• IE6を基準に、無理なデザインはしない
• 透過PNGは使わない
• 各OS標準・共通の書体以外は全部画像にする
• ブラウザごとにCSSを細かく分ける
• 最新のCSSハックを研究・勉強する
• IEで使えないCSSセレクタは無いものとする

つい最近まで、こんなセオリーがまかりとおっていました。 しかし今は、Javascriptのライブラリを使う方法が主流になりつつあります。シェア的にももう問題ないですし、何より簡単です。

IE9.js

http://code.google.com/p/ie7-js/

IE5.x〜のIEをHTML5、CSS3に対応させ、さらにいくつかのバグも除去してくれます。

• CSS3のセレクタへの対応
• 透過PNG対応
• HTML5要素への対応
• IE5/6のバグを修正

昔のIE7.jsの頃のイマイチな感じからかなり進化してIE9.jsはかなり使えるものになってきました。以下の機能一覧表を観れば、今までのセオリーは忘れてもいいと思えてきます。

IE7.js Test Pages

唯一気をつけないといけないのは、透過PNGの扱いで、DirectXのAlphaImageLoaderを使用している為に、背景に使用する時にリピートとポジションの指定が出来ない事です。また、メモリ消費量が多いので、呼び出し時のオプションでpngファイル全部を指定できますが、名前に「-trans」を付けて部分的に適用したほうが軽くなります。

あと、IE6のダブルマージン等のバグを回避する「ie7-squish.js」も配布されていますので、必要な場合は一緒にロードしましょう。

<!--[if lt IE 9]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js"></script>
<![endif]-->

DD_belatedPNG

http://www.dillerdesign.com/experiment/DD_belatedPNG/

IE9.jsの透過PNGはリピートできないのがネックですが、それを解決したのがこのライブラリ。AlphaImageLoaderの代わりにVMLを使用して透過PNGを実現しています。ロードした後に適用させたいCSSセレクタを指定するだけで使用できます。

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
/* 使用例 png_bg である必要はなく、好きなセレクタを指定可能 */
DD_belatedPNG.fix('.png_bg');

</script>
<![endif]-->

DD_roundies

http://dillerdesign.com/experiment/DD_roundies/

これもDD_belatedPNGと同じ作者 Drew Diller さんのライブラリです。IEで角丸「border-radius」を実現させます。
ロードした後に適用させたいCSSセレクタを指定するだけで使用できます。また、第3引数のオプションで、他のブラウザ用の「-moz-border-radius」やら、「-webkit-border-radius」を記述しなくても、全てのブラウザに適用してくれます。

<script src="DD_roundies.js"></script>
<script>
/* 使用例 */
DD_roundies.addRule('.roundify', '10px');

/* 角ごとに違う値も可能 */
DD_roundies.addRule('.something_else', '10px 4px');

/* 第3引数にtrueをセットすると、全てのブラウザに効果を適用 */
DD_roundies.addRule('.yet_another', '5px', true);
</script>

PIE

http://css3pie.com/

さらに多機能を求めるならこれです。これもVMLをつかったライブラリです。

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image

まだ開発中とのことで、未実装の部分やバグがいくつかあるようですが、影や複数背景に対応してるのは嬉しいですね。角丸やVMLでの透過PNGのリピートも対応してるので、試して問題なければ上のDrew Diller 系のライブラリは不要になります。

ただ、いくつかの指定で独自の記述が必要なので、運用時には注意しましょう。

#myElement {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;

    behavior: url(PIE.htc);
}

Google Font API

http://code.google.com/intl/ja/apis/webfonts/

フォントも、昔はローカルにある物だけを使うのが普通でしたが、今はWebフォントが使えます。特にGoogleがホスティングしてくれてかなり敷居が下がったと思います。
Googleには英字しかありませんが、fonts.com等、日本語フォントも対応するサービスも出てきたので、かなりデザインが自由になってきました。

ただ、スマートフォン等でSVG形式のWebフォントが指定された場合、日本語の表示に問題が出る場合もあるようなので、使用するときは注意が必要です。

@import url(http://fonts.googleapis.com/css?family=Tangerine);

body {
    font-family: 'Tangerine', serif;
    font-size: 48px;
}

まとめ

Googleは「Chrome Frame」というプラグインをわざわざ開発して、自社サービスのIE対応を進めていますが、見る側の手間があるので、普及は難しいかもしれません。
そのくらい、みんなIEには困っているわけですが、実際IEのシェアは無視できません。上に挙げたようなライブラリを使うことで、少しは楽できるようになりましたが、まだまだ使いたいけど使えない要素もあるし、使う時のノウハウも必要です。
コーディングの調整やテクニックの研究に時間をとられずに、自由なデザインとコンテンツ作成に多くの時間をかけれるように、早くなってほしいものです。