Category : XHTML/CSS
IE6, 7 そして 8
2007-12-27
XHTML/CSS
CSS, webstandards

今,InternetExplorer6, 7を無視したサイトを作っています。Webデザインについて,ぼくが今までに得た知識や経験をまとめて講座風にしたものです。(時間があるときに少しずつ書いているので,公開はしばらく先になりますが)
IEをターゲットブラウザから外す
IE6, 7をターゲットブラウザから外したのは,Web標準を理解してもらう際にいくつか弊害があるからです。IE6, 7は,FirefoxやOperaなど他のブラウザと比べてCSSの実装が遅れていたり,レンダリングが特殊でバグ(?)が多く,これを解決するために余分な記述やCSSハックを入れたりしなければなりません。Web標準のよさを体現しにくいブラウザです。
読んでもらう人たちも,FirefoxやOpera,Safariを利用しているか,またはこれらのブラウザに乗り換えるのにあまり困難を伴わない人たちだろうと判断しました。
IEを無視してしまうと気持ちいいですね。IEが未対応のために今までためらっていたことも,どんどんできます。IEのための余分な記述やハックも必要なくなりました。訳のわからない挙動に悩まされることもありません。
:after疑似要素
疑似要素の:afterを使って本文中のリンクに「»」を入れてみました。
div#main div.section a:after {
content: " " "\bb";
}
属性セレクタ
ナビゲーションメニューには執筆予定のすべてのページのタイトルを列挙してあるのですが,未作成のページは「writing-now.html」にリンクさせています。属性セレクタでこのリンクの色を変えてみました。
div#navigation ul li a {
border-bottom: solid 1px #039;
color: #039;
}
div#navigation ul li a[href="writing-now.html"] {
border-bottom: solid 1px #999;
color: #999;
}
div#navigation ul li a:hover {
background: #9CF;
}
div#navigation ul li a[href="writing-now.html"]:hover {
background: #CCC;
}
IE6で見ると「»」が入らない,リンクの色が変わらないというだけのことなんですが...。IE7は上のような属性セレクタに対応していますが,:after疑似要素のほうは未対応です。
そしてEI8
開発中のIE8がAcid2のテストに合格したようです。
- IE8がAcid2テストに"合格"、2008年前半にはベータ版を公開予定 - INTERNET Watch
- IE8、ウェブ標準準拠テストAcid 2に合格の見通し:ニュース - CNET Japan
- IE 8のβ版は2008年前半にリリース - ITmedia News
IEのための余分な記述やハックから解放されるなら,こんな喜ばしいことはありません。CSSの記述が同じなら,どのブラウザでも同じに表示される。このきわめてふつうの期待がやっと実現される。
でも,あと数年はIE6, 7がかなりのシェアを保つはずですから,完全な解決はまだ当分先でしょうね。
後方互換性
Microsoft側ではWeb標準に準拠することと同時に,後方互換性を強調しているようです。W3Cの示す仕様に沿って書かれたCSSも,その仕様に沿っていなかった過去のIE用に書かれたCSSも,ともに矛盾なくレンダリングするためにどんな方法をとるのか,とても気になるところです。
Search
XHTML/CSS Category Entries
- table のアクセシビリティを向上させる
- table と caption の margin
- label のススメ
- CSSの初期化ファイル
- nth-child() 疑似クラスを試してみる
- CSSファイルの分割
- IEで指定どおりのfont-sizeにならない
- すぐに使えそうなネガティブマージン
- dtをfloatする場合の注意点
- Re: CSSによるデザインワークと相性のよいHTMLって?
- flaotを解除する3つの方法
- カレンダーをリストでマークアップ
- IE6, 7 そして 8
- idの命名に迷ったら
- CSSの初期化
- h1をサイトタイトルにする理由
- classをどの要素にふるか
- li要素にdl要素を入れてみる
- 画像置換の問題点
- id="header"で問題ないのでは
- font-size指定
- clearfixでfloatを解除
- サイト全体に連なるh1〜h6
- ul,liでメニューをマークアップ
- dlで写真をマークアップ
- 見出しの階層をちゃんとする
- サイトタイトルを画像にしたら

2008年カレンダー