Tailles de police relatives composées : un moyen propre d'adopter la taille de police de l'élément enfant, et non de l'élément parent

Question

Par exemple, si j'ai :

td { font-size: 1.3em }

h2 { font-size: 2em }
h3 { font-size: 1.6em }
p { font-size: 1.2 }

Si j'ai des titres/paragraphes dans les cellules de mon tableau, je sais que je peux éviter de combiner les tailles de police de la manière suivante :

td h2, td h3, td p { font-size: 1em }

Ce qui aurait pour conséquence que les titres/paragraphes de mes cellules de tableau auraient une taille de police de 1,3em (celle du td).

Mais ce que je recherche, c'est un moyen agréable et propre pour que chaque élément enfant ait sa taille de police originale, et non celle du parent.

J'aimerais vraiment éviter de faire ce qui suit (et bien sûr, j'aimerais éviter d'utiliser les px) :

td h2 { font-size: 1.54em }  // 1.3 x 1.54 ~ 2
td h3 { font-size: 1.23em }  // 1.3 x 1.23 ~ 1.6
td p { font-size: 0.92em }  // 1.3 x 0.92 ~ 1.2

Pour tous ceux qui connaissent MOINS Je l'utilise et j'ai pensé que je devrais pouvoir l'utiliser pour faire les calculs à ma place, par exemple en utilisant des accesseurs :

td h2 { font-size: h2['font-size'] / td['font-size'] }

Cette méthode utilise au moins les valeurs d'origine pour effectuer le calcul, mais elle est tout aussi maladroite que la précédente. De plus, il semble que LESS ne prenne plus en charge les accesseurs.

Le concept semble si simple que j'ai l'impression que la réponse me saute aux yeux, mais je me cogne la tête depuis un moment et je ne trouve la réponse nulle part.

Answer 1

Ce que vous voulez peut être atteint en utilisant rem unités.

rem sont relatives em qui basent leurs calculs sur la taille de la police déclarée sur l'élément body.

Les problèmes de composition disparaissent tout simplement.

http://snook.ca/archives/html_and_css/font-size-with-rem est un excellent article pour articuler cela.

note : IE8 nécessite un px mais ce n'est pas un problème puisque vous utilisez déjà un préprocesseur.

EDIT : J'ai écrit un mixin Sass qui fournit les résultats suivants rem avec leur px pour la plupart des propriétés CSS : https://gist.github.com/larrybotha/4153104

Answer 2

Je répondrai de la même manière qu'à ma question : utilisez des pixels !

Un pixel est une unité relative, il est relatif à la résolution de l'écran, les utilisateurs peuvent définir leur propre taille minimale de pixel souhaitée, et le zoom zoome les pixels. Je dirais qu'il est plus difficile pour un concepteur de s'approcher de tailles de police non pixelisées à chaque résolution perceptible que de se détendre et de laisser les outils du navigateur s'en charger ?

Avant, une police déclarée en pixels ne pouvait pas être redimensionnée dans IE, ce qui était très ennuyeux pour certains, pas très accessible si un utilisateur choisissait délibérément de l'afficher sur une résolution inférieure, par exemple pour des raisons de vue - c'est de là qu'est venue l'idée que "les em étaient les meilleurs pour les polices", mais cela n'a jamais été vrai ; IE pouvait être déjoué en utilisant des pourcentages à la place, ce qui pose les mêmes problèmes ;). Je me souviens avoir été ennuyé lorsque la mode était au "texte minuscule", mais ensuite les joies de la découverte de CTRL+ dans non-ie de toute façon maintenant les polices de taille pixel s'adapteront parfaitement, si vous construisez un site fluide vous pouvez le construire avec un mélange de em pour les largeurs et de pixels pour les tailles de police - si cela semble correct à votre résolution, essayez de zoomer, à la fois vers le haut et vers le bas - vous devez aller assez loin vers le haut ou vers le bas avant que cela ne devienne illisible, et qui zoome aussi loin vers le haut/bas à part les designers ;)

Answer 3

Avez-vous envisagé d'ajouter une classe aux titres qui se trouvent dans des cellules de tableau ? Le niveau de spécificité supplémentaire annulerait l'effet des styles en cascade qui se combinent entre eux, je pense.