internet-explorer - Modernizr: css3 変換のターゲット IE

Question

ブラウザーでサポートされていない css3 プロパティを検出するために modernizr を使用しました。CSS3変換プロパティでdivを回転させるために、ルールを使用しました

.rotate-div{
    transform:rotate(-35deg);
}

IE を除いて、他のブラウザーは、ベンダープレフィックスを使用するプロパティでうまく機能します。したがって、IE のフォールバックとして、私は div になりたいと思っています。したがって、CSS3 変換の対象として IE を使用する場合は、次のように記述しました。

.csstransforms .rotate-div{
     /*transform property*/
}

しかし、modernizr は Firefox と chrome も css 変換の対象としています。対象となるアイデアのみ、つまり modernizr を使用します。

score 0 · Accepted Answer

サポートされていないプロパティクラス.no-csstransformsの前ではなく、クラス名を追加する必要があるのは私の間違いであることがわかりました。.csstransformsその現在動作しています。

score 0 · Accepted Answer

IE9 は-msプレフィックスを使用し、IE10 はプレフィックスなしのバージョンを使用します。

残念ながら、Prefix Free は -ms プレフィックスを追加したり、プレフィックスなしのバージョンを維持したりしていません

必要なのは次のようなものです

.rotate-div {
    -webkit-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    transform: rotate(-35deg);
}

この問題は、FAQおよびGitHub イシュートラッカーに記載されています。そのフィードバックに基づいて、次のようなことを行うことをお勧めします...

.rotate-div {
    transform:rotate(-35deg);
}
.-webkit- .rotate-div {
    transform: rotate(-35deg) rotateX(0);
}

2 に答える 2