旧バージョンIEを最新のCSSへ対応させる

uuAltCSS.js

ホームページをデザインするとき、枠の角を丸くしたりロゴに影を付けたりなど、背景に画像を指定するなどして対応していましたが、CSS3に対応した最新のブラウザですと、これを簡単に表現する事が出来ます。しかし、IE６やIE7といった旧ブラウザでは、これに対応出来ません。まだまだ需要のあるこれらのブラウザにも、ある程度は対応出来る方法をご紹介します。

http://uupaa-js-spinoff.googlecode.com/svn/trunk/uuAltCSS.js/README.htm

こちらのサイトで公開されているJavaScript ライブラリで、完全では有りませんが対応する事が出来ます。

display: table

display:tableは、通常のタグの代替として使う事が出来ます。display: table-row;やdisplay: table-cell;と一緒に使う事が多くなるでしょう。

サンプル

最新ブラウザでのスタイルの記述

.dsp_table {
	display: table;
	width: 400px;
	border: 1px solid #CCC;
	border-collapse: collapse;
}
.dsp_row {
	display: table-row;
}
.dsp_cel_th {
	display: table-cell;
	border: 1px solid #CCC;
	padding: 5px;
	font-weight: bold;
	text-align: center;
}
.dsp_cel_td {
	display: table-cell;
	padding: 5px;
	border: 1px solid #CCC;
}

CSSのCLASS名をそれっぽくしてますので、どれが何の代替になっているのか何となく判るかと思います。

uuAltCSS.jsを使う

.dsp_table2 {
	display: table;
	-uu-display: table;
	width: 400px;
	border: 1px solid #CCC;
	border-collapse: collapse;
}
.dsp_cel_th2 {
	display: table-cell;
	-uu-display: table-cell;
	border: 1px solid #CCC;
	padding: 5px;
	font-weight: bold;
	text-align: center;
}
.dsp_cel_td2 {
	display: table-cell;
	-uu-display: table-cell;
	padding: 5px;
	border: 1px solid #CCC;
}

<table>と同じように、横並びになってくれます。

残念なのはdisplay: table-rowが使えないようですので、完全な表組みとしては扱い難いかも。ただ、指定幅の中で複数セルの幅を可変させて利用したいケースなどでは便利です。jqueryなどで表を生成する場合など、tableより扱いやすいので、特定の方が使う場所(管理パネルなど)の場合は多用しています。

以下はuuAltCSS.jsを使った参考例です。

文字に影を影を付ける

サンプル
可能ですが、うーん・・・という感じ。装飾という意味ではちょっと扱い難いかなと思います。

ボックスに影を付ける

サンプル
こちらは割といい感じです。