読者です 読者をやめる 読者になる 読者になる

TRANS

神戸のNPOやソーシャルビジネスの創業・起業のお手伝い

* { magin: 0;}だけでは物足りない!zoom: 1;を使おうよ!

Web標準

IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。


IE7のZoom機能で、見事にこける。


先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。

僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。


そのスタッフがブラウジングをする際は、常にIE7のZoom機能「110%」を用い、サイトを拡大させていたからです。で、見事にずれていたというわけです。


Operaは問題なし。もしや、IE7のボックスモデルの解釈の間違いか?


ちなみに、このサンプルのコードはこんな感じでした。サンプルも用意しました。

<ul id="gNavi">
	<li><a href="#">ほーむ</a></li>
	<li><a href="#">あぼうと</a></li>
	<li><a href="#">こんたくと</a></li>
</ul>
ul#gNavi li {
	display: inline;
	list-style-type: none;
	margin: 5px;
}

ul#gNavi li a {
	padding: 0.5em 0.3em;
	border-top: 1px solid #333333;
	border-right: 1px solid #333333;
	border-left: 1px solid #333333;
	text-decoration: none;
	color: #333333;
	background-color: #EEEEEE;
}

li要素をインラインボックス化して横並びにさせ、その上a要素に余白を与え、リンク領域を広げるというもの。「float: left;使えよ!」という話なのですが、なにせ作ったのが約1年前でボックスモデルやIEのバグをよく分かっていなかったので、そのへんはご愛嬌。


このZoom機能はご存知の通り、Operaにも搭載されています。そこで、上記サンプルをOperaのZoom機能で110%に拡大させてみました。以下の画像がそのスクリーンショット

特にずれている様子がありません。つまりは、IE7のZoom機能におけるインラインボックスのpaddingかmarginあたりにバグが潜んでいる様子です。


IE7時代にユーザはZOOM機能と文字サイズ拡大機能のどちらを使うのか?


今回のこのエントリーでは、このZoom機能を批判する目的で書きたいわけではありません。それよりも、僕の関心は「IE7が主流になるとすると、ユーザはZoom機能と文字サイズ拡大機能のどちらを用いて、サイトを読みやすくするだろうか?」ということ。


今までIE6を使っていた人はツールバーの「表示」→「文字のサイズ」から文字サイズを変えるかもしれません。また、IE7の新機能を使ってみたい人は画面右下の虫眼鏡マークからパーセントを選んで画面そのものを拡大させるかもしれません。(要はZoom機能を使うということ)このへんはまだまだ未開拓の領域なのだと思います。


ちなみに、IE7のZoom機能は「ctrlと+」で10%ずつ拡大できるので、僕が文字サイズを拡大したい場合は、Zoom機能を使っています。理由は単純で、Firefoxがそのショートカットで文字サイズを拡大できるから、この方法に慣れているのです。


* { zoom: 1;}を使おうよ!


上記のIE7のZoom機能の解釈の問題は、CSSに一行追加すれば事足ります。いわゆる、hasLayoutの問題のよう。hasLayoutについては、コリスさんの「IEでのCSSのバグを回避するhasLayout」がよくまとまっています。コードはこんな感じで。

ul#gNavi li {
	zoom: 1;
}

上記サンプルだと少しずれてしまいますが、それでも文字と背景がかぶるという不具合は回避できます。


でも、このボックスモデルの解釈の問題は、IE6時代からコーダー泣かせだというのはご周知の通り。そのため、一つ一つzoom: 1;を指定させるよりも、ブラウザの違いを吸収させるためのCSSで指定したほうが手っ取り早い。


僕は、YUIのReset CSSをベースにしているので、こんな感じで指定しています。

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin: 0;
	padding: 0;
	zoom: 1;
}

先ほどのコリスさんにもこんな記事があり、その中でzoom: 1;の記事があります。(参考記事:CSS スタイルの初期化(前編) -全称セレクタとhtml, body編


今後、IE7がマーケットを拡大させることを考えていくと、とりあえずzoom: 1;を指定しておけば、かなりの確率でボックスモデルのバグを防げそうなので、こういうのも一考の価値ありかなと思います。


追記(2007年5月1日)del.icio.usのkazuhitoさんのコメントを受けて。

"一考の価値あり"とは思いますけど、仕様にはないプロパティだけに、積極的に使おうとは思わないです。

正直、僕も独自規格は使いたくないのが本音ではあります。たぶん、上記サンプルもfloatさせてブロックボックスを維持してwidthを指定してやれば解決できそうな気もするんですが。あくまで、積極的にというよりも、「仕方がなく」というのが本音です。