Pourquoi Twitter Bootstrap utilise-t-il des pixels pour la taille de la police?
Étant donné que Twitter Bootstrap est conçu pour être réactif/convivial, pourquoi n'utilise-t-il pas des tailles de police relatives?
Eh bien, il semble qu'ils soient se cachant derrière l'excuse du zoom du navigateur . Vraiment triste de voir un cadre aussi utilisé et influent ignorer complètement les problèmes d'accessibilité et une pierre angulaire fondamentale de la conception réactive. Ils sont dans une position de grande responsabilité et semblent malheureusement n'avoir aucune intention d'agir en conséquence.
[Mise à jour] Donc aujourd'hui, Mark Otto a répondu sur le sujet que j'ai référencé ci-dessus. Comme on pouvait s'y attendre, il n'est pas fait mention de l'accessibilité et de l'utilisation de l'expression "pixel parfait":
D'accord, voici donc un peu de contexte sur les décisions d'antan et les plans pour aller de l'avant.
Les pixels offrent un contrôle absolu et un rendu cohérent sur tous les navigateurs.
Les concepteurs pensent et opèrent encore principalement en pixels.
Les navigateurs mettent à l'échelle des pages entières de nos jours, donc ce n'est pas un problème avec la mise à l'échelle des types ou quoi que ce soit.
Historiquement, l'emboîtement des ems a été difficile et peut nécessiter des calculs supplémentaires pour les valeurs de pixels calculées/prévues.
Le mélange des unités de mesure est moche et mon OCD intérieur le déteste. L'utilisation d'unités à hauteur de ligne est généralement déconseillée, mais permet de connaître immédiatement la valeur calculée. Nous essaierons probablement de nous en éloigner à l'avenir. À l'avenir, nous utiliserons probablement ems pour le dimensionnement de type, peut-être même rems, mais pas pour autre chose. Ceci est également discutable sur les tailles de police pour les entrées et similaires. Ce n'est pas comme ça que les gens construisent des sites parfaits en pixels.
C'est un peu partout et, espérons-le, suffisamment cohérent. J'essaierai de bloguer sur ces changements au fur et à mesure qu'ils se présentent, mais je ne sais pas à quel point la version 3.0 est proche et ce que tout cela impliquera encore.
Je suggérerais à tous ceux qui ont des sentiments forts à ce sujet et +1 ce fil .
[Mise à jour] Feuille de route V3 décrite dans publication de blog V2. ne fait aucune mention de l'ajout de la prise en charge des ems.
[Mise à jour] Beaucoup plus d'informations sur Bootstrap V3 disponible dans la demande de tirage ici y compris les éléments suivants de Mark Otto:
Nous avons exploré l'utilisation des unités rem par rapport aux pixels, mais avons trouvé peu d'avantages pour compenser les implications de leur utilisation. IE8 aurait toujours besoin d'une solution de secours en pixels, et cela fait beaucoup de lignes de code en double. De plus, l'utilisation de rems partout au lieu de pixels aggraverait ce problème. Mélanger les rems et les pixels ne semble pas non plus logique pour le moment. Cependant, nous pouvons et continuerons à évaluer cela dans les prochaines versions.
Puis plus récemment (dans ses commentaires):
Je doute fortement que nous expédions des rems à ce stade. Tout changer, au-delà de la taille des polices, est une tâche énorme et qui présente peu d'avantages pour compenser cela. Doublez les lignes de code pour les tailles de police de côté, le support des rems de toute autre manière semble au mieux fastidieux. Cela dit, nous pouvons toujours revenir sur une prochaine version. Pour l'instant, nous nous en tenons aux pixels.
Ayant grandi insatisfait d'un grand nombre de fonctionnalités de Bootstrap, notamment son manque de support em, je suggère fortement de regarder Susy si vous voulez juste des grilles, ou Zurb Foundation 4 pour toute l'enchilada. Ne laissez pas la popularité de Bootstrap assombrir votre jugement. Tout le monde peut construire quelque chose avec Bootstrap, ce qui est exactement son problème - il est conçu pour les personnes ayant une expérience Web minimale. Ce n'est pas parce qu'il y a beaucoup de McDonalds dans le monde que c'est un endroit sain pour manger.
[Modifier] OK. C'était une chose idiote à dire. Depuis que j'ai écrit ceci, j'ai utilisé BS3 et il a considérablement amélioré son jeu. Je n'aurais pas dû faire un tel commentaire, mais je pense toujours qu'il a pris une mauvaise décision en utilisant des pixels pour le dimensionnement des polices. En plus des problèmes d'accessibilité, les ems sont utiles à d'autres égards.
[Update] On dirait que rems sera pris en charge dans V4 (Mdo cité de ici ):
Pour ceux qui suivent, nous serons en mesure de passer des pixels aux REM dans la v4 lorsque nous abandonnerons le support IE8. Je ne peux pas faire grand-chose jusque-là.
[Mise à jour février 17] Bootstrap 4 est toujours en Alpha, mais montre l'utilisation des rems dans ses Typography docs , mais ne fonctionne pas 't montre l'utilisation des rems dans ses layout docs .
Ne laissez pas la popularité de Bootstrap assombrir votre jugement. Tout le monde peut créer quelque chose avec Bootstrap, ce qui est exactement son problème - il est conçu pour les personnes ayant une expérience Web minimale. Ce n'est pas parce qu'il y a beaucoup de McDonalds dans le monde que c'est un endroit sain pour manger.
Vous pourriez argumenter pour ne pas le laisser assombrir votre jugement de manière négative. C'est un cadre solide et si vous vous donnez la peine d'investir du temps dans la façon de l'utiliser efficacement, la majorité de votre argument tombe dans la tête.
Bien qu'il soit souvent utilisé par des personnes ayant une expérience minimale - et il n'y a rien de mal à cela - il est également utilisé par des personnes ayant beaucoup d'expérience .
À tout le moins, c'est un outil de prototypage inestimable. Au mieux, il est entièrement personnalisable. Vous pouvez choisir, modifier, ajouter - c'est pourquoi on l'appelle un "cadre".
Je l'utilise efficacement sur certains de mes projets depuis plus de deux ans - il est aussi léger que vous le souhaitez. J'ai utilisé uniquement le cadre du formulaire, juste les grilles, la base de code entière et l'ai personnalisé pour répondre à mes besoins. À bien des égards, cela a "augmenté" mon jeu, me poussant plus loin dans le prétraitement, utilisant des variables, perfectionnant la façon dont je structure les projets.
Oui, il y a quelques problèmes. px pour les tailles de police et l'utilisation de Less sont deux. Cependant, comme il est entièrement open source, vous pouvez trouver des options pour y remédier facilement.
J'ai étudié Foundation et j'ai aimé ce que j'ai vu, mais je suis dans la position malheureuse de devoir prendre en charge IE8, comme de nombreux développeurs. La Fondation a abandonné le support d'IE8, ce qui en fait un "non" pour moi. Malgré cela, je ne suis pas sur le point de rejeter un framework entier, plus spécifiquement quelque chose qui est gratuit à utiliser et gratuit à modifier en fonction uniquement de quelques problèmes!
Heck, dans un projet, j'ai levé des parties de Foundation et des parties de Bootstrap et ajouté mon propre code personnalisé - c'est la beauté de l'open source.
Si vous préférez toujours Bootstrap avec support em et rem, vous pouvez jeter un oeil à ceci - https://github.com/ivayloc/twbs-rem-em là il n'y a pas besoin de faire de calcul pour convertir les pixels en unités rem ou em, il y a construit dans @mixins pour cela - @include rem(property, values) - également de retour en px et pour la conversion em, vous pouvez utiliser em(value).
Alors que j'utilise Bootstrap largement, il y a quelques domaines où l'accessibilité prend le dessus. Je suppose qu'il y a des compromis inévitables avec une plate-forme qui est utilisée si largement.
Je comprends parfaitement pourquoi ils ont choisi de conserver les pixels pour la taille de la police. Les problèmes d'héritage avec em pour les polices d'un framework sont un véritable cauchemar.
rems est une option alternative, mais la prise en charge du navigateur reste problématique.
Vous pouvez créer votre propre mix rems et remplacer chaque ligne de moins qui utilise la variable de taille de police de base.
C'est la beauté de bootstrap - et des frameworks comme ça - c'est une base solide sur laquelle travailler.
Oui, j'ai mentionné qu'il y a des éléments sur Twitter bootstrap qui ne sont pas accessibles - un petit exemple, l'utilisation de 'display: none' au lieu d'utiliser un clip. Je suis sacrément sûr il y a une raison valable à cela - et encore une fois, vous pouvez très facilement le modifier si vous le souhaitez.
Bootstrap n'est pas sans défaut, mais je doute qu'il ait jamais été destiné à être la réponse finale à toutes vos exigences. C'est une base - un `` bootstrap '' - apprenez-le et utilisez-le correctement, ajoutez-le, mélangez le tout - à tout le moins, c'est un cadre génial pour créer un prototype ou créer un site rapide. Pour aller plus loin, il existe des bases très solides qui peuvent être appliquées à tout site Web.
je pense que c'est à cause de la première approche du bureau. Twitter Bootstrap est une approche responsive friendly, mais "gracieuse dégradation").