Voilà ressorti le plus vieux troll du monde des intégrateurs : celui du méchant pixel qui n’est pas accessible.
Je propose de réouvrir ce joli débat dans le contexte actuel de 2013, alors que l’on voit enfin disparaître certains navigateurs dinosaures.
Je vais tâcher d’avancer de manière logique et pragmatique dans ce billet, à vous de me dire si je me trompe dans ma logique…
L’espace de commentaires est libre, mais essayons de raisonner en adultes responsables, évitons les taches de sang !
Le problème des pixels :
- IE6 ne dispose que d’un zoom texte
- IE7, IE8, IE9 et IE10 disposent d’un zoom texte et d’un zoom global de page (par défaut)
- En zoom texte, IE6 et IE7 (et IE8 ?) figent les polices en pixels : les contenus ne peuvent pas s’agrandir, ce qui est bien entendu gênant en situation de handicap
- Tous les autres navigateurs permettent d’agrandir les polices en pixel depuis longtemps
Hypothèses :
- En 2013, on peut supposer que IE6 est devenu suffisamment négligeable pour ne plus être pris en compte (IE7 aussi ?)
- On ne peut pas connaître le nombre de personnes utilisant IE7 ou IE8 et qui ont fait le choix d’opter pour le zoom texte (car c’est un choix, ce n’est pas le réglage par défaut)
- On ne peut pas connaître le nombre de personnes handicapées utilisant IE7 ou IE8, même si on peut présumer que les chiffres sont proches de la moyenne générale.
EDIT : une enquête de WebAIM donne des chiffres intéressants sur ce sujet.
REM : c’est l’avenir ou déjà le présent ?
- L’unité em est une unité fluide, ce qui résout par principe tous les problèmes de polices figées en pixel
- Une taille de police en em a pour référent la taille de police de l’élément parent, la cascade impose donc des calculs (par exemple, un label de 1.5em au sein d’un paragraphe de 2em aura en fait un coefficient multiplicateur de x3)
- L’unité rem est - comme em - une unité fluide. Mais son référent n’est pas le parent de l’élément mais l’élément racine HTML (donc si HTML a une taille de 10px, tous les éléments de la page faisant 1.5rem auront 15px quel que soit leur position dans le DOM)
- rem est une unité CSS3 en Candidate Recommandation supportée par l’ensemble des navigateurs, à partir de IE9, et à l’exception d’Opera Mini : http://caniuse.com/#feat=rem
Le code ci-dessous permet aux paragraphes de disposer d’une taille fluide équivalente à 14 pixels, facile à calculer, tout en proposant une alternative en “vrais” pixels pour les navigateurs plus anciens :
html {
font-size: 62.5%; /* equiv 10px */
}
p {
font-size: 14px;
font-size: 1.4rem; /* equiv 14px mais fluide */
}
Toute la question est : qui sera encore pénalisé aujourd’hui par cette méthode ?
EDIT : quelques discussions sur le sujet :
