Category : XHTML/CSS

previous entry 2008年カレンダー | カレンダーをリストでマークアップ next entry

IE6, 7 そして 8

Date2007-12-27 CategoryXHTML/CSS TagsCSS, 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のテストに合格したようです。

IEのための余分な記述やハックから解放されるなら,こんな喜ばしいことはありません。CSSの記述が同じなら,どのブラウザでも同じに表示される。このきわめてふつうの期待がやっと実現される。

でも,あと数年はIE6, 7がかなりのシェアを保つはずですから,完全な解決はまだ当分先でしょうね。

後方互換性

Microsoft側ではWeb標準に準拠することと同時に,後方互換性を強調しているようです。W3Cの示す仕様に沿って書かれたCSSも,その仕様に沿っていなかった過去のIE用に書かれたCSSも,ともに矛盾なくレンダリングするためにどんな方法をとるのか,とても気になるところです。

Search

RSS feed

あわせて読みたい

あわせて読みたいブログパーツ

Contact me

  • My status Skype : webmugi

Validation

  • Valid XHTML 1.0 Strict
  • Valid CSS!

Top