Почему Twitter Bootstrap использует пиксели для размера шрифта?


Ответы:


129

Что ж, похоже, они прячутся за предлогом увеличения масштаба браузера . Действительно грустно видеть, что такая широко используемая и влиятельная структура полностью игнорирует проблемы доступности и является фундаментальным краеугольным камнем адаптивного дизайна. Они несут большую ответственность и, к сожалению, не собираются действовать соответственно.

[Обновление] Итак, сегодня Марк Отто ответил на тему, на которую я ссылался выше. Как и ожидалось, здесь нет упоминания о доступности и использования фразы «безупречный пиксель»:

Хорошо, вот небольшая предыстория прошлогодних решений и планов на будущее.

Пиксели обеспечивают абсолютный контроль и согласованный рендеринг во всех браузерах.

Дизайнеры по-прежнему в основном думают и работают в пикселях.

В наши дни браузеры масштабируют целые страницы, поэтому это не проблема с масштабированием типа или чем-то еще.

Вложение em исторически было проблемой и может потребовать дополнительных математических вычислений для вычисленных / предполагаемых значений пикселей.

Смешивать единицы измерения некрасиво, и мое внутреннее ОКР ненавидит это. Использование единиц измерения в строке высоты обычно не рекомендуется, но дает немедленную информацию о вычисленном значении. Мы, вероятно, постараемся избежать этого в будущем. В будущем мы, скорее всего, будем использовать em для определения размера шрифта, возможно, даже rems, но не для чего-либо еще. Это также спорно на размеры шрифта для входов и тому подобное. Просто не так люди создают сайты с идеальным пикселем.

Это немного закончено и, надеюсь, достаточно связно. Я постараюсь писать в блоге об этих изменениях по мере их появления, но я еще не уверен, насколько близко 3.0 и что все это повлечет за собой.

Я бы посоветовал всем, у кого есть сильные чувства по этому поводу, пойти и +1 к этой теме .

[Обновление] В дорожной карте V3, изложенной в блоге о выпуске V2.3, не упоминается о добавлении поддержки ems.

[Обновление] Дополнительная информация о Bootstrap V3, доступная в запросе на перенос, включая следующую информацию от Марка Отто:

Мы исследовали использование единиц rem вместо пикселей, но не обнаружили особой пользы, компенсирующей последствия их использования. IE8 все равно потребуется резервный пиксель, а это много повторяющихся строк кода. Более того, использование повсюду rems вместо пикселей усугубит эту проблему. Смешивать ремы ​​и пиксели сейчас тоже не имеет смысла. Однако мы можем и продолжим оценивать это в будущих выпусках.

Затем совсем недавно (в его комментариях):

Я очень сомневаюсь, что сейчас мы будем поставлять бэмы. Изменение всего, помимо размеров шрифта, - это огромная задача, которая дает мало преимуществ для ее компенсации. Не считая удвоения строк кода для font-sizes, поддержка rems любым другим способом кажется в лучшем случае утомительной. Тем не менее, мы всегда можем вернуться к нему в будущем выпуске. А пока мы придерживаемся пикселей.

Разочаровавшись в большом количестве функций Bootstrap, не в последнюю очередь из-за отсутствия поддержки em, я настоятельно рекомендую взглянуть на Susy, если вам просто нужны сетки, или на Zurb Foundation 4 для всей enchilada. Не позволяйте популярности Bootstrap омрачить ваше мнение. Любой может создать что-то с помощью Bootstrap, и в этом его проблема - он разработан для людей с минимальным опытом работы в сети. То, что в мире много McDonalds, не означает, что это здоровое место, где можно поесть.

[Редактировать] ОК. Это было глупо. С тех пор, как я написал это, я использовал BS3, и это значительно улучшило его игру. Я не должен был делать такой однозначный комментарий, но я все еще считаю, что он принял плохое решение, используя пиксели для изменения размера шрифта. Помимо проблем с доступностью, em полезны и по другим причинам.

[Update] выглядит как бэр будет поддерживаться в V4 (МДО цитировал здесь ):

Для тех, кто следит за этим, мы сможем перейти с пикселей на REM в версии 4, когда мы откажемся от поддержки IE8. До тех пор ничего не могу сделать.

[Обновление, февраль '17] Bootstrap 4 все еще находится в альфа-версии, но показывает использование rems в своей документации по типографии , но не показывает использование rems в документации по макету .


4
Проблема в том, что, похоже, здесь некому объяснить, почему использование EM более "дружественно", чем PX. То есть хорошо, на бумаге это кажется очевидным, а в реальной жизни? Есть ли у кого-нибудь НАСТОЯЩИЕ примеры того, как пользователи застревают на пиксельных сайтах? С реальной статистикой и реальными проблемами, которые вызывают пиксели? Я думаю, это главный вопрос в этой дискуссии. Отсутствие доказательств - вот почему большинство людей используют PX.
adriendenat 01

7
Шрифты на уровне операционной системы и браузера увеличиваются у людей с проблемами зрения. emдля таких людей требуется, следовательно, «доступность».
Стивен Вашон

1
Здесь обсуждается, почему увеличение размера шрифта лучше, чем увеличение, webaim.org/discussion/mail_thread?thread=5849 "Я разговаривал с кем-то в CSUN в прошлом году, который указал, что увеличение всей страницы не так уж и полезно. к нему. У него очень слабое зрение, и ему нужно значительно увеличить размер текста на странице, чтобы его прочитать. Однако, когда вы используете масштабирование страницы, вам приходится прокручивать влево и вправо, чтобы читайте текст, и он очень быстро устаревает. Очень легко потерять свое место, когда вам нужно это сделать ».
Тони

4
Размеры на основе Em также являются неотъемлемой частью мобильной разработки. Производители устройств тратят деньги и время на определение оптимального базового размера шрифта для удобства чтения на своем устройстве. Мы аннулируем все эти исследования, когда говорим «font-size: 14px». Что это означает на UltraAwesomeRetina3.0? ? Или на экране 52" с более низкими пикселями на дюйм Покидая базовый размер шрифта до производителя является лучшей практикой, просто и ясно. Filamentgroup.com/lab/... blog.cloudfour.com/...
Джей Dansand

3
Поскольку я (назовем это просто) фанатик EM, мне нравится, что вы постоянно обновляете этот ответ… и даже больше, что вы указали на альтернативы. +1 ;)
e-sushi

11

Не позволяйте популярности Bootstrap омрачить ваше мнение. Любой может создать что-то с помощью Bootstrap, и в этом его проблема - он разработан для людей с минимальным опытом работы в сети. То, что в мире много McDonalds, не означает, что это здоровое место, где можно поесть.

Вы можете возразить, чтобы это не омрачило ваше суждение. Это прочная основа, и если вы потрудитесь потратить время на то, чтобы использовать ее эффективно, большая часть ваших аргументов падает на нее.

Хотя его часто используют люди с минимальным опытом - и в этом нет ничего плохого - он также используется людьми с большим опытом.

По крайней мере, это бесценный инструмент для создания прототипов. В лучшем случае его можно полностью настроить. Вы можете выбирать, изменять и добавлять - вот почему это называется «фреймворком».

Я эффективно использую его в некоторых своих проектах более двух лет - он настолько прост, насколько вы хотите. Я использовал только структуру форм, только сетки, всю кодовую базу и настроил ее в соответствии со своими потребностями. Во многих отношениях это «улучшило» мою игру, продвинуло меня дальше в препроцессинге, использовании переменных, оттачивая способ структурирования проектов.

Да, есть некоторые проблемы. pxдля размеров шрифта и использования Less - два. Однако, поскольку это полностью открытый исходный код, вы можете легко найти варианты, чтобы исправить оба этих недостатка.

Я исследовал Foundation, и мне понравилось то, что я увидел, но я нахожусь в неудачном положении, поскольку мне приходится поддерживать IE8, как и многие разработчики. Foundation отказалась от поддержки IE8, что сделало его бесполезным. Несмотря на это, я не о том, чтобы закрыть всю структуру, наиболее конкретно то , что это бесплатно использовать и бесплатно , чтобы модифицируют исключительно на основе нескольких вопросов!

Черт возьми, в одном проекте я поднял части Foundation и части Bootstrap и добавил свой собственный код - в этом прелесть открытого исходного кода.


6
Это совершенно справедливо, и, честно говоря, я думаю, что с Bootstrap 3 он действительно улучшил свою игру. Оглядываясь назад, это было немного глупо, но это было порождено разочарованием, и я все еще думаю, что большинство сайтов, которые используют Bootstrap, используют его очень лениво. Это отличный инструмент для создания прототипов и для непубличных страниц - административных областей и т. Д. Он также может быть отличным инструментом для общедоступных сайтов, если человек, использующий его, понимает, как стилизовать за пределами установленных по умолчанию. Как и любым другим инструментом, им легко злоупотреблять, и я полагаю, что простота использования - это то, что приводит к количеству использования (ab).
Undistraction

2
Да, я вас слышал - иногда вы просто так злитесь на кодирование, вы набрасываетесь :) По крайней мере, с bootstrap 3.0, когда злоупотребляют, есть некоторые стандарты. То же самое и с Foundation. Из обоих можно многому научиться. В конечном итоге, учитывая время, путь вперед - это «кататься самостоятельно».
Мэтью Троу

2
Публикация ответа на комментарий к другому ответу несколько сбивает с толку… (просто говорю)
e-sushi

Приятно видеть, что в этом есть баланс :) Bootstrap хорошо работает для многих людей, как опытных, так и новичков.
Аария Картер-Вейр

Это не отвечает на вопрос.
Грег Шмит

6

Если вы по-прежнему предпочитаете Bootstrap с поддержкой em и rem, вы можете взглянуть на это - https://github.com/ivayloc/twbs-rem-em нет необходимости производить какие-либо вычисления для преобразования пикселей в единицы rem или em, есть построить в @mixinsтечение этого - @include rem(property, values)- также запасной вариант для рх и эм Convertion вы можете использовать em(value).


Я больше не использую TBS, поскольку считаю, что Foundation гораздо лучше продуман, но это похоже на хороший компромисс.
Undistraction 08

1

Хотя я широко использую Bootstrap, есть несколько областей, где доступность уходит на второй план. Я предполагаю, что с платформой, которая так широко используется, неизбежны компромиссы.

Я полностью понимаю, почему они решили сохранить пиксели для размера шрифта. Проблемы с наследованием em для шрифтов фреймворка - настоящий кошмар.

rems - альтернативный вариант, но поддержка браузером по-прежнему проблематична.

Вы можете создать свой собственный миксин rems и заменить каждую строку less, в которой используется переменная базового размера шрифта.

В этом прелесть бутстрапа - и подобных ему фреймворков - это прочная основа для работы.

Да, я упомянул, что есть элементы для начальной загрузки twitter, которые не так доступны - один небольшой пример, использование display: none вместо использования clip. Я чертовски уверен, что для этого есть веская причина - и опять же, вы можете легко изменить это, если хотите.

Bootstrap не безупречный, но я сомневаюсь, что он когда-либо был задуман как окончательный ответ на все ваши требования. Это основа - «бутстрап» - изучите ее и используйте ее должным образом, добавьте к ней, смешайте все это - по крайней мере, это отличный фреймворк для прототипирования или быстрого создания сайта. Если пойти дальше, есть действительно прочная основа, которую можно применить к любому веб-сайту.


1
Я думаю, что один из парадоксов Bootstrap заключается в том, что он делает гораздо больше, чем просто «загружает» ваше приложение. Это предписывает очень много уровней, не последним из которых является макет. Помимо лени, причина, по которой так много сайтов так очевидно основаны на начальной загрузке, заключается в том, что не так-то просто отказаться от настроек по умолчанию. Да, есть несколько переменных для настройки аспектов, но ужасающие проблемы специфичности делают переопределение других аспектов огромной головной болью. Может быть, Bootstrap 3 будет лучше. Лично мне нравится Foundation 4. Это заставляет меня чувствовать, что это я, а не фреймворк.
Undistraction

0

Я думаю, это из-за подхода к настольному ПК. Twitter Bootstrap - это отзывчивый, дружелюбный, но подход «изящной деградации».

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.