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 / adapté aux appareils, pourquoi n'utilise-t-il pas des tailles de police relatives?

Eh bien, il semble qu'ils se cachent derrière l'excuse du zoom du navigateur . Vraiment triste de voir un cadre aussi largement 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 ne semblent malheureusement pas avoir l'intention d'agir en conséquence.

[Mise à jour] Donc aujourd'hui, Mark Otto a répondu sur le fil auquel j'ai fait référence ci-dessus. Comme on pouvait s'y attendre, il n'y a aucune mention d'accessibilité et d'utilisation de l'expression `` pixel-perfect '':

Bon, 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 dans tous les navigateurs.

Les concepteurs pensent et fonctionnent 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 du type ou quoi que ce soit.

L'imbrication des ems a toujours été une douleur et peut nécessiter des calculs supplémentaires pour les valeurs de pixels calculées / prévues.

Mélanger des unités de mesure est moche et mon TOC interne le déteste. L'utilisation d'unités sur la hauteur de ligne est généralement déconseillée, mais fournit une connaissance immédiate de la valeur calculée. Nous essaierons probablement de nous en éloigner à l'avenir. À l'avenir, nous utiliserons probablement ems pour le dimensionnement du 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 autres. Ce n'est tout simplement pas ainsi que les gens créent des sites parfaits au pixel près.

C'est un peu partout et, espérons-le, assez cohérent. J'essaierai de bloguer sur ces changements au fur et à mesure qu'ils se présenteront, mais je ne suis pas sûr de la proximité de la 3.0 et de ce que cela impliquera encore.

Je suggérerais à toute personne ayant des sentiments forts à propos de ce fil de donner +1 à ce fil .

[Mise à jour] La feuille de route de la V3 publiée dans l'article de blog de la version V2.3 ne fait aucune mention de l'ajout du support pour ems.

[Mise à jour] Beaucoup plus d'informations sur Bootstrap V3 disponibles dans la demande d'extraction ici, y compris les suivantes de Mark Otto:

Nous avons exploré l'utilisation des unités rem sur les pixels, mais avons trouvé peu d'avantages pour compenser les implications de leur utilisation. IE8 aurait toujours besoin d'un pixel de secours, et c'est beaucoup de lignes de code en double. De plus, l'utilisation de rems partout au lieu de pixels exacerberait ce problème. Le mélange de rems et de pixels ne semble pas non plus avoir de sens 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 avec rems à ce stade. Tout changer - au-delà des tailles de police - 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é, prendre en charge les rems d'une autre manière semble au mieux fastidieux. Cela dit, nous pouvons toujours revenir dans une prochaine version. Pour l'instant, nous nous en tenons aux pixels.

Ayant été insatisfait d'un grand nombre de fonctionnalités de Bootstrap, dont le 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 brouiller 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.

[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 commentaire aussi jetable, mais je pense toujours qu'il a pris une mauvaise décision en utilisant des pixels pour le dimensionnement des polices. Outre les problèmes d'accessibilité, les ems sont utiles à d'autres égards.

[Mise à jour] On dirait que les rems seront pris en charge dans la V4 (Mdo cité ici ):

Pour ceux qui suivent, nous pourrons 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 de rems dans ses documents Typography , mais ne montre pas l' utilisation de rems dans ses documents de mise en page .

Ne laissez pas la popularité de Bootstrap brouiller 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 brouiller votre jugement de manière négative. C'est un cadre solide et si vous prenez la peine d'investir du temps dans la façon de l'utiliser efficacement, la majorité de votre argument tombe sur sa 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 avec beaucoup d'expérience.

Au moins, c'est un outil de prototypage inestimable. Au mieux, il est entièrement personnalisable. Vous pouvez choisir et choisir, modifier, ajouter - c'est pourquoi cela s'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 framework de formulaire, juste les grilles, la base de code entière et l'ai personnalisé pour répondre à mes besoins. À bien des égards, cela a «amélioré» mon jeu, m'amenant plus loin dans le prétraitement, en utilisant des variables, en perfectionnant la façon dont je structure les projets.

Oui, il y a des problèmes. pxpour les tailles de police et en utilisant Less sont deux. Cependant, comme il est entièrement open source, vous pouvez trouver des options pour remédier facilement à ces deux problèmes.

J'ai enquêté sur Foundation et j'ai aimé ce que j'ai vu, mais je suis dans la malheureuse position de devoir supporter IE8, comme le sont de nombreux développeurs. La Fondation a abandonné son soutien à IE8, ce qui en fait un «non» pour moi. Malgré cela, je ne suis pas sur le point de rejeter un cadre entier, plus précisément quelque chose qui est libre d'utiliser et gratuit pour modifions basées uniquement sur quelques questions!

Heck, dans un projet, j'ai soulevé 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 le support em et rem, vous pouvez jeter un oeil à ceci - https://github.com/ivayloc/twbs-rem-em, il n'est pas nécessaire de faire de calcul pour convertir les pixels en unités rem ou em, il y a une construction @mixinspour cela - @include rem(property, values)- également un retour à px et pour la conversion em que vous pouvez utiliser em(value).

Bien que j'utilise beaucoup Bootstrap, 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 si largement utilisée.

Je comprends parfaitement pourquoi ils ont choisi de conserver les pixels pour la taille de la police. Les problèmes d'héritage avec les em pour les polices d'un framework sont un cauchemar total.

rems est une option alternative, mais la prise en charge des navigateurs reste problématique.

Vous pouvez créer votre propre mixin rems et remplacer chaque ligne de less qui utilise la variable de taille de police de base.

C'est la beauté de bootstrap - et des frameworks similaires - c'est une base solide sur laquelle travailler.

Oui, j'ai mentionné qu'il y a des éléments dans le bootstrap de Twitter qui ne sont pas si accessibles - un petit exemple, l'utilisation de 'display: none' au lieu d'utiliser clip. Je suis presque sûr qu'il y a une raison valable à cela - et encore une fois, vous pouvez très facilement modifier cela si vous le souhaitez.

Bootstrap n'est pas parfait, 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-y, mélangez tout - à tout le moins, c'est un cadre génial pour prototyper ou pour créer un site rapide. Pour aller plus loin, il y a un travail de base vraiment solide qui peut être appliqué à n'importe quel site Web.

Je pense que c'est à cause de la première approche de bureau. Twitter Bootstrap est une approche conviviale et réactive, mais une approche de «dégradation gracieuse».