CSS3 Compatibilité descendante unité de mesure vw vers em

**jpe54** · 04/02/2014, 14h31

Bonjour,

Je souhaiterai utiliser une taille de police variable selon la résolution écran sans faire appel à un code javascript externe (fitText pour ne pas citer).

Désormais CSS3 propose des unités de valeur vw , vh mais la compatibilité n’est assurée que par des navigateurs récents.

Dans un fichier de style css, le type de codage ci-dessous, qui passe la validation CSS de W3C, est-il une solution pérenne avec la totalité des navigateurs ou risque-t-il d’entrainer des anomalies d’affichage ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
html, body, div {
     font-weight: normal;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 1.6em;    /* Anciens navigateurs */
     font-size: 1vw   /* Navigateurs HTML5 */
}

PS : En outre avec Chrome obligation d’un reload dans la page HTML pour que cette unité de mesure vw fonctionne… Normal ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onresize = document.location.reload(); >

Merci par avance

**Muchos** · 04/02/2014, 17h12

Je souhaiterai utiliser une taille de police variable selon la résolution écran sans faire appel à un code javascript externe

~~EM sait le faire~~ Pour ce que vous cherchez à faire, VW est pertinent.

Néanmoins, je ne suis pas convaincu par l'usage de VW pour FONT-SIZE (j'imagine que la la police deviendrait illisible sur petit écran). Si vous souhaitez un 1EM qui aurait la même taille quelque soit le contexte de la page, vous pouvez utiliser l'unité REM, qui est maintenant bien supportée.

Enfin, je ne sais pas si votre fallback passera, et pense que la dernière FONT-SIZE sera traitée.
NOTE: le navigateur doit supporter CSS3, pas HTML5

CSS3 propose des unités de valeur vw , vh mais la compatibilité n’est assurée que par des navigateurs récents.

Voici le support navigateurs pour VM/VH et leurs sœurs. Donc, ça fonctionne à partir de Chrome 26 (comme j'utilise VW, je confirme

).

**CCyrillus** · 04/02/2014, 17h26

Bonjour,

je confirme le défaut de chrome de ne pas réactualisé les valeur de vw et vh sur le rezize de la fenêtre , d'où la perte d’intérêt.
Cependant les mediaquerie marche trés bien et avec une transition le résultat n'est pas trop décevant:
2 exemples :

font-size en vw : (a tester sur chrome en modifiant la largeur de fenêtre)
font-size gerer via les mediaqueries http://codepen.io/gcyrillus/pen/AJHmt (3 pas entre 360 et 700px )

Pour les vieux nav, reste effectivement le javascript

**jpe54** · 05/02/2014, 07h35

Merci de vos remarques.

En fait sous IE8 et FireFox 22 (Windows XP) ce code css fonctionne, IE retient les valeurs px et FireFox les unités vw...

Mais effectivement les polices deviennent rapidement illisibles si on ne reste pas en largeur écran 1024 minimum.

Dans ce même cas de figure un test avec l'unité rem ne provoque pas de resize par ce même FireFox pourtant donné compatible (test avec v22 26 et v27) proposé sous XP, alors que l'unité vw fonctionne sans besoin de reload !

PS : Noter que j'ai neutralisé les font-size px pour confirmer cette dernière remarque

**thelvin** · 05/02/2014, 10h19

Envoyé par jpe54

Dans ce même cas de figure un test avec l'unité rem ne provoque pas de resize par ce même FireFox pourtant donné compatible (test avec v22 26 et v27) proposé sous XP, alors que l'unité vw fonctionne sans besoin de reload !

Ben oui, la mesure rem va pas changer pour un simple resize -_-°.

L'idée était qu'exprimer la taille d'une fonte en fonction de la largeur de l'écran est, a priori, stupide. Et donc de te proposer d'autres pistes qui pourraient être ce dont tu as vraiment besoin.

**jpe54** · 05/02/2014, 12h36

Bon sang mais bien sur...

pourtant j'avais lu mais interprété à ma façon ces explications trouvées ici :
https://developer.mozilla.org/fr/docs/CSS/longueur

CSS3 Compatibilité descendante unité de mesure vw vers em

CSS

Vue hybride

Discussions similaires

Partager

Partager