web-dev-qa-db-ja.com

-moz-availableと-webkit-fill-availableを1つの幅で配置する（cssプロパティ）

フッターの幅をブラウザーに依存しないようにします。

Mozillaの場合、-moz-availableの値を使用し、ユーザーがOperaを使用する場合、CSSは-webkit-fill-availableから値を取得する必要があります。

CSS3でこれを行う方法は？

私はこのようなことをしようとしました：

width: -moz-available, -webkit-fill-available;

これは望ましい結果を与えません。

csscss3responsive-design
40
Julian

CSSは、理解できないスタイル宣言をスキップします。 Mozillaベースのブラウザーは-webkitプレフィックス付きの宣言を理解しません。また、WebKitベースのブラウザーは-mozプレフィックス付きの宣言を理解しません。

このため、単純にwidthを2回宣言できます。

elem {
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}

開始時に宣言されたwidth: 100%は、-mozおよび-webkitプレフィックス付き宣言の両方を無視するか、-moz-availableまたは-webkit-fill-availableをサポートしないブラウザーで使用されます。

83
James Donnelly