0

css3 をサポートしないブラウザー用の代替スタイルを作成するために modernizr を使用しています。それはうまく機能しますが、複数の css3 スタイルを使用する css クラスのソリューションは見つかりませんでした。

例 1:

div.button {
box-shadow: inset 1px 1px 2px #ccc; /* first css3 style */
border-radius: 5px; /* second css3 style */
}

/* fallback for browsers that don't support css3 */
.no-borderradius div.button {
background: transparent url(my-button.png) left top;
}

ここでの問題は、ブラウザが box-shadow をサポートしていても、border-radius をサポートしていない場合に問題が発生することです。この場合、両方のボタンが box-shadow を使用し、border-radiusを無視し、no-borderradius クラスを背景画像に適用します。2 つのフォールバックを作成することで解決できました。

例 2:

  div.button {
    box-shadow: inset 1px 1px 2px #ccc; /* first css3 style */
    border-radius: 5px; /* second css3 style */
    }

    /* fallback for browsers that don't support css3 */
    .no-borderradius div.button, .no-boxshadow div.button /* no-boxshadow added */  {
    background: transparent url(my-button.png) left top;
    }

ここでの問題は、ブラウザーが border-radiusとbox-shadow をサポートしていない場合、要素のスタイル設定に両方のクラスが使用されることです。

4

2 に答える 2

1

Modernizr は、そのテスト結果に基づいてhtml要素にクラスを追加します(ドキュメントの「Modernizr のしくみ」を参照)。つまり、要素にはこれらすべてのクラスがあり、複数のクラスセレクターをチェーンして選択を絞り込むことができます。

ブラウザがルールのいずれかまたは両方をサポートしていない場合、既存のソリューションはルールを適用するため、探しているものとは逆になります。

代わりにこのセレクターを試してください:

.no-borderradius.no-boxshadow div.button {
    background: transparent url(my-button.png) left top;
}

あなたのコメントに関しては、とにかくIE6はプロパティborder-radiusとbox-shadowプロパティの両方をサポートしていないので、問題にはなりません。セレクターを として読み取るため、ルールは引き続き適用され.no-boxshadow div.buttonます。例については、この質問に対する私の回答を参照してください。

于 2011-05-22T10:35:47.030 に答える
0

[1] をサポートするブラウザーは[1]box-shadowもサポートするため、CSS は機能します。border-radius 

.no-boxshadow div.button { background:transparent url(btn.png) 0 0; }
.boxshadow div.button { border-radius:5px; box-shadow:inset 1px 1px 2px #ccc; }
于 2011-05-22T12:44:35.860 に答える