web-dev-qa-db-fra.com

Mettre -moz-available et -webkit-fill-available en une largeur (propriété css)

Je veux rendre la largeur du pied de page indépendante du navigateur.

Pour Mozilla, je veux utiliser la valeur de -moz-available, et lorsqu'un utilisateur utilise Opera, CSS doit obtenir les valeurs de -webkit-fill-available.

Comment faire cela en CSS3?

J'ai essayé de faire quelque chose comme ça:

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

Cela ne donnera pas les résultats souhaités.

csscss3responsive-design
40
Julian

CSS ignorera les déclarations de style qu'il ne comprend pas. Les navigateurs basés sur Mozilla ne comprendront pas -webkit- déclarations préfixées, et les navigateurs WebKit ne comprendront pas -moz- déclarations préfixées.

Pour cette raison, nous pouvons simplement déclarer width deux fois:

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

Le width: 100% déclaré au début sera utilisé par les navigateurs ignorant à la fois le -moz et -webkit- déclarations préfixées ou ne supportant pas -moz-available ou -webkit-fill-available.

83
James Donnelly