Le pouvoir des unités EM dans CSS

Les plats clés

• Dans CSS, une unité EM est égale à la taille de police calculée pour l'élément vers lequel l'EM est appliquée. Lorsque les unités EM sont déclarées sur des éléments enfants qui n'ont pas de taille de police définis, ils héritent de leur taille de police de leur parent ou d'un autre élément d'ancêtre.
Les unités
• EM fonctionnent bien avec les techniques CSS modulaires telles que le style au niveau des composants ou les sections de code encapsulées. Ils peuvent être utilisés pour s'assurer que les éléments d'un composant sont tous de taille les uns par rapport aux autres et lui permettre d'être facilement redimensionnés.
• L'unité REM dans CSS hérite toujours de sa valeur à partir du paramètre de taille de police de base sur l'élément racine du document, quelle que soit la taille de la police calculée. Vous pouvez donc utiliser REMS, mais cela signifie que vous devrez contrôler tous les composants de la page en utilisant la taille de la police sur cet élément.
• Les unités EM offrent plusieurs avantages par rapport aux pixels. Ils sont évolutifs, ce qui signifie qu'ils s'ajustent en fonction des paramètres du navigateur par défaut de l'utilisateur ou des paramètres de leur appareil. Cela rend votre site Web plus accessible aux utilisateurs ayant des déficiences visuelles qui peuvent avoir besoin d'augmenter la taille de la police. Les unités EM permettent également une conception plus flexible et réactive, car ils s'ajustent en fonction de la taille de la police de l'élément parent.

Avec toutes les fonctionnalités complexes de CSS, vous aurez toujours ce tournant lorsque vous voyez à quel point la fonctionnalité est vraiment puissante. Et, croyez-le ou non, mon tournant personnel avec EMS est venu longtemps après avoir écrit une introduction remplie de mots au sujet. Bien que j'aie bien compris EMS assez bien à ce moment-là, j'ai vraiment commencé à voir à quel point ils sont puissants lorsque je lis les composants de Simurai sur le dimensionnement médium (Web). Je vais donc monter ses queues dans ce post. Ici, vous trouverez une introduction rapide aux unités EM, suivie d'une démonstration en direct de la technique qu'il décrit.

Que sont les EMS dans CSS?

Dans CSS, une unité EM est égale à la taille de la police calculée pour l'élément vers lequel l'EM est appliquée. Lorsque les unités EM sont déclarées sur des éléments enfants qui n'ont pas de taille de police définis, ils hériteront de leur taille de police de leur parent ou d'un autre élément d'ancêtre, revenant éventuellement à l'élément racine du document. Regardez le CSS suivant:

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>}</span>

Dans ce cas, 1EM sur cet élément, ou sur ses éléments enfants (en supposant aucune autre définition de taille de police) ne serait égal à 20px. Donc, si nous avons ajouté une ligne:

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>border-radius: .5em;
</span><span>}</span>

Cette valeur de radius frontalière de .5EM calcul à 10px (c'est-à-dire 20 * .5). De la même manière:

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>border-radius: .5em;
</span><span>padding: 2em;
</span><span>}</span>

La valeur de rembourrage de 2EM est égale à 40px (20 * 2). Comme mentionné, ce type de calcul s'appliquerait également à tous les éléments enfants - à moins que l'un de ces éléments enfants ait une valeur de taille de police explicitement définie, auquel cas la valeur EM serait calculée en fonction de cela. Si aucune taille de police n'est définie n'importe où dans le CSS, l'unité EM sera égale à la taille de police par défaut du navigateur pour le document, qui est généralement de 16px. Je pense que cela devrait indiquer clairement comment les EMS fonctionnent. Voyons maintenant comment cette technique peut être utilisée pour fabriquer des composants Web facilement redonnables, comme discuté par Simurai dans l'article médium d'origine. Je vais aller plus loin à son idée en fournissant une démo pour voir cela en action.

quand les utiliser dans CSS

Les unités EM fonctionnent bien avec les techniques CSS modulaires telles que le style au niveau des composants ou les sections de code encapsulées en général. Par exemple, ils peuvent être utilisés pour garantir que les éléments d'un composant (par exemple une carte) sont tous de taille les uns par rapport aux autres et permettent de le redimensionner facilement. La technique fonctionne essentiellement comme celle-ci: la propriété de taille de police est utilisée, car Simurai se réfère à cela, en tant que «cheval de Troie», créant l'unité de base pour les différents éléments à l'intérieur de notre composant ou module. Étant donné que les unités EM, telles que décrites ci-dessus, sont calculées sur la base de la taille de police définie par racine sur l'élément parent, cela rend l'ensemble du composant facilement redonnable en modifiant simplement la taille de la police sur l'élément parent. Examinons cela en action dans une démo de codepen:

Voir le stylo en utilisant EMS pour les composants redonnables par SitePoint (@SitePoint) sur Codepen.

Ce petit module idiot contient quatre éléments de base. Rien d'extraordinaire, juste un exemple pour illustrer cette technique. Déplacez le curseur de plage en haut de la page de démonstration pour modifier la taille du module. Vous pouvez également le tester en plein écran. Le curseur de plage est accroché à une seule valeur sur l'élément racine du composant: la valeur de taille de police. Il convient de noter ici que le but de rendre le composant redonnable à l'aide de cette propriété CSS unique n'est pas nécessairement afin que l'utilisateur puisse le faire. C'est principalement pour que le développeur qui entretenait le module puisse effectuer des ajustements rapidement, sans jouer avec les différentes valeurs dans toutes les parties du composant. Comme décrit dans la section précédente, à mesure que la taille de la police change, cela ralentit toutes les valeurs EM qui sont définies sur cet élément parent ainsi que sur tous ses éléments enfants, ce qui rend toutes les parties du composant proportionnellement flexibles. Si vous examinez le CSS, vous remarquerez ce qui suit:

• Tout à l'intérieur du composant est dimensionné avec EMS, à l'exception de la bordure extérieure (que nous voulons rester à 2px à tout moment), et l'image, que je pourrais redimensionner si nous le voulions, mais je suis satisfait de sa taille statique pour ce cas.
• La chose en forme de larme dans le coin supérieur droit est un pseudo-élément, qui profite également de la taille de la police de base sur le parent.
• Le CSS comprend également deux requêtes multimédias qui ajustent la taille de la police sur le parent. Encore une fois, cela montre l'utilité de cette technique parce que vous n'avez pas à changer toutes les différentes tailles dans les requêtes multimédias, mais seulement la taille de la police.

quelques notes, défauts, etc.

Comme vous pouvez le voir en utilisant le curseur de plage dans la démo, ce type de redimensionnement flexible n'est pas toujours quelque chose que vous voudrez utiliser. Cela peut être quelque peu restreint. Vous devrez peut-être modifier certaines des valeurs EM pour leur obtenir comme vous le souhaitez et, comme dans le cas de la frontière parent dans la démo, vous ne voudrez peut-être pas que la capacité de redimensionnement s'applique à tous les éléments. Vous pouvez surmonter cela facilement en évitant simplement le SME sur les éléments que vous souhaitez laisser de côté. Comme décrit dans la discussion sur l'article original de Simurai, vous n'avez pas à utiliser les unités PX pour définir la taille de la police. Vous pouvez également utiliser EMS pour cela, mais n'oubliez pas que cela sera hérité de la même manière de son parent, provenant peut-être de la valeur par défaut du document pour la taille de la police.

qu'en est-il des Rems et Sass?

L'unité REM dans CSS hérite toujours de sa valeur à partir du paramètre de taille de police de base sur l'élément racine du document, quelle que soit la taille de la police calculée. Dans HTML, l'élément racine est toujours l'élément HTML. Vous pouvez donc utiliser REMS, mais cela signifie que vous devrez contrôler tous les composants de la page en utilisant la taille de la police sur cet élément. Cela pourrait fonctionner sur certains projets, mais je pense que cette technique fonctionne mieux lors de la concentration de la résistance sur un composant isolé, plutôt que sur l'ensemble du document. Quant à l'utilisation d'un préprocesseur comme Sass, je pense que c'est un point secondaire. En fin de compte, votre feuille de style compilée utilisera les unités que vous utilisez dans votre code SASS, et l'héritage fonctionnera de la même manière.

Conclusion

Comme déjà mentionné, Simurai mérite le crédit pour avoir rendu cette technique plus connu. Bien sûr, comme il le mentionne, ce n'est pas nouveau et le concept de base a été utilisé par de nombreux développeurs expérimentés depuis des années - mais peut-être pas tant dans le contexte des composants Web ou des modules. Comme le dit Simurai, je pense que c'est une belle méthode à utiliser lors de la création d'un cadre CSS ou d'une bibliothèque de composants, et, si rien d'autre, je pense que la technique fait vraimentr la maison sur la puissance des unités EM. EM n'est pas la seule unité CSS disponible, bien sûr. Consultez notre aperçu des unités de dimensionnement CSS.

Des questions fréquemment posées (FAQ) sur les unités EM dans CSS

Quelle est la différence entre les unités EM et REM dans CSS?

EM et REM sont des unités relatives dans CSS, mais elles diffèrent dans la façon dont ils calculent leurs valeurs. EM est relatif à la taille de la police de son parent le plus proche ou à l'élément actuel. Cela signifie que si vous définissez la taille d'une police d'un élément sur 1.2EM, ce sera 1,2 fois la taille de la taille de la police du parent. D'un autre côté, REM est relatif à la racine ou à l'élément HTML. Donc, si vous définissez la taille d'une police d'un élément sur 1.2REM, ce sera 1,2 fois la taille de la taille de la police de l'élément racine. Cela rend Rem plus prévisible et plus facile à contrôler que Em.

Comment convertir les pixels en unités EM dans CSS?

Pour convertir des pixels en unités EM, vous devez connaître la taille de la police de votre document. La taille de police de base par défaut dans la plupart des navigateurs est 16px. Donc, si vous souhaitez convertir une valeur de pixels en em, vous divisez la valeur des pixels par la taille de la police de base. Par exemple, si vous souhaitez convertir 18px en em, vous feriez 18/16 = 1.125em.

Pourquoi devrais-je utiliser des unités EM au lieu de pixels dans CSS?

Les unités EM offrent plusieurs avantages par rapport aux pixels. Ils sont évolutifs, ce qui signifie qu'ils s'ajustent en fonction des paramètres du navigateur par défaut de l'utilisateur ou des paramètres de leur appareil. Cela rend votre site Web plus accessible aux utilisateurs ayant des déficiences visuelles qui peuvent avoir besoin d'augmenter la taille de la police. Les unités EM permettent également une conception plus flexible et réactive, car ils s'ajustent en fonction de la taille de la police de l'élément parent.

Puis-je utiliser des unités EM pour des propriétés autres que la taille de la police dans CSS?

Oui, vous pouvez utiliser des unités EM pour n'importe quelle propriété dans CSS qui accepte les valeurs numériques, pas seulement la taille d'une fonte. Cela comprend des propriétés telles que la largeur, la hauteur, le rembourrage, la marge et la hauteur de ligne. L'utilisation d'unités EM pour ces propriétés peut aider à maintenir des relations proportionnelles dans votre conception.

Comment puis-je définir la taille de la police de base pour les unités EM dans CSS?

Vous pouvez définir la taille de la police de base pour les unités EM en définissant la propriété de taille de police sur l'élément HTML. Par exemple, si vous voulez que la taille de base de base soit 18px, vous écririez: html {Font-Size: 18px; }. Toutes les unités EM dans votre CSS seront alors relatives à cette taille de base de base.

Que se passe-t-il si je niche des éléments avec des unités EM dans CSS?

Si vous nidisez des éléments avec des unités EM, la taille de l'élément enfant sera relative à la taille de l'élément parent. Cela peut entraîner des effets de composition, où la taille de l'élément enfant devient plus grande ou plus petite que prévu. Pour éviter cela, vous pouvez utiliser des unités REM, qui sont toujours relatives à la taille de l'élément racine.

Y a-t-il des inconvénients à utiliser des unités EM dans CSS?

Bien que les unités EM offrent de nombreux avantages, ils peuvent également être plus difficiles à gérer que les unités absolues comme les pixels. Parce que les unités EM sont relatives, leur taille réelle peut changer en fonction du contexte. Cela peut rendre plus difficile de prédire la taille des éléments, en particulier dans les dispositions complexes avec des éléments imbriqués.

Comment passer à l'emploi de la taille d'un élément défini dans les unités EM dans CSS?

Vous pouvez remplacer la taille d'un élément défini dans les unités EM en fixant la taille dans un sélecteur plus spécifique. CSS suit une hiérarchie de spécificité, où des sélecteurs plus spécifiques l'emportent sur des sélecteurs moins spécifiques. Par exemple, un sélecteur d'ID remplacera un sélecteur de classe et un sélecteur de classe remplacera un sélecteur de type.

Puis-je utiliser des unités EM dans les requêtes multimédias dans CSS?

Oui, vous pouvez utiliser des unités EM dans les requêtes multimédias. En fait, l'utilisation d'unités EM dans les requêtes médiatiques peut améliorer la réactivité de votre conception. Parce que les unités EM sont relatives, elles s'ajustent en fonction des paramètres du navigateur par défaut de l'utilisateur ou des paramètres de leur appareil. Cela signifie que vos requêtes médiatiques s'adapteront aux paramètres de l'utilisateur, pas seulement à la taille de la fenêtre.

Comment calculer la taille des éléments imbriqués avec des unités EM dans CSS?

Pour calculer la taille des éléments imbriqués avec des unités EM, vous multipliez la taille de l'élément parent par l'élément enfant. Par exemple, si la taille de l'élément parent est de 1,5EM et que la taille de l'élément enfant est 2EM, la taille réelle de l'élément enfant serait de 1,5 * 2 = 3EM. En effet, la taille de l'élément enfant est relative à la taille de l'élément parent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!