CSSの各ブラウザ対応

初めまして、マジック・プロジェクト 海岸ともうします。

10年ホームページ制作をやっていますが、ブラウザ間の誤差がなくなったことは、ありませんでした。
そもそも、WindowsとMacは、画面の解像度の違いで文字の大きさが違います。
いつの時代も見た目を合わせる苦労はなくならないと思います。

さて、ご質問の件ですが、CSSハックが使えなくなったらとのことですが、世界中の技術者が穴を探しているので、誰かしら何かしらの手法を見つけてくるものです。
但し、その技を仕入れる情報経路や技の特性を理解し組み合わせて利用する発想力は、利用者の能力ですので、磨き続けるしかないですね。

最悪、自分がやろうとしていることが、CSSハックでどうしても出来ない場合は、私なら、スタイルシートをJavaScriptで切り替えて対応するとおもいます。
ちなみに、この方法スタイルシートの管理が大変なのであまりやりたくないですね。

お世話になっております。

IE7の登場で、またもや混乱が生じていますので、ブラウザ周りの調整で苦しみます。先日は、JavaScriptのwindow.のあるメソッドでFFとIEで動作の違いが出てきてしまい、困ったことがありました。

CSSのみならず、過去のブラウザも含めて、色々な環境に対応するのは、とても大変な作業ですね。そんな製作の面から、参考にはならないと思うのですが、私の経験を書きます。

●CSSハックに依存しないデザイン
私は、ユーザーのスタンダード環境をWindwosXP/IE6,FireFox2としてバリデーション重視で書き、同じように見えるように構築します。フルCSSで作ろうという際の自由度が下がりますが、これは多くの方がデザインを調整していくなどをして、既に「やむを得ず」やっておられると思います。

●プログラミングでカバーする
「現行の様々な環境を想定して欲しい」などの厳しい要求がある場合、出来るレベルならJavaScriptでの振り分け、また、あまりにも古い環境まで想定する、厳しすぎるような指示の場合には、.phpや.cgiで、ブラウザに合わせた.cssをプログラムで吐かせたりする場合もあります。こういうのは、余計なことで無意味に複雑になりますので、出来ればやりたくない事ですが…

いや、本当に参考にならなくて申し訳ないのですが、現実的に作業を進めるには、現状のデファクトスタンダード環境から「妥協点を求める」ことで、対策案とせざるを得ません。

たっつんさん

こんにちは ウジトモコです

普段、私のやっていることなので、正解かどうかわかりません。が、もし、参考になれば、と思いご紹介します。

「予測」と「予防」

に尽きると思いますが、簡単に言うと
1.ブラウザによって「崩れにくいデザイン」を提案する
2.「複雑すぎるＣＳＳを作らない、使わない」です。

また、いやな予感がしたらお客様に「お勧めできない」と言ってしまいます。

時間効率や予算のしばり、メンテナンスの手間もありますから、ＣＳＳで見せ場は作らず、ＦＬＡＳＨや気の効いた画像、配色に集中します。

テキストメニューなどずれが生じると明らかに判読性が悪くなるモノはマックスで見てバランスをとり、ユーザビリティを最優先しますし、どうしてもフィックスしてしまわなければならない時には、別のところで「遊び」を作ってつじつまを合わせるようにしています。

今後「ルール」が変わってしまいそうな危険があること自体にあまり深入りせず、本質の表現力を磨くような努力・・と言うんでしょうか。

凄くシンプルでも、かっこいいものや使いやすいデザインは出来ますから。

「デザインハック（？）」で乗り切る、ですかね。
あまり参考にならなかったかもしれませんが、もしよければ、デザインの勉強もしてみてください！（自社ブログで恐縮ですが・・↓）

http://ujipub.exblog.jp/
使える「デザインセミナー」

こんばんわ、ブレスの北窓です。

CSS・・・各ブラウザに合わせるのはとても大変な作業ですね。
私の場合は、よほどクライアントさんが「全てをCSSにしないといけない」とか「システム上でどうしても・・・」と言われれば、各ブラウザやOSごとに用意したCSSを作成します。
そうでなければ、クライアントに提案する前に、崩れそうなデザインやレイアウトは極力避けるようにしています。

誤差については、多分よくあるのが「margin」「padding」などの余白調整や、「px」「em」「pt」・・・などの文字の大きさや「float」などのレイアウトズレなどで誤差が出てくるのだと思います。

私も結構苦労して調整した記憶がありますが、例えばCSSでレイアウトする前に、紙の上でレイアウト作成し、CSSでレイアウトブロックの背景に色を付け視覚的にわかりやすいようにします。
その後、各ブラウザ（私は作成するときHP作成用のエディターのプレビューは使用せずブラウザで実際に確認するようにしています）でレイアウトチェックをしてから、原稿を入れるようにしています。
そうすることで、floatなどでレイアウトしたところが解除忘れでズレてくるなど、色分けをしているので分かるようになると思います。

また、CSSハックを考える前に、作成されたCSSをもう一度見直すとことで、どこで誤差が出ているのか？一つずつ検証されてみてはどうでしょうか？私も自分で作成して不明になったら、最後の手段としてCSSを一つずつ検証しています。

後は、Firefoxなどのアドオンツールで（Firebug）等を組込んで確認されてみては？

■Firefox：http://www.mozilla-japan.org/products/firefox/
■Firebug：https://addons.mozilla.org/ja/firefox/addon/1843


あまり参考にならないかもしれませんが、頑張って作成してください。