Pourquoi Twitter Bootstrap utilise-t-il des pixels pour la taille de la police?


Réponses:


129

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 .


4
Le problème est qu'il semble qu'il n'y ait personne ici pour expliquer pourquoi il est plus «convivial» d'utiliser EM plus que PX. Je veux dire ok, sur le papier cela semble évident, mais dans la vraie vie? Quelqu'un a-t-il de VRAIS exemples d'utilisateurs bloqués sur des sites Web basés sur des pixels? Avec de vraies statistiques et de vrais problèmes causés par les pixels? Telle est la vraie question dans ce débat, je pense. Le manque de preuves est la raison pour laquelle la plupart des gens utilisent PX.
adriendenat

7
Le niveau du système d'exploitation et les polices au niveau du navigateur sont augmentés par ceux qui ont des problèmes de vision. emest nécessaire pour ces personnes, d'où «l'accessibilité».
Steven Vachon

1
Il y a une discussion ici qui explique pourquoi l'augmentation de la taille de la police est meilleure que le zoom, webaim.org/discussion/mail_thread?thread=5849 "J'ai parlé à quelqu'un au CSUN l'année dernière qui a souligné que faire un zoom avant sur toute la page n'était pas très utile Il a une très faible vision et il doit augmenter la taille du texte d'une page de manière assez significative pour pouvoir le lire. Cependant, lorsque vous utilisez le zoom de page, vous finissez par devoir faire défiler vers la gauche et la droite pour lire du texte et cela vieillit très vite. Il est très facile de perdre sa place quand il faut le faire. "
tony

4
Les tailles basées sur EM font également partie intégrante du développement mobile. Les fabricants d'appareils passent de l'argent et du temps à déterminer la taille de police de base optimale pour la lisibilité sur leur appareil. Nous annulons toutes ces recherches lorsque nous disons «font-size: 14px». Qu'est-ce que cela signifie sur UltraAwesomeRetina3.0? Ou sur un écran de 52 pouces avec moins de pixels par pouce? Laisser la taille de la police de base au fabricant est une bonne pratique, pure et simple. Filamentgroup.com/lab /
Jay Dansand

3
Puisque je suis un fanatique (appelons-le) EM, j'aime le fait que vous ayez continué à mettre à jour cette réponse… et encore plus que vous ayez indiqué des alternatives. +1 ;)
e-sushi

11

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.


6
C'est tout à fait juste et pour être honnête, avec Bootstrap 3, je pense qu'il a vraiment intensifié son jeu. Rétrospectivement, c'était un peu ridicule à dire, mais cela est né de la frustration et je pense toujours que la majorité des sites que je vois qui utilisent Bootstrap l'utilisent très paresseusement. C'est un excellent outil pour le prototypage et pour les pages non publiques - zones d'administration, etc. Il peut également être un excellent outil pour les sites publics si la personne qui l'utilise comprend comment styliser au-delà de ses valeurs par défaut. Comme tout outil, il est facilement abusé, et je suppose que la facilité d'utilisation est ce qui se traduit par la quantité d'utilisation (ab).
Undistraction

2
Ouais, je vous entends - parfois vous êtes tellement irrité par le codage, vous vous fâchez :) Au moins, avec bootstrap 3.0, en cas d'abus, il y a des normes en place. La même chose s'applique à la Fondation. Il y a beaucoup à apprendre des deux. En fin de compte, étant donné le temps, «rouler soi-même» est la voie à suivre.
Matthew Trow

2
Poster une réponse pour commenter une autre réponse est quelque peu déroutant… (il suffit de dire)
e-sushi

Ravi de voir un certain équilibre apporté à cela :) Bootstrap fonctionne bien pour beaucoup de gens, expérimentés et novices.
Aaria Carter-Weir

Cela ne répond pas à la question.
Greg Schmit

6

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).


Je n'utilise plus TBS car j'ai trouvé que Foundation était bien mieux pensé, mais cela semble être un bon compromis.
Undistraction

1

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.


1
Je pense que l'une des ironies de Bootstrap est qu'il fait bien plus que «bootstrap» votre application. Il est normatif à tant de niveaux, dont le moindre n'est pas la mise en page. Outre la paresse, la raison pour laquelle tant de sites sont si manifestement basés sur le bootstrap est qu'il n'est pas si facile de rompre avec les valeurs par défaut. Oui, il existe une poignée de variables pour personnaliser les aspects, mais les problèmes de spécificité horribles font de la suppression d'autres aspects un énorme casse-tête. Peut-être que Bootstrap 3 sera meilleur. Personnellement, j'aime bien Foundation 4. Cela me donne l'impression que c'est moi qui dirige plutôt que le cadre.
Undistraction

0

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».

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.