実はサイドバーのアクセス・トップ10とか記事のはてブ言及数表示にFirefoxだとエラーになっていることに気付きました。
ぶっちゃけFirefoxはどうでもいいやなどと思ったものの、とりあえずせこせこと直してみたので覚え書き。
ほとんどOperaとかIE6での動作しか気にしていなかったので、意外に新鮮かも。
細かなことで取り留めないんですが、IEとかOperaに慣れていた人が陥りやすいクロスプラットフォームのためのTipsになったので、一応何かの役に立つかもなので載せておきます。
■SCRIPTタグ内でETAGO(</)を使用していると文法エラーになる
そう言えば遥か昔にNetscapeを使っていた頃は回避していたのに、Opera使いになってからすっかり忘れていた気がする。
例えば
<script type="text/javascript">
<!–
document.write(‘<script type="text/javascript" src="http://example.com/cgi/test.cgi"></script>’);
// –>
</script>
などしていると上記の箇所でunterminated string literalなどとJavaScriptコンソールに怒られます。
これは厳密にはSCRIPTタグ内でタグではない別の終了文字が現れてしまうためです。IE6やOperaなどでは華麗にスルーしてくれるので気付いていませんでした。
参考
これを
document.write(‘<script type="text/javascript" src="http://www.rocaz.net/cgi/showHotentry.cgi"><\/script>’);
やまたは
document.write(‘<script type="text/javascript" src="http://www.rocaz.net/cgi/showHotentry.cgi"></scri’ + ‘pt>‘);
などとしてもOKです。
後者はよくGoogleで見かける記述方法ですね。
■CSSのプロパティ値には必ず単位を付加する
例えば
border-width: 2;
などとしていると‘xxx’プロパティの値をパース中にエラーが発生しました。このスタイル宣言は無視されましたと言われます。
IEやOperaでは多分無視されることは無くて、何らかの単位をデフォルトとして見なしてくれるようです。
しかし厳密にはやはりこれは正しくなく、pxなりptなりを明示的に指定すべきです。
border-width: 2px;
特にJavaScriptでサイズを変更などしている場合、わりと単位を付け忘れやすいので注意。
■widthやheightに固定値を指定すると自動的にサイズを自動調整しない
これもCSSの仕様から言えば当然なんですが、仮にheight=100pxとしていても、IEやOperaではサイズが実際には100ピクセルを超えていると自動的にサイズを大きくしてくれます。
これは、どうもデフォルトではoverflowプロパティはvisibleなんですが、IEではvisible値はautoと同じ動作をするためのようです。Operaはちょっと不明ですが、結果的にIEと同じ動作となっています。
本当に固定値にしたいのなら、overflow: hidden;とでもしておくべきですが、そうでなくて自動調整にしたいのならheight: auto;、更にoverflow: auto;としておくのがよいでしょう。
■CSSのclearプロパティにはall値は無い
これ、CSS的には当たり前(none, left, right, bothしか仕様書上は存在しない)なんですが、IEでは歴史的経緯によりallがbothと同じ意味で使われてきました。
Operaもどうもこれに従って互換性を維持しているみたいなんですが、Firefoxではエラーになります。
以前からのソースを使い回していた場合には注意です。
■CSSのプロパティと値のデリミタ(:)を書き忘れるとエラーになる
これもまたまた当たり前なんですけど(笑)、IEやOperaでは実は明示的にエラーにはなりません。
これも華麗にスルーして何となくデフォルト値を当てはめるか、デリミタがあると見なしてリカバリーしてくれているようです。
こうしてみると、Firefoxは割りとOperaやIEを使っていると気付かない細かな点を気付かせてくれる、よいチェッカーになっていると感じます。
技術志向で融通の利かない職人気質の頑固親父という感じがして、はてな界隈で気に入られているのも何となく分かるような。
逆にOperaあたりは、あまり煩いことは言わずそれなりにきびきび動いてくれて、ある意味万民受けの実務派なのかも。