12

CSS ファイルの範囲をページの特定の部分に限定できるアプローチが必要です。理論的には、この例は私が必要とすることを行うはずです:

<html>
<head>
</head>
<body>

    <div>
        <style scope>
            @import url("style1.css");
        </style>
        <div class="testText">Test with Style 1</div>
    </div>
    <div>
        <style scope>
            @import url("style2.css");
        </style>
        <div class="testText">Test with Style 2</div>
    </div>
</body>
</html>

しかし、スコープ要素は現在、一部のブラウザー (主に Firefox 21 以降) でのみ使用できることがわかりました。だから、私は怠惰な方法や問題を探しています。さまざまなスタイルのコンテンツをサイトに統合する必要があります。両方の css ファイルセットをロードしようとしましたが、両方のスタイルシートに表示されるスタイル名がいくつかあるため、1 つのファイルセットと対応する html コンテンツでスタイル名の名前を変更するのは大変な作業になります。特に、Eclipse でリファクタリングすることはできないためです。 ... :)

広く互換性のある結果をレンダリングできる他のソリューションはありますか?

よろしく

4

2 に答える 2

8

範囲指定されたスタイルは、現時点では十分にサポートされておらず、何らかの種類のクロスブラウザー カバレッジを期待している場合、問題が発生する可能性があります。

実際に目的を達成できる唯一の方法は、「セクション」ごとに一意のクラス名 (または ID) を使用し、継承を使用して CSS の名前空間をソートすることです。したがって、ページの特定のセクションをターゲットにしたい場合は、その親にクラス名 (例: class="testone") を付けてから、そのセクションに適用するすべてのスタイルにそのクラス名が追加されていることを確認してください。

.testone .title{...}
.testone h1{...}
.testone a{...

等

それができない場合は、jQuery ベースのスコープ ポリフィルもあり、ブラウザーに依存しない方法でスコープ付き CSS を操作できます。これは私が扱ったものではないので、提供できる経験はありませんが、私が使った数瞬間からすると非常に有望に見えます!

このような JavaScript ベースのソリューションと同様に、JavaScript を有効にせずにページを読み込んだ人は、これらの特別な機能を利用できないことを覚えておいてください。無効。

于 2013-06-03T15:04:37.737 に答える