Dlaczego Twitter Bootstrap używa pikseli do określania rozmiaru czcionki?


Odpowiedzi:


129

Wygląda na to, że chowają się za wymówką powiększania przeglądarki . Naprawdę smutne, że tak intensywnie używana i wpływowa struktura całkowicie ignoruje problemy z dostępnością i fundamentalną podstawą projektowania responsywnego. Na nich spoczywa wielka odpowiedzialność i niestety wydaje się, że nie mają zamiaru działać zgodnie z tym.

[Aktualizacja] Więc dzisiaj Mark Otto odpowiedział w wątku, o którym wspomniałem powyżej. Jak można się było spodziewać, nie ma wzmianki o dostępności i używaniu wyrażenia „perfekcyjny w pikselach”:

Okay, więc oto trochę informacji o decyzjach z przeszłości i planach na przyszłość.

Piksele zapewniają absolutną kontrolę i spójne renderowanie w każdej przeglądarce.

Projektanci nadal w większości myślą i działają w pikselach.

Obecnie przeglądarki skalują w górę całe strony, więc nie jest to problem ze skalowaniem typów ani czymkolwiek.

Zagnieżdżanie ems było w przeszłości uciążliwe i może wymagać dodatkowej matematyki dla obliczonych / zamierzonych wartości pikseli.

Mieszanie jednostek miary jest brzydkie, a mój wewnętrzny OCD tego nienawidzi. Używanie jednostek na wysokości linii jest generalnie odradzane, ale zapewnia natychmiastową wiedzę o tym, jaka jest obliczona wartość. Prawdopodobnie spróbujemy od tego odejść w przyszłości. W przyszłości prawdopodobnie użyjemy em do określania rozmiaru typu, być może nawet remów, ale nie do niczego innego. Jest to również dyskusyjne w zakresie rozmiarów czcionek dla danych wejściowych i tym podobnych. Po prostu nie chodzi o to, jak ludzie tworzą witryny doskonałe pod względem pikseli.

To trochę skończone i mam nadzieję, że wystarczająco spójne. Spróbuję napisać na blogu o tych zmianach w miarę ich pojawiania się, ale nie jestem pewien, jak blisko jest 3.0 i co to wszystko będzie wiązało się z tym.

Sugerowałbym każdemu, kto ma silne przeczucia co do tego, aby dał +1 temu wątkowi .

[Aktualizacja] Mapa drogowa V3 przedstawiona w poście na blogu o wydaniu V2.3 nie wspomina o dodaniu obsługi ems.

[Aktualizacja] Wiele więcej informacji na temat Bootstrap V3 dostępnych jest w żądaniu ściągnięcia tutaj, w tym następujące od Marka Otto:

Zbadaliśmy użycie jednostek rem zamiast pikseli, ale okazało się, że niewiele korzyści zrównoważy konsekwencje ich użycia. IE8 nadal wymagałby rezerwowego piksela, a to dużo zduplikowanych linii kodu. Co więcej, używanie remów wszędzie zamiast pikseli pogorszyłoby ten problem. Mieszanie remów i pikseli również nie ma teraz sensu. Jednak możemy i będziemy nadal oceniać to w przyszłych wersjach.

Potem ostatnio (w swoich komentarzach):

Wątpię, czy w tym momencie będziemy wysyłać remy. Zmiana wszystkiego - poza rozmiarami czcionek - jest ogromnym zadaniem i ma niewiele korzyści, aby to zrównoważyć. Podwojenie linii kodu dla rozmiarów czcionek na bok, obsługa remów w jakikolwiek inny sposób wydaje się w najlepszym razie uciążliwa. To powiedziawszy, zawsze możemy wrócić do przyszłej wersji. Na razie trzymamy się pikseli.

Będąc niezadowolonym z dużej liczby funkcji Bootstrapa, z których nie mniej ważnym jest brak wsparcia em, zdecydowanie sugeruję przyjrzenie się Susy, jeśli chcesz tylko siatki, lub Zurb Foundation 4 dla całej enchilady. Nie pozwól, aby popularność Bootstrap przesłaniała Ci ocenę. Każdy może zbudować coś za pomocą Bootstrap, co jest właśnie jego problemem - jest przeznaczony dla osób z minimalnym doświadczeniem w Internecie. To, że na świecie jest dużo McDonalda, nie oznacza, że ​​jest to zdrowe miejsce do jedzenia.

[Edytuj] OK. To była głupia rzecz do powiedzenia. Odkąd to napisałem, korzystałem z BS3 i znacznie poprawiło to jego jakość. Nie powinienem był robić tak wyrzuconego komentarza, ale nadal uważam, że podjął złą decyzję dotyczącą wykorzystania pikseli do zmiany rozmiaru czcionki. Oprócz problemów z dostępnością ems są przydatne na inne sposoby.

[Aktualizacja] wygląda REMS będą wspierane w V4 (MDO cytat z tutaj ):

Dla tych, którzy podążą dalej, będziemy mogli zmienić piksele na REM w wersji 4, gdy porzucimy obsługę IE8. Do tego czasu niewiele mogę zrobić.

[Aktualizacja, luty '17] Bootstrap 4 jest nadal w wersji alfa, ale pokazuje użycie remów w swoich dokumentach Typography , ale nie pokazuje użycia remów w swoich dokumentach układu .


4
Problem polega na tym, że wygląda na to, że nie ma tu nikogo, kto mógłby wyjaśnić, dlaczego bardziej „przyjazne dla dostępności” jest używanie EM niż PX. To znaczy ok, na papierze wydaje się to oczywiste, ale w prawdziwym życiu? Czy ktoś ma PRAWDZIWE przykłady użytkowników, którzy utknęli na stronach opartych na pikselach? Z prawdziwymi statystykami i prawdziwymi problemami, które powodują piksele? Myślę, że to jest prawdziwe pytanie w tej debacie. Brak dowodu jest powodem, dla którego większość ludzi używa PX.
adriendenat

7
Czcionki na poziomie systemu operacyjnego i przeglądarki są zwiększane przez osoby z problemami ze wzrokiem. emjest wymagana dla takich osób, stąd „dostępność”.
Steven Vachon

1
Jest tutaj dyskusja wyjaśniająca, dlaczego zwiększanie rozmiaru czcionki jest lepsze niż powiększanie, webaim.org/discussion/mail_thread?thread=5849 „Rozmawiałem z kimś w CSUN w zeszłym roku, który wskazał, że powiększanie całej strony nie jest aż tak pomocne ma bardzo słaby wzrok i musi znacznie zwiększyć rozmiar tekstu na stronie, aby ją przeczytać. Jednak gdy używasz powiększenia strony, w końcu musisz przewijać w lewo i w prawo, aby czytać tekst, a to szybko się starzeje. Bardzo łatwo jest stracić miejsce, gdy trzeba to zrobić ”.
Tony

4
Rozmiary oparte na em są również integralną częścią tworzenia aplikacji mobilnych. Producenci urządzeń poświęcają pieniądze i czas na określenie optymalnego podstawowego rozmiaru czcionki dla czytelności na ich urządzeniu. Unieważniamy wszystkie te badania, mówiąc „rozmiar czcionki: 14 pikseli”. Co to oznacza w UltraAwesomeRetina3.0? Lub na 52-calowym ekranie z mniejszą liczbą pikseli na cal? Pozostawienie podstawowego rozmiaru czcionki producentowi jest najlepszą praktyką, prostą i prostą praktyką. Filamentgroup.com/lab/ ... blog.cloudfour.com/…
Jay Dansand

3
Ponieważ jestem (nazwijmy to) fanatykiem EM, podoba mi się fakt, że ciągle aktualizowałeś tę odpowiedź… a nawet bardziej, że wskazałeś na alternatywy. +1 ;)
e-sushi

11

Nie pozwól, aby popularność Bootstrap przesłaniała Ci ocenę. Każdy może zbudować coś za pomocą Bootstrap, co jest właśnie jego problemem - jest przeznaczony dla osób z minimalnym doświadczeniem w Internecie. To, że na świecie jest dużo McDonalda, nie oznacza, że ​​jest to zdrowe miejsce do jedzenia.

Możesz argumentować, że nie pozwolisz, by negatywnie wpłynęło to na twój osąd. To solidne ramy i jeśli zadasz sobie trud zainwestowania czasu w efektywne wykorzystanie go, większość argumentów spada na głowę.

Chociaż jest często używany przez osoby z minimalnym doświadczeniem - i nie ma w tym nic złego - jest również używany przez osoby z dużym doświadczeniem.

Przynajmniej jest to nieocenione narzędzie do prototypowania. W najlepszym przypadku jest w pełni konfigurowalny. Możesz wybierać i wybierać, modyfikować, dodawać do - dlatego nazywa się to „ramą”.

Używam go skutecznie w niektórych moich projektach od ponad dwóch lat - jest tak oszczędny, jak chcesz. Użyłem tylko struktury formularza, tylko siatek, całej bazy kodu i dostosowałem ją do swoich potrzeb. Pod wieloma względami „poprawiło” to moją grę, prowadząc mnie dalej do przetwarzania wstępnego, używania zmiennych, doskonalenia struktury projektów.

Tak, są pewne problemy. pxdla rozmiarów czcionek i używania Less to dwa. Jednak ponieważ jest to całkowicie otwarte oprogramowanie, możesz łatwo znaleźć opcje, aby zaradzić obu tym problemom.

Zbadałem Fundację i spodobało mi się to, co zobaczyłem, ale jestem w niefortunnej sytuacji, że muszę wspierać IE8, tak jak wielu programistów. Fundacja zrezygnowała ze wsparcia dla IE8, co sprawia, że ​​jest to dla mnie „nie idź”. Mimo to nie zamierzam odrzucać całego frameworka, a zwłaszcza czegoś, co jest darmowe i można je dowolnie modyfikować wyłącznie na podstawie kilku problemów!

Do licha, w jednym projekcie podniosłem części Foundation i części Bootstrap i dodałem własny, niestandardowy kod - na tym polega piękno open source.


6
To całkiem sprawiedliwe i szczerze mówiąc, dzięki Bootstrap 3 myślę, że naprawdę przyspieszył swoją grę. Z perspektywy czasu było to trochę głupie, ale zrodziło się to z frustracji i nadal uważam, że większość witryn, które używają Bootstrap, używa go bardzo leniwie. Jest to świetne narzędzie do tworzenia prototypów i stron niepublicznych - obszarów administracyjnych itp. Może być również doskonałym narzędziem dla witryn publicznych, jeśli osoba z niego korzystająca wie, jak stylizować poza domyślne. Jak każde narzędzie jest łatwo nadużywane i przypuszczam, że łatwość użycia jest tym, co skutkuje ilością (nad) użycia.
Undistraction

2
Tak, słyszę - czasami jesteś po prostu tak wściekły na kodowanie, że rzucasz się :) Przynajmniej z bootstrapem 3.0, kiedy jest nadużywany, są pewne standardy. To samo dotyczy Fundacji. Z obu można się wiele nauczyć. Ostatecznie, biorąc pod uwagę czas, „kręcenie własnym” jest drogą naprzód.
Matthew Trow

2
Publikowanie odpowiedzi w celu skomentowania innej odpowiedzi jest nieco zagmatwane… (tylko mówienie)
e-sushi

Miło widzieć, że wprowadzono do tego równowagę :) Bootstrap działa dobrze dla wielu ludzi, zarówno doświadczonych, jak i początkujących.
Aaria Carter-Weir

To nie odpowiada na pytanie.
Greg Schmit

6

Jeśli nadal wolisz Bootstrap z obsługą em i rem, możesz rzucić okiem na to - https://github.com/ivayloc/twbs-rem-em nie ma potrzeby wykonywania żadnych obliczeń, aby przekonwertować piksele na jednostki rem lub em, jest @mixinsdo tego @include rem(property, values)wbudowany - - również powrót do px i do konwersji em można użyć em(value).


Nie używam już TBS, ponieważ uznałam, że Foundation jest znacznie lepiej przemyślana, jednak wygląda to na dobry kompromis.
Undistraction,

1

Chociaż intensywnie korzystam z Bootstrap, jest kilka obszarów, w których dostępność jest na drugim planie. Myślę, że są nieuniknione kompromisy z platformą, która jest tak szeroko używana.

Całkowicie rozumiem, dlaczego zdecydowali się zachować piksele dla rozmiaru czcionki. Problemy z dziedziczeniem z em dla czcionek frameworka są totalnym koszmarem.

rems są alternatywną opcją, ale obsługa przeglądarek nadal jest problematyczna.

Możesz stworzyć własną mieszankę remów i zastąpić każdą linię less, która używa podstawowej zmiennej rozmiaru czcionki.

Na tym polega piękno bootstrap - i podobnych frameworków - to solidna podstawa do pracy.

Tak, wspomniałem, że w bootstrapie na Twitterze są elementy, które nie są zbyt dostępne - jeden mały przykład, użycie „display: none” zamiast używania klipu. Jestem prawie pewien, że istnieje ku temu ważny powód - i znowu, możesz bardzo łatwo to zmodyfikować, jeśli chcesz.

Bootstrap nie jest bezbłędny, ale wątpię, czy kiedykolwiek miał być ostateczną odpowiedzią na wszystkie Twoje wymagania. To podstawa - „bootstrap” - naucz się go i wykorzystaj właściwie, dodaj do tego, pomieszaj wszystko - co najmniej jest to niesamowity framework do prototypowania lub tworzenia szybkiej witryny. Idąc dalej, jest kilka naprawdę solidnych podstaw, które można zastosować w dowolnej witrynie.


1
Myślę, że jedną z ironii Bootstrap jest to, że robi o wiele więcej niż „bootstrap” aplikacji. Jest nakazowy na wielu poziomach, z których najważniejszym jest układ. Oprócz lenistwa, powodem, dla którego tak wiele witryn jest w oczywisty sposób opartych na bootstrapie, jest to, że nie jest łatwo oderwać się od ustawień domyślnych. Tak, istnieje kilka zmiennych umożliwiających dostosowanie aspektów, ale ohydne problemy ze specyfiką sprawiają, że zastępowanie innych aspektów jest ogromnym bólem głowy. Może Bootstrap 3 będzie lepszy. Osobiście podoba mi się Foundation 4. To sprawia, że ​​czuję, że to ja rządzę, a nie ramy.
Undistraction

0

Myślę, że to z powodu pierwszego podejścia do komputerów stacjonarnych. Twitter Bootstrap jest responsywnym przyjaznym, ale podejściem „wdzięcznej degradacji”.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.