18

Firefox 15 で使用transitionしてみましたが、他のバージョンの Firefox や、Chrome や Safari などの他のブラウザーでは動作していましたが、動作しませんでした。

Firefox のインスペクターを使用してプロパティを表示するtransitionと、取り消し線が引かれ、「無効なプロパティ値」というエラーが表示されます。MDNとcaniuseは、Firefox 4 以降でサポートされていると言っています!

#mydiv {
    transition: width 1s; /* Did I do this wrong? */
    background: #f00;
    width: 100px; height: 100px;
}
#mydiv:hover { width: 200px }

一部のブラウザではプロパティがtransition動作animationし、他のブラウザでは無効になる場合があるのはなぜですか?

免責事項: これは、ベンダー プレフィックスを追加することで完全に解決できるすべての質問の正規の複製です。スタック オーバーフローの質問は、メタで議論されない限り、このように広範であってはなりません。その後、このような標準的な回答が作成されました。

4

1 に答える 1

41

常にそうであるとは限りませんが、プロパティが一部のブラウザーで同様に機能しtransitionたり機能したりしない最も一般的な理由の 1 つは、ベンダー プレフィックスが原因です。animation

ベンダープレフィックスとは何ですか?

Firefox のバージョン 4 が導入された時点で、CSS トランジション モジュールの仕様はワーキング ドラフトでした。仕様が最終決定される前 (実際には、これは推奨候補に到達するときです)、ブラウザー ベンダーは、仕様が変更された場合の互換性の問題を防ぐために、プロパティ、値、および @-規則にベンダー プレフィックスを追加します。

ベンダー プレフィックスは、まさにその名前が示すとおりです。ベンダー固有 (ベンダーとは、ブラウザーを開発する会社を意味します) のプロパティまたは値のプレフィックスです。多くの場合、プロパティまたは値は、実装の準備ができていると見なされる段階である推奨候補段階の前の多くの実験的段階の 1 つであるため、ブラウザーごとに特定の方法で実装されます。

最も一般的なものは-moz-(Mozilla Firefox)、-webkit-(Chrome、Safari など)、および-ms-(Microsoft Internet Explorer) ですが、他にも.

いつ使用する必要がありますか?

それは、提供しようとしているブラウザー、使用しているプロパティと値、および Web サイトを開発している時点に完全に依存します。最新のリストを維持しようとするサイトがありますが、必ずしも正確または最新の状態に保たれているとは限りません。

以下は、最も一般的な接頭辞付きのプロパティと値の一部です。プロジェクトがプロパティの右側のコメントに記載されているブラウザーをサポートしていない場合は、CSS に含める必要はありません。

トランジション

接頭辞のないプロパティには、 などの接頭辞が付いた同等のプロパティがある場合があります-webkit-transition。

可能な限り完全なブラウザー サポートを取得するには、次のものが必要です。

.foo {
    -webkit-transition: <transition shorthand value>; /* Safari 3.1-6, Chrome 1-25, Old Android browser, Old Mobile Safari, Blackberry browser */
    -moz-transition: <transition shorthand value>;    /* Firefox 4-15 */
    -o-transition: <transition shorthand value>;      /* Old opera */
    transition: <transition shorthand value>;         /* Modern browsers */
}

-ms-にはプレフィックスが存在することに注意してくださいtransition。ただし、これは機能しなくなった IE10 のプレリリース バージョンでのみ実装されているため、必要ありません。IE10 RTM 以降では接頭辞なしで実装されています。

変換

.foo {
    -webkit-transform: <transform-list>; /* Chrome 21-35, Safari, iOS Safari, Opera 22, many mobile browsers */
    -ms-transform: <transform-list>;     /* IE9 */
    transform: <transform-list>;
}

アニメーション

アニメーションには、次のようにプロパティのプレフィックスと対応するキーフレームのプレフィックスを付ける必要があります。

.foo {
  -webkit-animation: bar; /* Safari 4+ */
  -moz-animation: bar;    /* Fx 5+ */
  -o-animation: bar;      /* Opera 12+ */
  animation: bar;         /* IE 10+, Fx 16+ */
}

@-webkit-keyframes bar { /* Keyframes syntax */ }
@-moz-keyframes bar { /* Keyframes syntax */ }
@-o-keyframes bar { /* Keyframes syntax */ }
@keyframes bar { /* Keyframes syntax */ }

フレックスボックス

flexboxの場合のように、値にプレフィックスを付けることもできます。注: ブラウザの互換性を最大限に高めるために、一部のブラウザでは、次のものに加えて、、、、、などのフレックスボックス固有のプロパティにプレフィックスを付ける必要ordinal-groupがあります。flex-flowflex-directionorderbox-orient

.foo {
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -webkit-box-flex: <flex shorthand value>;
    -moz-box-flex: <flex shorthand value>;
    -webkit-flex: <flex shorthand value>;
    -ms-flex: <flex shorthand value>;
    flex: <flex shorthand value>;
}

電卓

.foo {
    width: -webkit-calc(<mathematical expression>); /* Chrome 21, Safari 6, Blackberry browser */
    width: -moz-calc(<mathematical expression>);    /* Firefox <16 */
    width: calc(<mathematical expression>);         /* Modern browsers */
}

グラデーション

詳細については、CSS トリックのCSS グラデーションを参照してください。

.foo {
    background-color: <color>; /* Fallback (could use .jpg/.png alternatively) */
    background-image: url(bar.svg); /* SVG fallback for IE 9 (could be data URI, or could use filter) */  
    background-image: -webkit-gradient(linear, left top, right top, from(<color-stop>), to(<color-stop>)); /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */  
    background-image: -webkit-linear-gradient(left, <color-stop>, <color-stop>); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */  
    background-image: -moz-linear-gradient(left, <color-stop>, <color-stop>); /* Firefox 3.6 - 15 */
    background-image: -o-linear-gradient(left, <color-stop>, <color-stop>); /* Opera 11.1 - 12 */
    background-image: linear-gradient(to right, <color-stop>, <color-stop>); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
}

leftとto rightは同じ方向、左から右を表し、したがってleftとは反対方向to leftを指していることに注意してください。背景情報については、この回答を参照してください。

境界半径 (ほとんどの場合必要ありません)

.foo {
    -webkit-border-radius: <length | percentage>; /* or iOS 3.2 */
    -moz-border-radius: <length | percentage>;    /* Firefox 3.6 and lower */
    border-radius: <length | percentage>;
}

ボックスの影 (ほとんどの場合必要ありません)

.foo {
    -webkit-box-shadow: <box-shadow shorthand value>; /* iOS 4.3 and Safari 5.0 */
    -moz-box-shadow: <box-shadow shorthand value>;    /* Firefox 3.6 and lower */
    box-shadow: <box-shadow shorthand value>;
}

それらを JavaScript でどのように実装できますか?

JavaScript でプレフィックス付きの属性とイベントにアクセスするには、CSS プレフィックスに相当するキャメルケースを使用します。foo.addEventListener('webkitAnimationIteration', bar )これは、イベント リスナー(などfooの DOM オブジェクト) にも当てはまりますdocument.getElementsById('foo')。

foo.style.webkitAnimation = '<animation shorthand value>';
foo.style.mozAnimation = '<animation shorthand value>';
foo.style.oAnimation = '<animation shorthand value>';

接頭辞ツール

オンラインのプレフィックスは役に立ちますが、常に信頼できるとは限りません。サポートしたいデバイスでプロジェクトをテストして、それぞれに適切なプレフィックスが含まれていることを確認してください。

CSS プリプロセッサ関数:

JavaScript プレフィックス関数:

参照: ブラウザーが CSS プロパティのベンダー プレフィックスを作成するのはなぜですか?

于 2014-08-04T01:00:53.673 に答える