Web フロントエンド開発の細かな常識

一.IE6/7 の hasLayout をトリガーする方法

よくいくつかの流行っている hack で height: 1%;や zoom: 1;といったものを見かけます。追加しないとダメで、実はこれは IE6/7 の hasLayout プロパティをトリガーするために使用されます：

height: 1%;は IE6 下で min-height として解析されますが、IE7 には適用されません。zoom: 1;は IE7 の hasLayout をトリガーできます

ブラウザ互換の hack で多く使用されており、例えばボックス崩壊問題を解決する.clearfix でも height: 1%;を使用しています

P.S.ボックス崩壊問題についての詳細情報は [黯羽軽揚：CSS ボックス崩壊問題の 4 つの解決策](http://ayqy.net/blog/CSS ボックス崩壊問題の 4 つの解決策/) を参照

二.IE 向け CSS Hack

IE 条件コメント

欠点：複数のファイルで同じスタイルを同時に維持する必要があり、保守性が悪い

選択子プレフィックス法

*html プレフィックスは IE6 のみに有効、*+html プレフィックスは IE7 のみに有効。例えば：

    .test {
        /* IE6/7/8... */
    }

    *html .test{
        /* IE6 */
    }

    *+html .test{
        /* IE7 */
    }

欠点：後方互換にリスクがあり、IE8/9/10 も*html や*+html プレフィックスを識別する可能性があり、インラインスタイルには使用できない

スタイル属性プレフィックス法

_は IE6 のみに有効、*は IE6/7 の両方に有効。例えば：

    .test {
        color: red;   /* IE6/7/8... */
        *color: red;  /* IE6/7 */
        _color: red;  /* IE6 */
    }

欠点：後方互換にもリスクがあるが、インラインスタイルに使用可能

推奨される做法は IE がサポートする条件コメントを使用することですが、実際の適用ではプロジェクト規模などの要因に応じて適切な方式を採用すべきです

三.margin の特例

隣接する margin-top と margin-bottom は重なりますが、margin-left と margin-right は重なりません。そのため混合使用しないでください。プロジェクト初期にどちらのみを使用するかを約束すべきです

四.スタイルカバールールの例外

スタイルには特殊性、または重みがあります。特殊性が同じスタイルルールは後で宣言されたものが先に宣言されたものを上書きします

宣言順序に注意してください。要素 class 属性値文字列中の前後順序ではありません。例えば：

.myStyle1 {
    color: red;
}
.myStyle2 {
    color: green;
}

<p class="myStyle1 myStyle2">緑色</p>
<p class="myStyle2 myStyle1">これも緑色</p>

class 属性値文字列中のスタイル名の前後順序はスタイルカバールールに影響しません

P.S.特殊性とは何か、具体的な計算ルールは何かについては [黯羽軽揚：](http://ayqy.net/blog/CSS 選択子分類まとめ/) を参照

五.DOM 操作の最適化テクニック

基本的なテクニックは DOM ノードオブジェクトをキャッシュし、頻繁な DOM 検索のオーバーヘッドを回避することです。さらに DOM 検索を最適化する小技巧があります：

まず byId で検索範囲を絞り込み、その後 byTagName で要素を取得します。例えば：

var p = document.getElementById("p");
// alert(p.getElementById("innerP").innerHTML); // Uncaught TypeError: Object #<HTMLDivElement> has no method 'getElementById' 
alert(p.getElementsByTagName("p")[0].innerHTML);

上記コードのコメント部分に注意してください。任意の要素には getElementsByTagName メソッドがありますが、document 要素のみ getElementById メソッドを持ちます

P.S.DOM 最適化のより多くのテクニックについては [黯羽軽揚：JS 学習ノート 12_最適化](http://ayqy.net/blog/JS 学習ノート 12_最適化/) を参照

六.IE6 の PNG 透明

IE6 下では PNG 画像の透明部分がピンク色（水色？）で表示されます。IE フィルターで修復できます：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="画像パス", sizingMethod="crop");

例えば：

.img{
    background: url(icon.png);
    width: 32px;
    height: 32px;
}
/* IE6 hack */
*html .img {
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icon.png", sizingMethod="crop");
}

このフィルターを使用すると IE6 下で透明ピクセルが正常に表示されます。IE6 と PNG 透明のより多くの解決策については [張鑫旭：IE6 下 png 背景不透明問題の総合拡張](http://www.zhangxinxu.com/wordpress/2009/08/ie6 下 png 背景不透明問題の総合拡張/) を参照

七.JS オブジェクトリテラル中の余分なカンマ

js オブジェクトリテラル中の最後の属性末尾のカンマは IE6/7 でエラーを引き起こし、IE8 もエラーを報告する可能性があります。他の高級ブラウザはエラーを報告しないため、より良い互換性のためにオブジェクトリテラル中に余分なカンマを置かないでください

八.ページジャンプ（リダイレクト）とリフレッシュ（再読み込み）

ジャンプとリフレッシュの本質は同じです（リフレッシュは現在のページへのジャンプとみなせます）。ひとまず総称してジャンプと呼びます。一般的な実装方式はlocation.href = strUrl;です。他の実装方式もありますが、ここでは深く追求しません。私たちが注目するのはリダイレクト後に何が発生するかです？

リダイレクト文実行後ページは即座にジャンプしますか？いいえ。ページはすべての js スクリプトが実行完毕后にジャンプします。信じられない場合はテストできます。巧妙なテスト方法を提供します：

location.href = 'http://ayqy.net/';
while(true);

F12 を押してコンソールを開き、上記のコードを実行すると、ページがフリーズまたはブラウザがクラッシュすることで十分に問題が説明できます

注意、他のいかなる形式のジャンプもスクリプト実行完毕を待ってからジャンプします。location.reload(false/true);を含む、a タグジャンプイベントの模擬トリガーを含む

九.NaN とビット演算

NaN（Not a Number）は決して任意の数と任意の演算を行った結果が NaN になるわけではありません。数値演算ではその通りですが、ビット演算では NaN を 2 進数 0 として処理します。そのためNaN | 1 === 1 && NaN | 0 === 0となります

十.続き 2015-6-11

参考資料

『高品質コードの作成 Web フロントエンド開発修練の道』