search

web-standards-ru / web-standards.ru

https://web-standards.ru
153 stars 92 forks source link

Единицы измерения #13

Closed ivanov-v closed 3 months ago

ivanov-v commented 4 years ago

На сайте используются px, а не rem или em. Это осознанный выбор? Если да, то почему?

pepelsbey commented 4 years ago

Это выбор по умолчанию — такие единицы предлагают графредакторы. Чтобы использовать ремы, нужно добавить какую-то систему, то есть принять решение и усложнить перенос дизайна в вёрстку. То есть нужны:

  1. Аргументы, чтобы перейти на ремы, которые оправдывают усложнение
  2. Система использования, которая позволяет удобно переносить из макета

Думаю, можно здесь обсудить оба пункта.

ivanov-v commented 4 years ago

  1. Если пользователь задал в настройках браузера свой размер базового шрифта, то все блоки использующие rem будут высчитываться именно от него. С пикселями так не прокатит и тут подойдёт только zoom. image

  2. Да, придётся переводить вручную или инструментом

alkorlos commented 4 years ago

@ivanov-v если у пользователя проблемы со зрением он скорее изменит масштаб всех элементов ОС, а не только шрифта в браузере, увеличение размера шрифта в браузере не спасет от мелкого текста в остальной ОС и от мелких элементов управления в ОС. При этом увеличение масштаба всех элементов ОС увеличит и текст в пикселях на сайте.

ivanov-v commented 4 years ago

@ivanov-v если у пользователя проблемы со зрением он скорее изменит масштаб всех элементов ОС, а не только шрифта в браузере, увеличение размера шрифта в браузере не спасет от мелкого текста в остальной ОС и от мелких элементов управления в ОС. При этом увеличение масштаба всех элементов ОС увеличит и текст в пикселях на сайте.

Проверил. Работает как с зумом страницы)

alkorlos commented 4 years ago

@ivanov-v да, масштабирование всех элементов ОС, это и есть зум для всех элементов ОС. Я и написал о том что при проблемах со зрением скорее будет выбран такой вариант. Изменение размера шрифтов в браузере не изменит размер остальных элементов ОС значит человек с плохим зрением не сможет работать ни с чем кроме браузера, поэтому у ремов в этом аспекте нет преимущества перед пикселями.

ivanov-v commented 4 years ago

@ivanov-v да, масштабирование всех элементов ОС, это и есть зум для всех элементов ОС. Я и написал о том что при проблемах со зрением скорее будет выбран такой вариант. Изменение размера шрифтов в браузере не изменит размер остальных элементов ОС значит человек с плохим зрением не сможет работать ни с чем кроме браузера, поэтому у ремов в этом аспекте нет преимущества перед пикселями.

Интересная выдержка

Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт. Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl++, но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?

alkorlos commented 4 years ago

Интересная выдержка с сайта на котором размер текста не меняется от изменения размера шрифта в браузере, ну да ладно. Я не часто проверяю как ведут себя сайты при изменении размера шрифта браузера, но не встречал ни одного на котором увеличивается только шрифт. Например на википедии относительные единицы измерения, но при изменении размера шрифта в браузере увеличиваются/уменьшаются все элементы, как и при зуме. Топ крупнейших сайтов (Alexa) использует фиксированные единицы измерения для шрифта. Реализации того что описано в этой выдержке я не видел и я не представляю ситуации в которой есть необходимость увеличить только шрифт на конкретном сайте.

MeFoDy commented 4 years ago

Полный переезд можно автоматизировать. Достаточно взять за размер шрифта HTML 10px, тогда 1rem легко конвертируется в пиксели и обратно. Так сможем пофиксить сначала проблемы с доступностью.

Прогнать через самописный postCSS-плагин и перевести всё в rem не очень сложно. Не удивлюсь, если автоматические решения уже существуют, но не искал.

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

alkorlos commented 4 years ago

@MeFoDy В случае с rem не придется перестраивать дизайн систему? Если увеличивать только текст интерфейс может начать разваливаться. В меню и подвале точно проблемы будут.

pepelsbey commented 4 years ago

Емы — точно мимо, они хорошо работают только локально.

Вводить ли ремы, повторюсь, вопрос пользы. Если масштабирование в браузере или в ОС решает вопрос, то я бы остался на пикселях, это нативно макетам и мышлению.

Если будут хорошие аргументы, то ремы я бы использовал только на инлайновом уровне, не для отступов и размеров.

pepelsbey commented 4 years ago

Статейка в тему с обзором вариантов

zarabotaet commented 4 years ago

Всегда пользуюсь методом 62.5% Даже до появления переменных этот трюк повзолял делать небольшой зум всех значимых размеров (отступы, типографика, высоты, ширины). https://codepen.io/zarabotaet/pen/NWGyxKG?editors=0100

Да сейчас это можно сделать с помощью переменных, но синтаксис rem более простой и понятный. Я даже еммет настроил на пересчет в рем, думаю и postcss есть что то.

https://github.com/typographist/postcss Это как референс возможной работы с rem для типографики.

developerbottle commented 4 years ago

Услышал про обсуждение в подкасте, решил добавить свои 5 копеек.

Вариант с font-size: 62,5%; на <html> можно просто дополнить с font-size: 1.6rem для body, тогда просто накиданный на страницу текст будет нормального размера.

Если все еще не нравится то что значения в px и rem различаются, то в принципе можно и font-size: 6.25% дать на <html> (и соответственно font-size: 16rem на body), тогда соотношение px:rem будет 1:1.

Правда есть одна вещь на которую стоит обратить внимание. Из-за минимального допускаемого размера шрифта в Chrome у людей были проблемы (ссылка на вопрос со stackoverflow с такой проблемой - https://bit.ly/3cbKzP7). Однако у себя не смог воспроизвести того же, все работает нормально и на rem не влияет минимально допустимый размер шрифта в Chrome). Кажется это уже исправили в новых версиях Chrome. На Safari я не смог протестить (у меня Windows), но вроде у них есть такая же фигня с минимальным размером шрифта, поэтому думаю стоит и на нем проверить. С Firefox и IE все норм. Так что, проблема вроде уже исправленная, но стоит обратить на нее внимание. Может быть не стоит рисковать и лучше ставить 62.5% вместо 6.25%.

Из атоматизированного решения нашел вот этот плагин для PostCSS - https://github.com/cuth/postcss-pxtorem.

pepelsbey commented 4 years ago

@zarabotaet @SHStorm, спасибо! Вероятно 62.5% и будем внедрять при ближайшей перевёрстке.

alkorlos commented 4 years ago

Возможно, использование rem с хорошим дизайном, и разработчикам будет удобнее пикселей. Но пока не понятно какие преимущества дают rem пользователям.

@zarabotaet @SHStorm Вы можете рассказать почему используете rem? Вам дизайнеры делают так макеты или вы знаете какие преимущества это дает вашем пользователям?

В статье по ссылке выше так же не увидел никаких преимуществ rem для пользователей помимо увеличения базового размера шрифта браузера, но преимущество ли это? Что точно понятно и что есть в этой же статье, задавать в rem только размеры шрифта не выйдет, в относительных единицах нужно задавать размеры всего интерфейса, иначе при изменении размера шрифта интерфейс развалится. Но тогда при изменении размера шрифта в браузере результат будет тот же что и при браузерном зуме или зуме в ОС. Получается у пользователя с плохим зрением три варианта действий.

  1. Изменить размер шрифта в браузере, что не сработает для остальной ОС и в большинстве сайтов.
  2. Изменить зум по умолчанию в браузере, что сработает для всех сайтов, но не сработает для остальной ОС.
  3. Использовать зум в ОС. Первый вариант не выглядит оптимальным. Хорошо бы реализовать наилучшее решение, но сначала нужно понять что на самом деле будет лучше всего.
zarabotaet commented 4 years ago

@alkorlos

Причины

  1. Что бы иметь все значимые размеры (я привык от 3px и более) зависимыми от одной глобальной переменной . Это позволит сделать пропорциональный зум всех размеров в нескколько строк (см демку выше). Конечно этот подход имеет право на жизнь с соответствующим дизайном. (На одном из проектов мне удалось достич абслютного консенсуса с дизайнером , и 70% адаптива было сделано в 4 медиа запроса со сменой базового размера, кроме того, потом на продакшене осознали, что элементы на мобилках 320 и ниже слишком мелкие и одним движением все исправили). Итак, я использую ремы в качестве минимального атома размера.

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

developerbottle commented 4 years ago

@alkorlos Для меня в принципе те же причины, что назвал @zarabotaet. Разница лишь в том, что для меня в приоритете стоит то, что какой-то юзер может все-таки увеличивать не зумом, а размером шрифта. При использовании px в этом случае страница просто никак не заскейлится, а при использовании rem вместо px, будет нормальное увеличение интерфейса, похожее на обычный зум. Если бы перевод из px в rem был сложнее, я бы наверное использовал px. Но выше упомянутые варианты позволяют сделать этот перевод очень простым. Минимум усилий за приятный опыт для юзера.

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

alkorlos commented 4 years ago

Спасибо за ответы.

При использовании адаптивности на rem контрольные точки будут пропорционально изменять все размеры на сайте - текст, отступы и т.д. для этого действительно нужен особенный дизайн, обычно все сразу по одной контрольной точке не меняется и пропорции на десктопе и мобильных разные. Но если дизайн именно такой rem действительно лучший выход. Только зависимость от одной глобальной переменной нарушает принцип инкапсуляции заложенный в БЭМ, но тут ничего не поделать.

На данный момент получается что если будет дизайн который меняется по контрольным точкам пропорционально то rem в любом случае лучший выход, если нет нужно понять как часто люди на самом деле меняют размер шрифта в браузере и если это значимый процент подключить postcss плагин к текущим стилям, вроде так.

pepelsbey commented 4 years ago

Окей, а каким таким должен быть дизайн, чтобы в него можно было полезно внедрить ремы?

alkorlos commented 4 years ago

Если я правильно понимаю это должен быть дизайн который пропорционально меняет все размеры по контрольным точкам, других вариантов я не вижу. Иначе придется перееопределять rem на контрольных точках так же как сейчас пикселы.

alkorlos commented 4 years ago

Думаю есть еще один теоретический вариант. Если у дизайнеров появится инструмент в котором они размеры в rem смогут задавать, то, возможно, можно будет использовать rem так же как сейчас пиксели меняя их на контрольных точках и это будет удобнее и дизайнерам и разработчикам. При разработке дизайна будет удобнее за пропорциями разных элементов следить, разработчикам при рефакторинге будет удобно отслеживать что пропорции элементов сохраняются, там где это нужно. Дизайнерские системы же обычно и построены на пропорциях и соотношениях? Но это только теория, я не знаю о существовании программ для создания дизайна которые с rem могут работать, так что это и проверить пока не получиться.

sierikov commented 4 years ago

Вернемся к первоначальной проблеме - px vs rem. Исходя из мнений выше вижу два пути:

  1. Оставляем как есть и переопределяем пиксели в контрольных точках, если нужно
  2. Обновить стили для пропорционального масштабирования всех элементов - тогда rem будут оправданы.

Остается решить какое конкретно поведение мы хотим больше. Лично я за первый вариант.

worst-developer commented 4 years ago

Всегда пользуюсь методом 62.5% Даже до появления переменных этот трюк повзолял делать небольшой зум всех значимых размеров (отступы, типографика, высоты, ширины). codepen.io/zarabotaet/pen/NWGyxKG?editors=0100

Да сейчас это можно сделать с помощью переменных, но синтаксис rem более простой и понятный. Я даже еммет настроил на пересчет в рем, думаю и postcss есть что то.

typographist/postcss Это как референс возможной работы с rem для типографики.

Я не понял что этот метод решает, вернее зачем если rem и так относительная величина

alkorlos commented 4 years ago

В новом дизайне facebook единицы измерения шрифтов на этапе сборки меняются с px на rem. Есть элементы которые при большом размере шрифта по умолчанию в браузере иллюстрируют то о чем я выше писал: "... задавать в rem только размеры шрифта не выйдет, в относительных единицах нужно задавать размеры всего интерфейса, иначе при изменении размера шрифта интерфейс развалится." Например facebook

У facebook таких проблем мало, они отлично поработали, например в меню количество элементов зависит от размера шрифта по умолчанию в браузере. Обычный: facebook2 Большой: facebook2 2 Лишние элементы скрываются с помощью выделенного div, он добавляется при загрузке страницы.

Facebook показал что можно единицы измерения шрифтов на этапе сборки изменить с px на rem, но помимо этого много работы нужно сделать чтоб при изменении размера шрифта в браузере интерфейс продолжал нормально выглядеть, только добавлением плагина который автоматическую замену делает тут не обойтись.