Browser CSS Hack/Filter supportは、IE4, Ns4から、IE8, Fx2, Op9.5, Safari3など、多くのブラウザのCSS Hack/Filterの対応をまとめたサイトです。

Browser CSS Hack/Filter support

Browser CSS Hack/Filter supportは、dithered.comのCSS Filterをバージョンアップしたもので、CSS Hack/Filterの対応を検証しているのは下記のブラウザになります。
※バージョン表記は省略。

Internet Explorer (Windows)：4.0.1～8beta
Internet Explorer (Mac OS)：4.0～5.2.3
Pocket Internet Explorer (PocketPC)：4.0.1～5.2
Gecko(Firefox & Camino)：MM3～1.9b5pre
Netscape Navigator：4.0～4.8
Opera：3.5～9.5beta
Opera Mini：1.2～4.0
Opera Mobile：8.0～8.65
Safari/Webkit：1.0～3.1
Konqueror：1.9.8～4.0.2
OmniWeb：4.0～5.7b2
iCab：2.53～4.01
Netfront：Playstation3～3.5
Hv3：02/03/08
WebTV：1.0～2.6b46

IETesterは、IE5.5, IE6, IE7, IE8beta1の確認が同時にできるアプリケーションです。

少し長くなってしまったため、簡単にポイントをまとめます。
IE8には、「互換モード」、「標準モード」、「より進んだIE8の標準モード」という、3つのレンダリングモードがある。
互換モードはIE6、IE7のものと一緒。標準モードはIE7のものと一緒。
互換性を保つため、IE8の標準モードにはmeta要素やHTTPヘッダによる指定が必要。

/*----------------------------------------
clearfix
----------------------------------------*/
#top div#whatsnew dl:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
*:first-child+html #top div#whatsnew dl {
display: inline-block;
}
/*\\*//*/
#top div#whatsnew dl {
display: inline-table;
}
/**/

CSSマスターの方にご質問させていただきます。現在横並びリストを制作しようとしております。リストに表示する文字の高さを中央揃えにし、カーソルが触れるまでは黒色画像、hover時に赤色画像のバックグラウンドをマイナス設定にてロールオーバー効果を演出しようとしています。IEではきちんと表示されているのですがsafariではパディング分、赤色がズレてしまい、hover時には黒色がズレてしまいます。<UL id="sitemenu"><LI id="side">あいうえお<LI id="side">かきくけこ</UL>/***********LI設定***********/#side A{ width:60px;　//幅 height:40px;　//高さ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; background-image : url(背景.gif);　//背景 background-position : 0px 0px; no-repeat; text-align : center; //文字の位置 text-decoration : none;　//文字飾り vertical-align : top;　//文字の高さ padding-top : 10px;　//パディング高さ float : left;}#side A:hover{background-position : 0px -40px; no-repeat;}/***********UL設定***********/#sitemenu{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; border-width : 0px 0px 0px 0px; vertical-align : top; text-align : left; list-style-type : none; float : left; }#sitemenu LI{ float : left;}なんとか背景画像がずれない様に表示させていので、どなたかわかる方がいらっしゃいましたら大変申し訳ないのですがご教授お願いいたします。

Quoted: コンテンツの内容が少なくても、常に下部にフッタを配置させるための方法。ウィンドウを下方に広げても、フッタは常に下部に張り付いたままで、逆にウィンドウを上部に縮めていってもコンテンツ部分の所でピタッと止まり、それ以上は移動しません。

先日リリースされたFirefox 3.0は順調にダウンロード数を伸ばしているようだ。執筆現在で2,600万ダウンロードに達しようとしており、Net Applicationsの報告によれば24日の時点ですでに世界で3%をこえるシェアを獲得している。Firefoxの採用率が高いヨーロッパでは5%をこえている。今後も順次シェアを伸ばし、主要ブラウザとしての位置を獲得することになりそうだ。

Firefox 3.0ではCSS 2.0および2.1がサポートされているほか、現在策定が進められているCSS3の機能も一部対応している。Firefox 3で導入されたCSSの新機能や改善点はCSS improvements in Firefox 3にまとまっているが、David Baron氏がまとめたSome new CSS features in Firefox 3がサンプルも含めてよくまとまっているので紹介しておきたい。

David Baron氏はMozillaでFirefoxの開発に関与しているデベロッパ。W3CのCSSワーキンググループで作業するなど、FirefoxとCSSに関して知識が深い。同氏がSome new CSS features in Firefox 3で特に紹介しているCSSの新機能は次のとおり。

inline-blockおよびinline-table
font-size-adjust
rgba()およびhsla()カラー
width、min-width、max-widthで指定できる新しい値 -moz-max-content、-moz-min-content、-moz-fit-content、-moz-available
white-space: pre-wrap
inline-blockおよびinline-tableは将来的にクロスブラウザ向けのWebサイトを作成する際に多様されることになる便利な機能として使われることになりそうだ。font-size-adjustは日本語にはほとんど関係がない。英語のように大文字と小文字が混在する言語でフォントサイズの調整をするために活用できる。

Firefox 3.0 rgba()の使用例その1 - Some new CSS features in Firefox 3より抜粋
Firefox 3.0 rgba()の使用例その2 - Some new CSS features in Firefox 3より抜粋

rgba()およびhsla()はCSS3で導入される機能。従来はopacity: 0.5のように指定していたものをrgba(0, 255, 0, 0.5)のようにRed-Green-Blue-AlphaやHue-Saturation-Lightness-Alphaで指定できる。これまでよりも豊かなカラー表現がまとめて指定できるようになる。Some new CSS features in Firefox 3はサンプルと説明の双方が簡潔にまとまっている。Firefox 3.0で新しく対応されたCSS機能の概要を知る上で有益なドキュメントだ。WebデザイナやWebデベロッパは一読しておきたい。