3

W3C CSS検証サービスを使用してCSSを検証していますが、次のエラーが返されました。

プロパティ-moz-border-radius-bottomleftは存在しません：5px

私の質問は、現代のブラウザはborder-bottom-left-radius他を理解しているように見えるので、もう必要ですか？

完全なCSSは次のとおりです。

height: 160px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
background: transparent url(../images/search-box-repeat-small.png) repeat;
4

5 に答える 5

11

Firefoxは、バージョン4以降border-*-radiusの標準化されたプロパティを理解します。

4つの角すべてに等しい半径を指定する予定で、Firefox <4.0やその他の古いブラウザのサポートに関心がない場合は、驚異的な8つの境界半径宣言を1つに減らすこともできます。

height: 160px;
border-radius: 5px;
background: transparent url(../images/search-box-repeat-small.png) repeat;

Firefox 3.6以前をサポートする必要がある場合でも、接頭辞付きのプロパティが必要ですが、隅々に1つ指定すると、問題が発生します。

height: 160px;
-moz-border-radius: 5px;
border-radius: 5px;
background: transparent url(../images/search-box-repeat-small.png) repeat;

また、接頭辞なしのプロパティはルールの最後に配置する必要があるため、接頭辞なしのプロパティをサポートするブラウザーは、標準に最適に準拠するためにそれを使用することにも注意してください。1

1 はい、ベンダーは接頭辞付きのプロパティを不適合な方法で実装します。これは、仕様にできないと言っているものがないためです。Mozillaがプレフィックスを削除した後に変更された内容の詳細については、Geckoのメモを参照してください。-moz-border-radius

于 2012-05-09T15:06:46.713 に答える
2

ええと、多くの人がIE6のサポートを主張しているので、そうです、-moz-border-radiusしかなかった古いバージョンのFirefoxをサポートする必要があります。

ちょっと待ってください。FirefoxユーザーはIEユーザーよりもはるかに賢いので、更新方法を知っています。さて、あなたはそれを必要としないと思います。

本当に、それはあなた次第です。それを保持したい場合は、そうしてください。少し余分な帯域幅（適切にキャッシュすれば問題にならないはずです）以外に本当の欠点はありません。

于 2012-05-09T15:06:57.557 に答える
1

Firefoxの場合、個人的にはこのベンダープレフィックスの必要性はわかりません。最新のブラウザのほとんどは、border-radiusプロパティをそのままサポートしています。

ブラウザのサポートについては、次のWebサイトを確認してください：http： //caniuse.com/border-radius

于 2012-05-09T15:09:36.720 に答える
0

Firefoxの最新バージョンの場合。

ただし、下位互換性のためには、それらが必要です（4.0より前）

すべての（ほぼ）ブラウザのすべてのプレフィックスを自動的に処理するには、-prefix-freeもご覧ください。

于 2012-05-09T15:08:44.873 に答える
0

このようなベンダー以外のプロパティの前に、ベンダーのプロパティを書き込む必要があります

-webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
   -moz-transform: rotate(7.5deg);  /* FF3.5+ */
    -ms-transform: rotate(7.5deg);  /* IE9 */
     -o-transform: rotate(7.5deg);  /* Opera 10.5 */
        transform: rotate(7.5deg);
于 2012-05-09T15:11:33.903 に答える