旧バージョン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を使った参考例です。
文字に影を影を付ける
サンプル
可能ですが、うーん・・・という感じ。装飾という意味ではちょっと扱い難いかなと思います。
ボックスに影を付ける
サンプル
こちらは割といい感じです。
