Put -moz-available und -webkit-fill-available in einer Breite (CSS-Eigenschaft)

Ich möchte die Breite der Fußzeile browserunabhängig machen.

Für Mozilla möchte ich den Wert von verwenden -moz-available, und wenn ein Benutzer Opera verwendet, sollte CSS die Werte von erhalten -webkit-fill-available.

Wie geht das in CSS3?

Ich habe versucht, so etwas zu tun:

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

Dies führt nicht zu den gewünschten Ergebnissen.

CSS überspringt Stildeklarationen, die es nicht versteht. Mozilla-basierte Browser verstehen keine -webkitvorfixierten Deklarationen, und WebKit-basierte Browser verstehen keine -mozvorfixierten Deklarationen.

Aus diesem Grund können wir einfach widthzweimal deklarieren :

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;
}

Der width: 100%zu Beginn erklärt wird von Browsern , die sowohl das ignorieren verwendet werden -mozund -webkitoder -prefixed Erklärungen nicht unterstützen -moz-availableoder -webkit-fill-available.