IE7(RC1)のDOCTYPEスイッチ対応を調べる過程で出来あがった、DOCTYPE宣言による各UAの標準・互換モード切替状況の一覧表をさらしておきます。間違いがあれば、ご指摘くだされ。＞誰

XHTMLでXML宣言を書くかどうかのところで、IE7はそれ以前のバージョンと表示が変わってくるということですよ、奥さん。せっかくのXHTMLなんだから、XML宣言は欠かせないと思うので、結局はIE6以前のためにCSSハックをするような感じになるんでしょうか。IE7へシフトする過渡期の対応ということで、個人的にはそうやっていく予定です。

IE7のWeb標準準拠の動きのおかげで、DOCTYPEスイッチとボックスモデルハックを使用してきたサイトは、その設計を見直さないといけないという、やたら哀しげな状況が生まれている。まあ、自分の手がけてきたサイトがそうなんですが。

取り急ぎ、簡単な対策をメモ。

対象となるのは、XML宣言付きのXHTMLで、CSSハックによってボックスモデルを互換モードで表示しているサイト。要は、IE6を中心に設計されちゃっているサイトね。

続きを読む "IE7で再考するボックスモデルとDOCTYPEスイッチ"

IE7 RC1日本語版がリリースされてから数日。いろいろイジくって思ったことなど。

リリース候補版なので、そろそろこれを使って動作検証をしないとなーと思い、過去の案件にさかのぼって手がけたサイトを見ていった。どうしようもないほど致命的な表示崩れとかは無かったし、動かなくなるものもほとんど無かった。でも、逆に言えば、少なからず意図しないデザインになった箇所もあったわけで、対応はしなくちゃいけない。このブログ含めて。ううう。

表示崩れを起こした全てに共通するのは、クロスブラウザ対応のため、やむなくCSSハックを使ったところ。DOCTYPEスイッチとか、child selecterハックとか。

そういった表示崩れを修正するために、わずかとは言え、作業をすることになるのだけれども、これが全くビジネスにならない。

クライアントにとって、どのブラウザでも同じように見えることは当然で、その対処のため予算を割くのに前向きになるはずがない。むしろ、IE7で表示崩れすることは、クレームになる可能性が高い。クレーム付けられてもなあ。わずかな作業で、顧客と友好な関係を保てるのなら、その方が長期的にはメリットがある。泣き寝入りするところが、多そうだ。

そもそも、クロスブラウザのために、CSSハックなんかを駆使する努力は、ビジネスの毒に思える。そうしたノウハウを溜め込んで、ビジネスを展開する者もいるかもしれないけれども、そんなネガティブな仕事していて嬉しいのか。そんなところに予算を割くくらいなら、サイト構築の本来の目的にダイレクトに効果がある仕事をした方が、良いに決まっているじゃないか。

Web制作のビジネスを歪ませるクロスブラウザの仕事なんぞ、早く無くなってしまえば良いのに。そして、そんなところじゃないところで、みんなが競い合って、もっと素敵なサイトが増えることを願うばかり。ふぅ。

最近はサーバもブラウザも優秀になって、HTMLの文字化けに悩むことが無くなった。でも、そうやって油断していると、起こるのが文字化け。腹立つ。ちゃんと charset 指定してるのになーってソース見たら、euc_jp になってた。ううう。

アンダーバーを使うのは Shift_JIS であって、euc を指定するときはハイフンを使って euc-jp じゃないとダメ。紛らわしい。まあ、基礎が成っていないという話。

IE で、CSS の background-image プロパティで指定した画像の一部に、印刷できないものがあることを発見。画面では表示されるものの、印刷プレビューの段階で、もう見えなくなる。

/* 先頭にマークを出す */
#mark {
	background-image: url(../img/mark.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-attachment: auto;
	padding: 0 0 0 20px;
}

調べてみると、background-repeat プロパティで、"repeat" 以外の値を設定した場合に、起こるらしい。何だそれ、使えねえなあ。

何とか "no-repeat" のままで印刷する方法はないかとイジっていたら、どうも width プロパティを指定すると、OKっぽい。えー。

#mark {
	width: 240px;
	background-image: url(../img/mark.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-attachment: auto;
	padding: 0 0 0 20px;
}

CSSでデザイン頑張ろうとすると、各ブラウザのバグに、まだまだ悩まされる。CSS HACK も楽しいけど、難易度が高めで、下の子たちへの継承が厄介だし。Web制作の敷居が高い気がしてくるのは、きっとクロスブラウザの難儀さのせいかと思うんですけど、どうでしょう？

メモ。

@ : @

続きを読む "HTMLでのアットマークの指定"