Warum verwendet Twitter Bootstrap Pixel für die Schriftgröße?


Antworten:


129

Nun, es scheint, dass sie sich hinter der Zoom-Entschuldigung des Browsers verstecken . Es ist wirklich traurig zu sehen, dass ein so stark genutztes und einflussreiches Framework Barrierefreiheitsprobleme und einen grundlegenden Eckpfeiler für responsives Design völlig ignoriert. Sie sind in einer Position großer Verantwortung und scheinen leider nicht die Absicht zu haben, entsprechend zu handeln.

[Update] Also antwortete Mark Otto heute auf den Thread, auf den ich oben verwiesen habe. Vorhersehbar wird die Zugänglichkeit und Verwendung des Ausdrucks "pixelgenau" nicht erwähnt:

Okay, hier ein kleiner Hintergrund zu den Entscheidungen von gestern und den Plänen für weitere Fortschritte.

Pixel bieten absolute Kontrolle und konsistentes Rendern in jedem Browser.

Designer denken und arbeiten immer noch meistens in Pixeln.

Browser skalieren heutzutage ganze Seiten, sodass es kein Problem mit der Typenskalierung oder Ähnlichem gibt.

Das Verschachteln von Ems war in der Vergangenheit ein Problem und kann zusätzliche Berechnungen für berechnete / beabsichtigte Pixelwerte erfordern.

Das Mischen von Maßeinheiten ist hässlich und meine innere Zwangsstörung hasst es. Von der Verwendung von Einheiten in Zeilenhöhe wird im Allgemeinen abgeraten, es wird jedoch sofort bekannt, wie hoch der berechnete Wert ist. Wir werden wahrscheinlich versuchen, dies in Zukunft zu vermeiden. In Zukunft werden wir wahrscheinlich ems für die Typgröße verwenden, vielleicht sogar rems, aber nicht für irgendetwas anderes. Dies ist auch bei Schriftgrößen für Eingaben und dergleichen umstritten. Es ist einfach nicht so, wie Leute pixelgenaue Websites erstellen.

Das ist ein bisschen vorbei und hoffentlich kohärent genug. Ich werde versuchen, über diese Änderungen zu bloggen, wenn sie mehr auftauchen, aber ich bin mir nicht sicher, wie nah 3.0 ist und was das alles noch bedeuten wird.

Ich würde jedem empfehlen, der starke Gefühle dazu hat und diesen Thread +1 .

[Update] In der V3-Roadmap, die im Blogpost der Version 2.3 veröffentlicht wurde, wird nicht erwähnt, dass Unterstützung für ems hinzugefügt wird.

[Update] Viele weitere Informationen zu Bootstrap V3 finden Sie in der Pull-Anfrage hier, einschließlich der folgenden von Mark Otto:

Wir haben die Verwendung von Rem-Einheiten über Pixel untersucht, aber wenig Nutzen gefunden, um die Auswirkungen ihrer Verwendung auszugleichen. IE8 würde immer noch einen Pixel-Fallback benötigen, und das sind viele doppelte Codezeilen. Darüber hinaus würde die Verwendung von Rems überall anstelle von Pixeln dieses Problem verschlimmern. Das Mischen von Rems und Pixeln scheint derzeit ebenfalls nicht sinnvoll zu sein. Wir können und werden dies jedoch in zukünftigen Versionen weiter evaluieren.

Dann in jüngerer Zeit (in seinen Kommentaren):

Ich bezweifle sehr, dass wir an dieser Stelle mit Rems versenden werden. Alles zu ändern - über die Schriftgrößen hinaus - ist eine große Aufgabe, die nur wenige Vorteile bietet, um dies auszugleichen. Verdoppeln Sie die Codezeilen für Schriftgrößen, und die Unterstützung von Rems auf andere Weise scheint bestenfalls mühsam. Trotzdem können wir in einer zukünftigen Version immer wieder darauf zurückgreifen. Im Moment bleiben wir bei Pixeln.

Nachdem ich mit einer großen Anzahl von Bootstrap-Funktionen unzufrieden geworden bin, nicht zuletzt wegen mangelnder Em-Unterstützung, empfehle ich dringend, Susy zu besuchen, wenn Sie nur Grids möchten, oder Zurb Foundation 4 für die gesamte Enchilada. Lassen Sie sich nicht von der Popularität von Bootstrap trüben. Jeder kann mit Bootstrap etwas bauen, was genau sein Problem ist - es wurde für Leute mit minimaler Web-Erfahrung entwickelt. Nur weil es viele McDonalds auf der Welt gibt, heißt das nicht, dass es ein gesunder Ort zum Essen ist.

[Bearbeiten] OK. Das war eine dumme Sache zu sagen. Seit ich das geschrieben habe, habe ich BS3 verwendet und es hat sein Spiel erheblich verbessert. Ich hätte keinen solchen Wegwerfkommentar machen sollen, aber ich glaube immer noch, dass es eine schlechte Entscheidung getroffen hat, Pixel für die Schriftgröße zu verwenden. Neben Barrierefreiheitsproblemen sind ems auch auf andere Weise nützlich.

[Update] Sieht aus wie REMS wird in V4 unterstützt werden (Mdo zitiert von hier ):

Für diejenigen, die mitmachen, können wir in Version 4 von Pixeln zu REMs wechseln, wenn wir die IE8-Unterstützung einstellen. Kann bis dahin nicht viel machen.

[Update 17. Februar] Bootstrap 4 befindet sich noch in Alpha, zeigt jedoch die Verwendung von Rems in seinen Typografie-Dokumenten an , zeigt jedoch nicht die Verwendung von Rems in seinen Layout-Dokumenten .


4
Das Problem ist, dass anscheinend niemand hier ist, der erklärt, warum es "barrierefreier" ist, EM mehr als PX zu verwenden. Ich meine ok, auf dem Papier scheint es offensichtlich, aber im wirklichen Leben? Hat jemand ECHTE Beispiele von Benutzern, die auf pixelbasierten Websites stecken? Mit echten Statistiken und echten Problemen, die Pixel verursachen? Dies ist meiner Meinung nach die eigentliche Frage in dieser Debatte. Der Mangel an Beweisen ist, warum die meisten Leute PX verwenden.
Adriendenat

7
Schriftarten auf Betriebssystem- und Browserebene werden von Personen mit Sehproblemen erhöht. emist für solche Personen erforderlich, daher "Zugänglichkeit".
Steven Vachon

1
Hier gibt es eine Diskussion, die erklärt, warum das Erhöhen der Schriftgröße besser ist als das Zoomen. Webaim.org/discussion/mail_thread?thread=5849 "Ich habe letztes Jahr mit jemandem auf der CSUN gesprochen, der darauf hingewiesen hat, dass das Vergrößern der gesamten Seite nicht allzu hilfreich ist für ihn. Er hat eine sehr schlechte Sicht und muss den Text auf einer Seite ziemlich stark vergrößern, um ihn lesen zu können. Wenn Sie jedoch den Seitenzoom verwenden, müssen Sie am Ende nach links und rechts scrollen, um ihn zu lesen Text lesen und das wird sehr schnell alt. Es ist sehr leicht, seinen Platz zu verlieren, wenn Sie das tun müssen. "
Tony

4
Em-basierte Größen sind auch ein wesentlicher Bestandteil der mobilen Entwicklung. Gerätehersteller investieren Geld und Zeit in die Ermittlung der optimalen Grundschriftgröße für die Lesbarkeit ihres Geräts. Wir machen all diese Nachforschungen ungültig, wenn wir "Schriftgröße: 14px" sagen. Was bedeutet das für UltraAwesomeRetina3.0? Oder auf einem 52-Zoll-Bildschirm mit niedrigeren Pixeln pro Zoll? Die Übergabe der Basisschriftgröße an den Hersteller ist schlicht und einfach eine bewährte
Methode

3
Da ich ein (nennen wir es einfach) EM-Fanatiker bin, finde ich es toll, dass Sie diese Antwort ständig aktualisiert haben… und noch mehr, dass Sie auf Alternativen hingewiesen haben. +1 ;)
E-Sushi

11

Lassen Sie nicht zu, dass die Popularität von Bootstrap Ihr ​​Urteilsvermögen trübt. Jeder kann mit Bootstrap etwas bauen, was genau sein Problem ist - es wurde für Leute mit minimaler Web-Erfahrung entwickelt. Nur weil es viele McDonalds auf der Welt gibt, heißt das nicht, dass es ein gesunder Ort zum Essen ist.

Sie könnten argumentieren, dass es Ihr Urteilsvermögen nicht negativ trübt. Es ist ein solider Rahmen, und wenn Sie sich die Mühe machen, die Zeit in die effektive Nutzung zu investieren, fällt der Großteil Ihrer Argumentation auf den Kopf.

Während es oft von Leuten mit minimaler Erfahrung verwendet wird - und daran ist nichts auszusetzen -, wird es auch von Leuten mit viel Erfahrung verwendet.

Zumindest ist es ein unschätzbares Prototyping-Tool. Im besten Fall ist es vollständig anpassbar. Sie können auswählen, ändern, hinzufügen - weshalb es als "Framework" bezeichnet wird.

Ich benutze es seit über zwei Jahren effektiv bei einigen meiner Projekte - es ist so schlank, wie Sie es möchten. Ich habe nur das Formular-Framework, nur die Raster, die gesamte Codebasis verwendet und es an meine Bedürfnisse angepasst. In vielerlei Hinsicht hat es mein Spiel verbessert, mich weiter in die Vorverarbeitung gebracht, Variablen verwendet und die Art und Weise, wie ich Projekte strukturiere, verbessert.

Ja, es gibt einige Probleme. pxFür Schriftgrößen und weniger sind zwei. Da es sich jedoch vollständig um Open Source handelt, können Sie Optionen finden, um beide Probleme leicht zu beheben.

Ich habe Foundation untersucht und mochte, was ich sah, aber ich bin in der unglücklichen Lage, IE8 unterstützen zu müssen, so wie es viele Entwickler sind. Foundation hat die Unterstützung für IE8 eingestellt, was es für mich zu einem "No Go" macht. Trotzdem, ich bin über nicht einen ganzen Rahmen zu entlassen, die meisten speziell etwas , das ist kostenlos zu nutzen und frei zu modifizieren ausschließlich auf ein paar Fragen basiert!

Heck, in einem Projekt habe ich Teile von Foundation und Teile von Bootstrap aufgehoben und meinen eigenen benutzerdefinierten Code hinzugefügt - das ist das Schöne an Open Source.


6
Das ist absolut fair genug und um ehrlich zu sein, mit Bootstrap 3 denke ich, dass es sein Spiel wirklich verbessert hat. Rückblickend war es etwas albern zu sagen, aber es wurde aus Frustration geboren und ich denke immer noch, dass die meisten Websites, die Bootstrap verwenden, es sehr träge verwenden. Es ist ein großartiges Tool für das Prototyping und für nicht öffentlich zugängliche Seiten - Verwaltungsbereiche usw. Es kann auch ein großartiges Tool für öffentlich zugängliche Websites sein, wenn die Person, die es verwendet, versteht, wie man über die Standardeinstellungen hinaus gestaltet. Wie jedes Werkzeug wird es leicht missbraucht, und ich nehme an, dass die Benutzerfreundlichkeit zu der Menge an (ab) Verwendung führt.
Undistraction

2
Ja, ich höre dich - manchmal bist du nur so wütend auf das Codieren, dass du dich auspeitschst :) Zumindest mit Bootstrap 3.0 gibt es bei Missbrauch einige Standards. Gleiches gilt für die Stiftung. Von beiden kann man viel lernen. In Anbetracht der Zeit ist „Rolling Your Own“ der Weg nach vorne.
Matthew Trow

2
Eine Antwort zu posten, um eine andere Antwort zu kommentieren, ist etwas verwirrend… (nur zu sagen)
E-Sushi

Schön zu sehen, dass ein gewisses Gleichgewicht hergestellt wird :) Bootstrap funktioniert gut für viele erfahrene und neue Leute.
Aaria Carter-Weir

Dies beantwortet die Frage nicht.
Greg Schmit

6

Wenn Sie Bootstrap mit em- und rem-Unterstützung weiterhin bevorzugen, können Sie dies unter https://github.com/ivayloc/twbs-rem-em überprüfen. Es ist keine Berechnung erforderlich, um Pixel in rem- oder em-Einheiten zu konvertieren. Es gibt einen eingebauten @mixins- @include rem(property, values)- auch Fallback zu px und für die em-Konvertierung, die Sie verwenden können em(value).


Ich verwende TBS nicht mehr, da ich festgestellt habe, dass Foundation viel besser durchdacht ist. Dies scheint jedoch ein guter Kompromiss zu sein.
Undistraction

1

Während ich Bootstrap ausgiebig benutze, gibt es einige Bereiche, in denen die Barrierefreiheit in den Hintergrund tritt. Ich denke, es gibt unvermeidliche Kompromisse mit einer Plattform, die so häufig genutzt wird.

Ich verstehe vollkommen, warum sie sich dafür entschieden haben, Pixel für die Schriftgröße beizubehalten. Die Vererbungsprobleme mit Ems für die Schriftarten eines Frameworks sind ein totaler Albtraum.

Rems sind eine alternative Option, aber die Browserunterstützung ist immer noch problematisch.

Sie können Ihr eigenes Rems-Mixin erstellen und jede Zeile mit weniger ersetzen, die die Basisvariable für die Schriftgröße verwendet.

Das ist das Schöne an Bootstrap - und Frameworks wie diesem - es ist eine solide Basis, auf der man arbeiten kann.

Ja, ich habe erwähnt, dass es beim Twitter-Bootstrap Elemente gibt, auf die nicht so zugegriffen werden kann - ein kleines Beispiel, die Verwendung von 'display: none' anstelle von clip. Ich bin mir ziemlich sicher, dass es dafür einen gültigen Grund gibt - und auch hier können Sie dies sehr einfach ändern, wenn Sie möchten.

Bootstrap ist nicht fehlerfrei, aber ich bezweifle, dass es jemals die endgültige Antwort auf alle Ihre Anforderungen sein sollte. Es ist eine Basis - ein 'Bootstrap' - lernen Sie es und nutzen Sie es richtig, fügen Sie es hinzu, mischen Sie alles durch - zumindest ist es ein großartiges Framework, mit dem Sie Prototypen erstellen oder eine schnelle Site zusammenstellen können. Darüber hinaus gibt es einige wirklich solide Grundlagen, die auf jede Website angewendet werden können.


1
Ich denke, eine der Ironien von Bootstrap ist, dass es so viel mehr kann, als Ihre Anwendung zu "booten". Es ist auf so vielen Ebenen vorgeschrieben, von denen nicht zuletzt das Layout ist. Abgesehen von der Faulheit ist der Grund, warum so viele Websites so offensichtlich auf Bootstraps basieren, dass es nicht so einfach ist, sich von den Standardeinstellungen zu lösen. Ja, es gibt eine Handvoll Variablen, um Aspekte anzupassen, aber die abscheulichen Spezifitätsprobleme machen das Überschreiben anderer Aspekte zu massiven Kopfschmerzen. Vielleicht ist Bootstrap 3 besser. Persönlich mag ich Foundation 4. Ich habe das Gefühl, dass ich eher verantwortlich bin als der Rahmen.
Undistraction

0

Ich denke, es liegt am ersten Desktop-Ansatz. Twitter Bootstrap ist ein reaktionsschneller, aber "anmutiger Degradations" -Ansatz.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.