web-dev-qa-db-fra.com

Comment écrire des solutions de secours CSS pour VH VW

Quelqu'un peut-il expliquer comment les remplacements fonctionnent en CSS? J'essaie de le configurer pour vh et vw et clairement je ne comprends pas ...

Voici ma tentative de solution, qui ne fonctionne pas. La propriété height est prise à chaque fois.

CSS:

-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px; /* The Fallback */
cssfallbackviewport-units
23
user3311351

Votre code (et pourquoi cela ne fonctionne pas)

En regardant votre code d'origine, j'ai quelques commentaires:

-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px;  /* The Fallback */

Les préfixes, le -webkit- bit, s'applique uniquement si il existe une propriété préfixée par ce nom. La hauteur n'a pas de propriété préfixée, donc les navigateurs ignorent simplement ces déclarations.

(Astuce: vous pouvez vérifier quelque chose comme MDN pour voir quelles propriétés existent.)

Solution:

Dans ce cas, nous pouvons profiter du fait que, si les navigateurs rencontrent une propriété ou une valeur qu'ils ne comprennent pas, ils l'ignorent et passez. Donc, ce que vous recherchez est quelque chose comme:

height: 41px;
height: 5.2vh;

Le navigateur voit height: 41px, comme prévu. Il analyse cela et sait quoi en faire. Ensuite, il voit height: 5.2vh. Si le navigateur comprend l'unité vh, il l'utilisera au lieu de 41px, tout comme color: blue; color: red; finirait par être rouge. S'il ne comprend pas l'unité vh, il l'ignorera et, parce que nous avons d'abord défini le repli, le fait que le navigateur ignore l'unité vh n'a pas d'importance.

Ça a du sens?

58
Hawken Rives

Placez votre repli au-dessus de vous d'autres valeurs. Si les valeurs prioritaires ne fonctionnent pas sur un navigateur, la première valeur est utilisée.

 height: 41px;  /* The Fallback */
height: 5.2vh;
15
ramesh

Les propriétés -moz-height, -webkit-height, -o-height, et -ms-height ne sont pas des propriétés d'extension valides, elles ne sont définies par aucune des implémentations UA.

Vous obtenez height: 41px comme valeur gagnante car -webkit-height (dans Chrome ou Safari) n'est pas reconnu du tout, mais height: 41px est.

Vous voudrez utiliser ceci:

height: 41px;    
height: 5.2vh;

... avec ce code, les navigateurs reconnaîtront d'abord height: 41px, alors s'ils reconnaissent height: 52.vh qui sera appliqué, sinon ils reviendront à la dernière "bonne" valeur: 41px.

6
Dai