html - Internet Explorer以外にcssを適用する

Question

次の css を適用するとします。

h2:nth-child(3){
     /*some styles*/
 }

これは IE では機能しません。したがって、IE 用のスタイルのみを使用して IE 用にスタイルを変更する必要がありますが、適用されるスタイルが多すぎる場合は、IE 用にスタイルを変更する必要があり、おそらく以前の作業よりも多くの作業を行う必要があります。IEを除くすべてのブラウザにcssを適用できるテクニックはありますか?

Answer 1

他の人が提案したように、HTML で条件付きコメントを使用して、IE 用の特定の CSS を作成できます。例:

<!--[if lte IE 8]>
 <link rel="stylesheet" type="text/css" href="custom-ie.css" />
<![endif]-->

一方、 if IE 8IE 8のみif IEをターゲットにします。それらすべてをターゲットにします。if lte IE 8ターゲット IE 8 以下 (lte = Lower Than or Equal)。

---

プロジェクトに jQuery が含まれている場合、他の CSS を作成する作業を増やす代わりに、jQuery のセレクターを使用して古いブラウザーに新しいセレクターを適用できます。そのためには、次のことを行います。

h2:nth-child(3), h2.nth-child-3 { /*note the class I added */
     /*some styles*/
}

セレクターの互換性をテストする関数:

function selectorSupported(selector) {
    var support, link, sheet, doc = document,
        root = doc.documentElement,
        head = root.getElementsByTagName('head')[0],

        impl = doc.implementation || {
            hasFeature: function() {
                return false;
            }
        },

        link = doc.createElement("style");
    link.type = 'text/css';

    (head || root).insertBefore(link, (head || root).firstChild);

    sheet = link.sheet || link.styleSheet;

    if (!(sheet && selector)) return false;

    support = impl.hasFeature('CSS2', '') ?

    function(selector) {
        try {
            sheet.insertRule(selector + '{ }', 0);
            sheet.deleteRule(sheet.cssRules.length - 1);
        } catch (e) {
            return false;
        }
        return true;

    } : function(selector) {

        sheet.cssText = selector + ' { }';
        return sheet.cssText.length !== 0 && !(/unknown/i).test(sheet.cssText) && sheet.cssText.indexOf(selector) === 0;
    };

    return support(selector);

};

この関数を使用して、セレクターをテストし、それに応じて実行できるようになりました。

//For browsers without :NTH-CHILD(N) - aka IE7/8
if (!selectorSupported(':nth-child(n)')) {
    $('h2:nth-child(3)').addClass('nth-child-3');
}

テストの他の例:

//For browsers without :LAST-CHILD - aka IE7/8 too
if (!selectorSupported(':last-child')) {
    $('p.last-child').addClass('last-child');
}

しかしもちろん、CSS を二重にする必要がないように、JavaScript のアプローチが必要な場合に限ります。