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

70

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 responsive-design julianisch
quelle
1
Definieren Sie einfach die beiden Eigenschaften als separate Breitendeklarationen.
Paulie_D
stackoverflow.com/questions/3383923/…
Paulie_D
Ich habe das gemacht: width: -moz-available; width: -webkit-fill-available; Das Ergebnis war das, was es nicht sein musste.
Julian
2
width: -moz-available; width: -webkit-fill-available;Der Browser ignoriert Erklärungen, die er nicht versteht.
Paulie_D
1
Das ist seltsam ... Ich habe es das zweite Mal versucht und jetzt funktioniert es. Hmmm, ich denke, CSS neckt mich manchmal gerne.
Julian

Antworten:

156

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.

James Donnelly
quelle
7
Ich hasse es zu fragen, aber hat IE diese Eigenschaft auch zur Verfügung?
Julian
7
@Julian laut Kann ich verwenden ..., nein, nicht: caniuse.com/#feat=intrinsic-width . IE listet dies als "Im Aufbau" auf: status.modern.ie/cssintrinsicsizing .
James Donnelly
8
fill-availablewurde stretchbasierend auf den letzten technischen Änderungen geändert.
user3631047
Können Sie auf diese Spezifikation verlinken?
mix3d
@ user3631047 bitte auf die Spezifikation verlinken
Ismail