Share
Je vais faire une déclaration rapide. les pixels n'ont pas leur place dans la conception web. Il n'y a qu'une seule raison pour laquelle vous comptez toujours sur les pixels - et c'est parce que vous n'avez pas encore maîtrisé les ems. Changeons ça!
M en décoration par Frances Mcleod - gagnant de TypeFight # 34 Lorsque nous construisons des sites Web, nous devons dire au navigateur à quel point «gros» choses est: «cette rubrique est tellement grosse», «ce conteneur est vraiment élevé», «cette forme est plus large que cela», c'est comment nous mettons en page une page. Les pixels ont toujours eu un sens parfait comme unité de mesure choisie; nous sortons sur un écran, alors que pourrions-nous utiliser?!
Cependant, il s'avère que les pixels sont intrinsèquement inflexibles. Et il s'avère qu'être inflexible n'est pas bon pour le Web.
Oliver Reichenstein a déclaré il y a longtemps: «Le Web est une typographie à 95%», mais il a fallu quelques années pour que les gens comprennent l'idée. Contenu et utilisateurs; ils sont nos priorités en tant que concepteurs de sites Web, et la conception typographique nous permet de répondre à ces priorités.
Les navigateurs affichent le corps d'une copie à une taille par défaut. Sur les ordinateurs de bureau, il s'agit généralement de 16 pixels, les navigateurs mobiles varient. Les utilisateurs peuvent modifier ce paramètre par défaut, en fonction de leurs préférences..
Les concepteurs Web utilisent souvent CSS pour définir la taille de la police de base en pierre…
… Empêchant l'utilisateur d'adapter sa propre expérience de lecture, rendant ainsi le contenu moins accessible.
La leçon 1 est en train de rendre le pouvoir à l'utilisateur. N'empêchez pas les utilisateurs de définir leur propre taille de caractère, mais assurez-vous de commencer sur un pied d'égalité. Définissez la police de base sur 100% des valeurs par défaut du navigateur:
alors nous pouvons travailler à partir de là.
Nous devons encore définir la taille de nos divers éléments typographiques, en particulier si nous avons utilisé une technique de réinitialisation CSS pour supprimer tout redimensionnement par défaut. Une échelle modulaire assez typique ressemblerait à ceci:
Ces chiffres sont utilisés depuis des siècles, calculés dans le but d’optimiser les proportions, sans avoir à fabriquer physiquement un trop grand nombre de blocs utilisés pour l’impression. Il y a toutes sortes de mathématiques intelligentes qui justifient de telles gammes et je suis sûr que vous pouvez comprendre que cette gamme est aussi agréable à l'oeil..
Nous traduirions cette échelle dans notre propre typographie en appliquant CSS un peu comme ceci:
Cependant (comme nous l'avons déjà dit), utiliser des valeurs de pixels fixes est inflexible, alors rectifions cela…
Un em est une unité de mesure. Tout comme les pixels, les em peuvent déterminer la taille des éléments d’une page Web. Contrairement aux pixels, qui sont absolus, les em sont relatifs à la taille de police de leur parent, ce qui crée beaucoup de confusion..
1em est égal à la taille de la police héritée. Si la taille de la police d'un Ems tire son nom de l'impression. On ne sait pas exactement quand le terme a été utilisé pour la première fois, mais le M majuscule (prononcé) emm) représente le plus fidèlement le bloc d’impression carré sur lequel les lettres d’impression ont été placées, il est venu donner son nom à la mesure. Quelle que soit la taille en points de la police en question, le bloc de la majuscule M définirait le caractère Em. Un em est généralement un toucher plus grand que la forme de lettre, mais vous avez l'idée. Nous avons déjà commencé à définir notre échelle typographique en pixels, alors comment pouvons-nous convertir cela en EMS? Un calcul simple, qui exprime la taille de police souhaitée par rapport à la taille de police: En utilisant la taille du corps, nous supposons être de 16 pixels, afin de convertir nos fichiers de 36 pixels. Voici comment notre échelle est convertie, en utilisant la méthode ci-dessus: Certaines de ces valeurs peuvent devenir un peu complexes, mais n’ayez pas peur d’être aussi précises que possible avec les décimales. Les navigateurs feront toujours de leur mieux pour rendre les valeurs exactes. Pointe: Il est souvent utile de noter dans les commentaires, de vous rappeler comment vous avez calculé chaque valeur em. Le numéro un des gens les plus mécontents des ems vient de complications découlant de la cascade. Une valeur em est relative à la valeur de son parent le plus proche, ce qui peut accidentellement gâcher les choses si vous ne faites pas attention. Jetez un coup d'œil au css suivant, qui vise à obtenir des ancres et des paragraphes de taille égale: Maintenant, jetez un coup d'œil à cet élément de balisage innocent: Comme vous vous en doutez, tout apparaît bien dans le navigateur. Le paragraphe et l'ancre s'affichent à 1.2em par rapport à la taille de la police. Cependant, si nous devions introduire une deuxième ancre dans le paragraphe, voyons ce qui se passe: L'ancre dans le paragraphe est toujours classé à 1.2em, mais c'est maintenant relatif au paragraphe parent, qui fait déjà 19.2px - Remarque: Les éléments de liste imbriqués dans les menus de navigation sont un exemple classique de cas où le contrôle en cascade peut devenir incontrôlable - faites attention à celui-ci.. Il n'y a pas de solution pour cela; la dernière chose que vous voulez faire est d’ajouter une règle supplémentaire pour réduire la taille des ancres contenues dans les paragraphes - c’est un aller simple pour Migrainesville. Pour que votre code CSS et HTML soit maintenable, il est important que Keep It Simple ™. Cela devrait aider! Utiliser Ems signifie que vous devrez parfois bien réfléchir, mais cela vous obligera à faire le ménage et à coder efficacement.. Les rems sont utiles et se comportent exactement de la même manière que les ems, sans la cascade. Chaque rem que vous définissez est relatif à la taille de la police. La prise en charge est loin d’être aussi bonne, donc IE8 et les versions plus anciennes auront besoin d’une solution de secours basée sur les pixels.. Nous avons couvert le CSS Il n'y a pas de règle fixe pour la hauteur de ligne, mais 1.5em est une valeur raisonnable à essayer et rendra votre typographie agréable à lire.. Pointe: Jetez un coup d'oeil à la suggestion de Bryan Gruhlke dans les commentaires d'utiliser des valeurs sans unité avec line-height… Remarque: Les choses peuvent devenir compliquées si vous essayez de définir une grille de base avec ems, mais c'est un sujet pour un autre article. Une fois que vous vous êtes mis en tête de garder votre mise en page flexible en termes de taille de police, vous vous ferez de moins en moins en pixels pour la disposition des éléments sur la page.. Si nous parlons de dispositions fluides, vous devriez utiliser des valeurs en% pour déterminer la largeur d’un élément donné. Les pixels doivent être absents lors de la détermination des dimensions horizontales. L'espacement vertical peut être obtenu très facilement avec ems; Encore une fois, il s’agit d’une question de propreté, de balisage et de style. Envisagez de limiter les marges au bas de vos éléments, pour faciliter la gestion du rythme vertical. Si vous avez besoin de définir un Coins arrondis sur un bouton? Met le Texte ombre, boîte ombre, idem. Et si vous avez besoin de changer la taille de tout dans certaines circonstances, comme des fenêtres plus petites? Modifier la taille de la police de base du corps dans la requête multimédia appropriée Comme toutes les règles scientifiques d'excellence, il doit exister une exception pour le prouver. Dans ce cas, je peux penser à un bon scénario où vous pourriez avoir besoin de pixels; les frontières. Si vous définissez une largeur de bordure (ou la hauteur d'une règle horizontale) dans ems, son calcul peut être si petit que le navigateur ne peut pas l'afficher.. Dans ce cas, vous ne le verrez tout simplement pas. Pour les règles horizontales, vous pouvez avoir des styles un peu comme ceci: Afin d'éviter sa disparition lorsque la taille du corps est trop petite, vous pouvez ajouter ceci: Là. Un pixel Dangit. Les largeurs de bordure ne peuvent pas avoir une valeur minimale (malheureusement), donc une sauvegarde similaire dans ce cas n'est pas possible. Au lieu de cela, vous pouvez utiliser les valeurs de largeur de bordure de Commencez à utiliser ems aujourd'hui! Votre contenu est basé sur une typographie, que vous le réalisiez ou non. En revenant aux pixels, il n'est même pas nécessaire de convertir des figures et de penser à des dispositions fixes. Commencez à penser aux EMS et vous oublierez vite les pixels. Si vous pouvez penser à une situation dans laquelle vous ne pouvez tout simplement pas utiliser les ems, j'aimerais bien l'entendre dans les commentaires.!
Un M majuscule dans Calendas Plus - la place environnante a une hauteur de 1em et une largeur de 1em Conversion de pixels
, on a:
Problèmes avec la cascade
(1.2 * 16px = 19.2px).
(1.2 * 19.2px = 23.04px). Cela nous donne des ancres extra larges dans certaines parties de notre page; à peine souhaitable.Le correctif
Rems
Qu'en est-il d'utiliser Ems ailleurs??
taille de police propriété; un premier pas judicieux dans l’utilisation de ems, mais regardons maintenant hauteur de la ligne. Si jamais il y avait une propriété qui crie "n'utilise pas de valeurs de pixels", c'est line-height. La hauteur de ligne (décrite plus en détail dans un article précédent) d’un élément typographique doit toujours être relatif à la taille de la police. Si vous avez un en-tête dont la taille est définie dans ems, mais dont la hauteur de ligne est définie en pixels, vous risquez de vous retrouver avec un chevauchement laid et une relation visuelle médiocre en général..
Dans ce cas, 1.5em est 1.5 * 18px qui est 27px Éléments structurels
la taille (ce qui peut être délicat dans des mises en page flexibles) utilise aussi ems. Vous construisez peut-être une navigation et vous devez définir la hauteur des liens de menu - ils devraient grossir et diminuer avec la taille de la police.rayon de la frontière en utilisant ems, donc tout évolue de façon transparente.
Regardez ce Codepen pour un exemple plus visuel de ce dont je parle ici RWD
corps taille de la police: 90%; et pan! Votre site entier évolue dans le temps qu'il faut pour entrer entrer.Exceptions
Jetez un oeil à cette démo hr hauteur: .02em; bordure: aucune; fond blanc; marge: 2em 0; contour: aucun; bloc de visualisation; clarifier les deux; largeur: 100%;
hauteur min .: 1px;
épais, moyen et mince, bien que ces valeurs ne sont pas mieux adaptées à la taille de police que les pixels.Conclusion
Lectures complémentaires
Accentsconagua