Pourquoi Utiliser Twitter Bootstrap Pixels pour la Taille de la Police?

Étant donné que Twitter Bootstrap est conçu pour être réactif /appareil-friendly, pourquoi ne pas utiliser des tailles de police relatives?

InformationsquelleAutor Undistraction | 2012-10-21
  1. 128

    Ainsi, il semble qu'ils sont se cachant derrière le zoom du navigateur excuse. Vraiment triste de voir une telle fortement utilisé et influents dans le cadre d'ignorer complètement les problèmes d'accessibilité et l'un des aspects fondamentaux du responsive design. Ils sont dans une position de grande responsabilité et, malheureusement, semblent n'avoir aucune intention d'agir en conséquence.

    [Mise à jour] Donc, aujourd'hui, la Marque Otto a répondu sur le thread que j'ai référencé ci-dessus. Prévisible, il n'y a aucune mention de l'accessibilité et de l'utilisation de l'expression "pixel-perfect':

    D'accord, alors voici un peu de fond sur les décisions d'antan
    et des plans pour aller de l'avant.

    Pixels permettent un contrôle absolu et la présentation cohérente à travers tous les
    le navigateur.

    Designers encore surtout de penser et de fonctionner en pixels.

    Navigateurs
    à l'échelle des pages entières de ces jours, il n'est donc pas un problème de type
    mise à l'échelle ou quoi que ce soit.

    De nidification ems, historiquement, a été une douleur et peut nécessiter plus de maths pour la figure calculée, ou destinés à des valeurs en pixels.

    Mélange des unités de mesure, c'est moche et mes intérieure trouble obsessionnel-compulsif déteste ça.
    À l'aide d'unités sur la hauteur de la ligne est généralement déconseillée, mais offre immédiate
    la connaissance de ce que la valeur calculée est. Nous allons probablement essayer de
    loin de cela dans l'avenir.
    Dans l'avenir, nous allons probablement utiliser ems pour le type de dimensionnement, peut-être rems même, mais pas pour autre chose. C'est également discutable sur les tailles de police de caractères pour les entrées et les comme. C'est juste pas comment les gens construire pixel perfect sites.

    C'est un peu de tout et espérons-le, assez cohérent. Je vais essayer de bloguer à propos de ces changements, car ils viennent plus, mais je n'en suis pas sûr comment fermer 3.0 qui est et ce qui sera tout entraîner encore.

    Je dirais quelqu'un avec de forts sentiments au sujet de cet aller et +1 ce fil.

    [Mise à jour] V3 feuille de route dessinés dans V2.3 communiqué de blog ne fait aucune mention de l'ajout de support pour les ems.

    [Mise à jour] Beaucoup plus d'informations à propos de Bootstrap V3 disponible dans la demande de pull ici y compris la suite de Mark Otto:

    Nous avons exploré l'utilisation de rem parts au cours de pixels, mais n'a trouvé que peu d'avantages
    pour compenser les conséquences de leur utilisation. IE8 aurait encore besoin d'un pixel
    de secours, et qui a beaucoup de doublons de lignes de code. En outre, à l'aide de
    rems partout au lieu de pixels ne ferait qu'aggraver le problème.
    Le mélange rems et les pixels ne semblent pas de sens maintenant.
    Cependant, nous pouvons et nous allons continuer à évaluer ce dans des versions futures.

    Puis plus récemment (dans les commentaires):

    Je doute fortement que nous allons être en expédition avec rems à ce point. Changer
    tout—au-delà de police-tailles—est une tâche énorme et qui vient avec
    quelques avantages pour compenser cela. Double les lignes de code pour les polices
    de côté, le soutien rems de toute autre manière semble fastidieux, au mieux. Que
    dit, on peut toujours revoir dans une prochaine version. Pour l'instant, nous sommes
    collage avec des pixels.

    Ayant grandi insatisfait avec un grand nombre de Bootstrap caractéristiques, et non la moindre, est qu'il manque de l'em-soutien, je vous suggère fortement de regarder Susy si vous voulez juste des grilles, ou Zurb Foundation 4 pour l'ensemble des enchiladas. Ne laissez pas Bootstrap, la popularité du cloud votre jugement. N'importe qui peut construire quelque chose avec Bootstrap, ce qui est exactement son problème - il est conçu pour les personnes avec un minimum de web-expérience. Tout simplement parce que il ya beaucoup de Mcdonald's dans le monde ne signifie pas que c'est une bonne place pour manger.

    [Edit] OK. C'était une chose stupide à dire. Depuis que j'ai écrit cela, j'ai utilisé BS3 et il a haussé son jeu considérablement. Je ne l'aurais pas fait une telle jetant un commentaire, mais je persiste à croire qu'il a fait une mauvaise décision dans l'utilisation de pixels pour la police des effectifs. Ainsi que les questions d'accessibilité, ems sont utiles dans d'autres façons.

    [Mise à jour] Ressemble rems sera être pris en charge dans la version 4 (Mdo cité de ici):

    Pour ceux qui suivent, nous allons être en mesure de changer de pixels REMs
    dans la v4 quand nous laissons tomber IE8 soutien. Ne peuvent pas faire beaucoup jusqu'alors.

    [Mise à jour Février 17] Bootstrap 4 est encore en Alpha, mais montre l'utilisation de rems en son La typographie docs, mais n'est pas montrent l'utilisation de rems en son mise en page docs.

    • Intéressant, merci pour votre point de vue
    • Le problème est qu'il semble qu'il n'y a personne ici pour vous expliquer pourquoi il est plus de l'accessibilité "amical" à l'utilisation de l'EM plus de PX. Je veux dire, ok, sur le papier cela semble évident, mais dans la vraie vie? Quelqu'un aurait-il des exemples RÉELS d'utilisateurs coincé sur pixel en fonction des sites web? Avec de vrais stats et les vrais problèmes des pixels causes? C'est la vraie question dans ce débat, je pense. L'absence de la preuve est pourquoi la plupart des gens utilisent PX.
    • Niveau du système d'exploitation et le navigateur polices sont augmentés par les personnes avec des problèmes de vision. em est nécessaire pour ces personnes, d'où "l'accessibilité".
    • Il y a une discussion ici, ce qui explique pourquoi la taille de la police augmenter est mieux que le zoom, webaim.org/discussion/mail_thread?thread=5849 "j'ai parlé à quelqu'un à CSUN l'année dernière, qui a souligné que le zoom avant sur l'ensemble de la page n'est pas du tout utile pour lui. Il a une très faible vision et il n'a besoin d'augmenter la taille du texte sur une page de manière assez significative pour le lire. Toutefois, lorsque vous utilisez le zoom de la page, vous finissez par avoir à faire défiler à gauche et à droite pour lire un texte et qui vieillit très vite. Il est très facile de perdre votre place lorsque vous avez à faire."
    • Em-tailles sont aussi partie intégrante du développement mobile. Les fabricants d'appareil de dépenser de l'argent et de l'heure de la détermination de la optimal de la base taille de la police pour des raisons de lisibilité sur leur appareil. Nous invalider l'ensemble de la recherche, lorsque nous disons "font-size: 14px." Ce que cela signifie sur UltraAwesomeRetina3.0? Ou sur un 52" écran avec moins de pixels par pouce? En laissant la base taille de la police de la responsabilité du fabricant est une bonne pratique, simple et clair. filamentgroup.com/lab/... blog.cloudfour.com/...
    • Depuis que je suis un (appelons ça) EM fanatique, j'aime le fait que vous avez continué à mettre à jour cette réponse... et même plus que vous avez évoqué des solutions de rechange. +1 😉
    • Le Bootstrap v4 alpha passé à rems, mais v4 alpha 2 basculé vers px: "est Revenue questions des médias et de la grille des conteneurs à partir de rems à pixels que les fenêtres ne sont pas touchés par la taille de police."
    • BS4 utilise ems dans tout le code, mais annule tout le travail dur en collant html { font-size: 16px; } en haut. :les coups de tête sur le bureau:. Pour toute personne intéressée, j'ai ouvert un problème: github.com/twbs/bootstrap/issues/19460
    • un commentaire fait référence à des requêtes de média. Il n'y a pas d'intérêt à utiliser ems pour questions des médias, comme il se comporte de la même quelle que soit la taille de la police.
    • Comme je le comprends, les questions d'accessibilité appliquée à IE6 strictement. En 2016, IE6 est mort et donc l'accessibilité n'est plus viable facteur. Par conséquent, les pixels de la méthode est de loin supérieure.
    • Ne pas s'excuser d'être de droite.

    InformationsquelleAutor Undistraction
  2. 10

    Ne laissez pas Bootstrap, la popularité du cloud votre jugement. N'importe qui peut
    construire quelque chose avec Bootstrap, ce qui est exactement son problème - c'est
    conçu pour les personnes avec un minimum de web-expérience. Juste parce qu'il y
    beaucoup de Mcdonald's dans le monde ne signifie pas que c'est une bonne place
    pour manger.

    Vous pourriez vous dire de ne pas laisser le cloud de votre jugement dans un sens négatif. C'est un cadre solide et si vous vous donnez la peine d'investir du temps dans la façon de les utiliser efficacement, la majorité de votre argument tombe sur la tête.

    Alors qu'il est souvent utilisé par les personnes avec un minimum d'expérience - et il n'y a rien de mal à cela - il est également utilisé par des personnes avec un beaucoup de l'expérience.

    À tout le moins, il est un précieux outil de prototypage. Au mieux, il est entièrement personnalisable. Vous pouvez choisir, de modifier, d'ajouter à ce qui est pourquoi il est appelé un "cadre".

    J'ai été en utilisant efficacement sur certains de mes projets depuis plus de deux ans - c'est aussi maigre que vous voulez qu'il soit. J'ai simplement utilisé le framework de formulaire, juste les grilles, l'ensemble de la base de code et personnalisés en fonction de mes besoins. Dans beaucoup de façons, il est "consommé" mon jeu, m'en prétraitement, à l'aide de variables, le rodage de la façon dont je structure les projets.

    Oui, il y a quelques problèmes. px pour les tailles de police et à l'aide de Moins sont deux.
    Cependant, parce qu'il est entièrement open source, vous pouvez trouver des options pour remédier à la fois de ceux facilement.

    J'ai étudié Fondation et aimé ce que j'ai vu, mais je suis dans la position peu enviable d'avoir à soutenir IE8, comme beaucoup de développeurs sont. La fondation a supprimé le support de IE8, faisant d'elle un "no go" pour moi. Malgré cela, je ne suis pas sur pour rejeter l'intégralité d'un cadre, et plus particulièrement de quelque chose qui est gratuit à utiliser et gratuit de modifier basée uniquement sur quelques questions!

    Diable, dans un projet, j'ai levé les pièces de la Fondation et de pièces de Bootstrap et ajouté mon propre code, c'est la beauté de l'open source.

    • C'est totalement juste assez et pour être honnête, avec Bootstrap 3, je pense qu'il a vraiment intensifié son jeu. Rétrospectivement, il était un peu d'une chose stupide à dire, mais il est né d'une frustration et je pense toujours que la majorité des sites, je vois que l'utilisation de Bootstrap utiliser très langoureusement. C'est un excellent outil pour le prototypage et pour les non-publics de pages face à face - zone d'admin etc. Il peut aussi être un excellent outil pour les sites destinés au public si la personne qui l'utilise, il comprend comment le style au-delà de sa valeur par défaut. Comme tout outil, il est facilement abusé, et je suppose que la facilité d'utilisation est-ce que les résultats d'un montant de (ab)d'utilisation.
    • Ouais, je vous entends - parfois, vous avez juste tellement irrités avec codage, de vous en prendre 🙂 Au moins, avec bootstrap 3.0, en cas d'abus, il y a certains mise en place de normes. La même chose s'applique à la Fondation. Il y a beaucoup qui peut être appris à partir de les deux. Finalement, compte tenu de l'heure, "le déploiement de votre propre" est la voie à suivre.
    • Poster une réponse à un commentaire sur un autre réponse est quelque peu déroutant... (juste pour dire)
    • Agréable de voir un certain équilibre apporté 🙂 Bootstrap fonctionne bien pour beaucoup de gens, expérimentés et newb comme.
    • Ceci ne répond pas à la question.
    InformationsquelleAutor Matthew Trow
  3. 6

    Si vous préférez Bootstrap avec em et rem soutien, vous pouvez prendre un coup d'oeil à ce - https://github.com/ivayloc/twbs-rem-em il n'est pas nécessaire de faire un calcul pour convertir les pixels réels ou em unités, il est construit dans un @mixins pour ce - @include rem(property, values) - également de secours de px et de la gu la conversion vous pouvez utiliser em(value).

    • Je ne suis plus à l'aide de TBS que j'ai trouvé de la Fondation à être beaucoup mieux pensé, cependant cela ressemble à un bon compromis.
    InformationsquelleAutor ivayloc
  4. 1

    Alors que j'utilise Bootstrap largement, il y a quelques zones où l'accessibilité prend le brûleur arrière. Je pense qu'il y a d'inévitables compromis avec une plate-forme qui est utilisé de façon extensive.

    Je suis complètement d'obtenir pourquoi ils ont choisi de garder les pixels pour une taille de police. Les problèmes de succession à l'em pour un cadre de polices sont un cauchemar.

    rems sont une autre option, mais la prise en charge du navigateur est toujours problématique.

    Vous pouvez créer votre propre rems mixin et remplacer chaque ligne de moins qui utilise la police de caractères de taille variable.

    C'est la beauté de bootstrap et de cadres, comme c'est une base solide pour travailler.

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

    Bootstrap n'est pas impeccable, mais ensuite, je doute qu'il n'a jamais été destiné à être la réponse définitive à toutes vos exigences. C'est une base - un 'bootstrap' - l'apprendre et de l'utiliser correctement, ajouter, mélanger le tout - à tout le moins, c'est un impressionnant cadre de prototype, ou pour jeter un rapide site. Pour aller plus loin, il y a vraiment des bases solides à l'intérieur qui peut être appliquée à tout site web.

    • Je pense que l'une des ironies de Bootstrap est qu'il fait beaucoup plus que de "bootstrap" de votre application. Il est prescriptif sur de nombreux niveaux, pas moins de qui est la mise en page. En dehors de la paresse, de la raison pour laquelle tant de nombreux sites sont donc évidemment, bootstrap basé sur, c'est que ce n'est pas facile de rompre avec les valeurs par défaut. Oui, il ya une poignée de variables pour personnaliser les aspects, mais l'horrible et la spécificité des questions de faire annuler les autres aspects d'un gros mal de tête. Peut-être Bootstrap 3 sera mieux. Personnellement, je suis aimer Fondation 4. Il me fait me sentir comme je me sens en charge plutôt que de le cadre.
    InformationsquelleAutor user2584840
  5. 0

    je pense, c'est parce que le bureau de la première approche. Twitter Bootstrap est sensible sympathiques, mais la "dégradation gracieuse" approche.

    InformationsquelleAutor gocsp