現在位置
  1. ホーム
  2. IE カテゴリーの記事一覧

IE カテゴリーの記事一覧

コンディショナルコメントは実際どうなんでしょうか？

  • 2009-10-20 (火)
  • IE | css
  • このエントリをはてなブックマークに登録
  • このエントリをlivedoorクリップに登録
  • Deliciousにブックマーク

マークアップ界隈でとりわけ海外の先駆者の方々は、クロスブラウザのためのCSSハックを嫌い、IEにだけコンディショナルコメントを利用する傾向にあるなーと感じます。

今月号で100号をむかえたWeb Designingの中で、日本における(X)HTML/CSSの先駆者である大藤幹さんもこの辺の記事を書いておりました。

全体的にコンディショナルコメントを推奨する方の意見としましては、「文法エラーになるようなCSSハックはするべきでない」「前方互換性を考えたときに現在利用出来るハックがそのまま通用する保証がない」などがあり、確かにおっしゃることはわかります、と感じます。

さて、ではそもそもコンディショナルコメント自体はどうなんでしょうか？マイクロソフトからの最新の正式発表で変わっているのか定かではありませんが、CSS Nite Vol.18において、マイクロソフト：Windows開発統括部の五寳匡郎さんは以下のようなことを言っておられました。

「IE開発チームとしては、コンディショナルコメントの使用を強くオススメはしない。あくまで最後の救済手段としてのもの。」

さらにこれは「五寳さんによる個人的な見解というわけではなく、マイクロソフトの公式コメントということですよね？」ということをCSS Nite主催：鷹野さんが確認し、「その通りです。」というような回答をしていたのを覚えております。

ということで、僕の中でコンディショナルコメントはあくまで最終的な救済手段でありまして、概ねスターハック（* html セレクタ { … }）や、*:first-child+html セレクタ { … }を利用してIE対応をしております。

とはいえ最近では、コンディショナルコメントを利用しているサイトも多いので「その後マイクロソフトから新たな見解が出たのかなー？」と興味津々なのですがいかがでしょうか？ご存知の方がいらっしゃいましたら教えていただければ幸いです。よろしくお願いいたします！

「SlickMap CSS」をいじってみました

IDEA*IDEAさんで紹介されていた「SlickMap CSS」というのが結構すごいですね。ただ、ファイルをダウンロードして「README.txt」を読んでも分かるように、完全にIE6を無視したCSSとなっています。

同じく「README.txt」の中には「SlickMap CSS is free of charge, free to share, and free to modify.」ともありましたので、なんとかIE6でも大丈夫なようにしてみました（どうしても第３階層のリンクにカーソルオンしたときに、その下にある第２階層のリンクが上下にガクガクしてしまうのが対応できませんでした。分かる方いらっしゃいましたらツッコミお願いします。）。
SlickmapCSS-forIE6.zip（39KB）

マツダさんからコメントいただきちょっとバージョンアップしました。少しデザインが変わっていますが、ガクガクするよりはこちらの方が良いでしょう。
SlickmapCSS-forIE6-v1.1.zip（39KB）

以下変更点です

  • 透過PNGに対応するために「IE PNG Fix」を利用
  • 「:first-child」「:last-child」疑似クラスを利用していたので、これらをクラスセレクタへ変更。HTMLでアナログにclassを付けても良かったのですが、面倒だったので「yuga.js」を利用。
  • 「:before」疑似要素でa要素のhref属性（リンク先へのパス）を出していましたが、別にいらないなーということで削除。
  • IE6用にmarginなどの調整。各a要素にハイライトとなるグラデーションの透過PNGが指定されていましたが、IE PNG Fixを利用して強引に対応しているからなのか、しっかりとハイライトが出なかったのでIE6では消してしまいました。また、角丸やシャドウはIE6では無視しました。

先に書いたガクガクしてしまう症状はどうにかしたいなーという思いですが、角丸やシャドウがFirefoxなどと違うのはまぁアリかなという印象です。今までプログレッシブ・エンハンスメントはどうかなーとか思っていましたが、このくらいはクライアントさんが納得してくれれば良いですよね？

WCAN x CSS Nite 2009 SPRINGに出演します

2009年04月18日(土)に行われる、WCAN x CSS Nite 2009 SPRINGに出演します。

WCAN x CSS Nite 2009 SPRING

内容は、2009年2月19日に開催したCSS Nite in Ginza, Vol.31の『CSSレイアウト：IE 6対応のかんどころ』の再演です。2月19日は、若干言葉足らずで伝えきれなかった部分もありましたので、その辺を補おうと思っています。

僕以外にも、「ブランディング」「コーディングワークフロー」「CSS3／jQuery」と、幅広広い内容となっています。ご興味ある方は是非ご参加ください！

CSS Nite in Ginza, Vol.31でお話させていただきました

cng31-01.jpg

昨日（2009/02/19）行われたCSS Nite in Ginza, Vol.31でお話をさせていただきました。「IE 6対応のかんどころ」として、技術的な内容でした。

時間が押してしまい最後のほうがしどろもどろになってしまったのですが、それなりにご満足いただけたようで安心しました。

また、結構思い切ってXHTMLを採用する際に、XML宣言を書かないようにということを言ってしまいましたので、もしかしたら反響もあるかと思います。僕の場合は、まぁ書いた方が仕様にそったものであるのは分かっているのですが、作業工数があがってしまうのはクライアントさん的にどうかなーということもありまして、デメリットを説明した上で、書かないということがほとんどです。せっかくCSSレイアウトになって作業効率の向上が実現されたということもありまして、それならば楽出来る部分は一層楽しましょうよということで…。

とは言え、書くのがいけないとはまったく思っていませんので、対応するのはキツいけど、書いた方がメリットあるじゃん！という方は積極的に書いてください！

IE8Beta

ほんのちょこっとしか触っていませんが、取り急ぎの雑感としては、Firefox2よりもCSSサポートは高いですね。
僕の知っている限りでは、CSSサポートと言えば、Operaが最強なのですが、いろいろごちゃごちゃやってもOperaと遜色ありませんでした。特にfloat周りに力を入れたという印象です。やっとこさ「Acid2テスト」にも合格ですしね。

セレクタの実装なんかも、CSS3のほとんどを実装済みというものではありませんが、納得出来るレベルのものになってきました。特に、ながらく待ち望んだ「before/after擬似要素」がIEでも使える！ということです。また、ながらく苦しめられてきた「IEのhasLayoutプロパティ」というかなり謎の多かった仕様も消えうせるということで、これはもう感動ものです。

今までマークアップを生業とする身としては、何かと話題というか問題児なIEでした。IEが駄々っ子なために、泣きながら徹夜をしたという制作者の方もいらっしゃるかと思いますが、IE8のリリースとともに、一気に制作にかかる負担が解消されそうですね。
Javascriptやその他のプログラミング系の言語はあまり得意ではありませんので、自分では調べていないのですが、amachangさんのIE8 速攻徹底レビューなんかを見ても、全体的にWeb標準回りの強化がされていることが伺え知れます。

というわで、以下が検証（という程のものでもない）ソース。時間があれば、いろいろやってみたいっす。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>デモ</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
padding-top: 100px;
}
div.container {
width: 800px;
overflow: hidden;
}
div.content {
width: 3200px;
}
div.section {
float: left;
width: 760px;
padding: 10px;
border: 10px solid #313131;
}
div.section ul li {
list-style: none;
min-height: 200px;
background: url(demo.gif) right bottom no-repeat;
}
div.section ul li h3 {
position: relative;
}
div.section ul li h3:after {
content: "abcdef";
}
div.section ul li h3 img {
float: left;
margin-right: 10px;
border: 5px solid #a2a2a2;
}
div.section ul li p {
/*float: left;*//* 最後に追加してみたら、IE7・FF2でめっちゃ崩れた */
margin-left: 200px;
}
div.section dl {
clear: left;
}
</style>
</head><body>
<div class="container">
<div class="content">
<div class="section">
<ul>
<li>
<h3>hnタイトル<img src="demo.gif" mce_src="demo.gif" width="180" height="180" alt="" /></h3>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<hr />
<p>ダミーテキスト</p>
<dl>
<dt>dtっす</dt>
<dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
</dl>
<p>dlの後のpっす。ダミーテキスト</p>
</li>
</ul>
<!-- /.section --></div>
<div class="section">
<ul>
<li>
<h3><img src="demo.gif" mce_src="demo.gif" width="180" height="180" alt="" />hnタイトル<span></span></h3>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
</li>
</ul>
<!-- /.section --></div>
<div class="section">
<ul>
<li>
<h3><img src="demo.gif" mce_src="demo.gif" width="180" height="180" alt="" />hnタイトル<span></span></h3>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
</li>
</ul>
<!-- /.section --></div>
<div class="section">
<ul>
<li>
<h3><img src="demo.gif" mce_src="demo.gif" width="180" height="180" alt="" />hnタイトル<span></span></h3>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
</li>
</ul>
<!-- /.section --></div>
<!-- /.content --></div>
<!-- /.container --></div>
</body>
</html>

また、IEといえば、2/13にIE6からIE7への自動更新がはじまっているのですが、思ったほどにグーンとは移行が進んでないですよね。ちなみに弊社（有限会社アイエイトワン）のサイトで見てみると、IEユーザー自体は約50%と他のサイトより少なめです（まぁ、職種的に同業の方がご覧になる機会が多いですからね）。その中での比率ですと…

  • IE6：64.20%
  • IE7：35.19%
  • IE5.5：0.62%

となっています。
【有限会社アイエイトワンサイトユーザーのブラウザシェア】Google Analyticsのページです

このようにIE7への移行はちょっと微妙な感じになっておりますし、IE8も2008年中にリリースと噂されている訳ですから、是非ともIE7はすっ飛ばしてしまって時期スタンダードはIE8になってしまえば良いのにと思います。

最後にちょっと残念（というかやっぱり）な感じというものです。IE8ではあらたに「WebSlices」という独自の機能を実装しています。これは何かと言うと、セマンティックWebということでは有名な、あの Microformats の代替的な機能となるものです。より詳しい情報としては、【詳報】セマンティックWebに向かうIE8の「8つの強化点」にて説明が掲載されております。
まぁ、ついにマイクロソフトさんもここまで対応するようになったということは間違いなく喜ばしいことなのではありますが、せっかくセマンティックWeb的なことに対応するのであれば、独自の機能などを作り出すのではなくて、世界中の皆でせっせと仕様を策定している Microformats の一部に対応した方が良いんじゃないの？と思います。

WebSlices というのは、Microformats の hAtom を拡張したものらしいのですが、記述の仕方が Microformats とは微妙ーに変わってきます。そんな中、時期バージョンでは Microformats そのものに対応するらしい Firefox とかもある訳です。
クロスブラウザと言うと今までは(X)HTML+CSSの世界やJavascript界隈で主として叫ばれていた言葉だったのですが、今後はセマンティックWebにおけるクロスブラウザ問題なんかも出てきてしまいそうな予感です。

とは言え、最後にネガティブな内容も書きましたが、全般的にWeb標準回りに強化した新たなIE8のリリースを今か今かと待ち遠しいです。

カテゴリー

その他

  • Valid XHTML
  • ログイン