company_banner

Пришло время попрощаться с единицей измерения px

Original author: Nick Gard
  • Translation
Если вы занимаетесь дизайном сайтов или их разработкой — не используйте абсолютные единицы измерения. А именно — px, in, mm, cm, pt и pc. Это, в дизайне, так же плохо в плане доступности и отзывчивости контента, как использование таблиц в сфере создания макетов страниц. Если взглянуть на все абсолютные единицы измерения, то окажется, что лишь px упрямо не желает нас покидать. Коллективный разум веб-дизайнеров (что правильно!) отказался от применения всех остальных подобных единиц измерения в деле стилизации материалов веб-страниц.



Дизайнеры и разработчики способны осознать абсурдность применения физических единиц измерения расстояний для стилизации цифрового контента, а вот пиксели… похоже, они кажутся всем достаточно «цифровыми». Но они таковыми не являются. Изначально единица измерения px была предназначена для представления физических пикселей на экранах устройств, то есть — для описания наименьших фрагментов изображений, которые можно окрасить в некий цвет. Они больше не привязаны к этому определению. Взгляните на этот материал о пикселях, написанный ещё в 2010 году. Современные браузеры могут рендерить элементы, измеряемые в сотых долях пикселя.

Почему использование единицы измерения px плохо сказывается на доступности контента?


Пользователи приходят на сайты ради материалов этих сайтов. Поэтому материалы должны быть пригодными для чтения. А это значит, что размеры шрифта должны быть… как минимум 12px? Или, может, 16px? На самом деле, смотреть надо по ситуации. И зависит это не от самих материалов, а от пользователя. Пользователи могут настраивать свои операционные системы или браузеры, устанавливая предпочитаемый ими размер шрифта, соответствующий их нуждам. Если им это нужно, то, настроив применение шрифта, размер которого крупнее стандартного, они могут спокойно, не приглядываясь, просматривать списки контактов и читать электронные письма. Если сайт создан с использованием размеров шрифтов, выраженных в единицах измерения px, то таким пользователям, для которых эти шрифты слишком мелки, даже если они и настроили удобный для себя размер шрифта, будет неудобно читать материалы сайта. Дело в том, что размеры, выраженные в пикселях, не масштабируются даже в том случае, когда браузер меняет размер шрифта корневого элемента. (Это утверждение, правда, нельзя назвать полностью правильным — Safari игнорирует размеры, выраженные в пикселях, и всё равно масштабирует шрифты.)

Уважайте нужды своих пользователей и выполняемые ими настройки их рабочей среды, настраивая размеры шрифтов с использованием единицы измерения rem. Такие шрифты хорошо масштабируются. Для организации плавного изменения размеров шрифтов (fluid typography) используйте в расчётах единицу измерения rem.

Почему использование px — это плохо для отзывчивого веб-дизайна?


Страница, при создании которой используется подход, известный как «отзывчивый дизайн», должна подстраиваться под устройства, на которых выводят эту страницу, и под содержимое, которое выводят на странице. Если макет зависит от размера экрана, то в современных условиях уже нельзя рассчитывать на то, что экран мобильных устройств имеет 320px в ширину, или что полная ширина экрана настольного компьютера равна 1024px. В нашем распоряжении имеются единицы измерения, связанные с областью просмотра страницы (vh, vw, vmax и vmin), использование которых позволяет настроить правильную подстройку страниц под экраны разных размеров, не зависящую от их физических параметров.

Если макет зависит от содержимого страницы, например, когда вокруг надписи на кнопке нужно предусмотреть некое пустое пространство, то единицы измерения px позволяют достичь приемлемого результата лишь в том случае, когда текст надписи имеет определённый размер. Изменение размеров шрифта приведёт к тому, что, для придания странице нужного вида, придётся перенастраивать внутренние или внешние отступы, или ширину столбцов, или что угодно другое. А если при настройке параметров элемента макета использованы единицы измерения, ориентированные на размер шрифта (em, ch, ex и rem), то изменение свойства font-size приведёт к автоматическому изменению параметров макета. Этими возможностями удобно пользоваться при создании гибких дизайнов, это помогает поддерживать размер свободного пространства вокруг текста на правильном уровне. Это, кроме того, позволяет странице хорошо выглядеть даже тогда, когда пользователь устанавливает гораздо более крупный размер шрифта, чем тот, что изначально использовался на странице.

А как насчёт…


▍изображений?


Не должны ли мы, по совету Джен Симмонс, указывать размеры изображений в пикселях? Да, должны, но в HTML, а не в CSS. При стилизации элементов img или video нужно, для поддержания их в отзывчивом состоянии, использовать относительные единицы измерения и свойство aspect-ratio.

▍размеров шрифтов, заданных с помощью функции clamp()?


Нормально ли выглядит такая конструкция: font-size: clamp(12px, 10vw, 22px)? Нет, не нормально. Тут предпочтения пользователя игнорируются дважды. Во-первых — здесь, для указания размера, применяются единицы измерения vw, которые не масштабируются в соответствии с настройками, задаваемыми пользователем. Во-вторых — что произойдёт, если пользователь задаст размер базового шрифта, превышающий 22px? Эта настройка будет проигнорирована. Вместо этого в каждый аргумент функции clamp() стоит включить единицы измерения, опирающиеся на параметры шрифта: font-size: clamp(0.75rem, 0.5rem + 8vw, 1.375rem).

▍медиазапросов?


Об использовании единиц измерения px, em и rem в медиазапросах писали ещё в 2016 году. Если кратко передать смысл той публикации, то окажется, что для того чтобы страница хорошо выглядела бы в разных браузерах и правильно реагировала бы на изменения, предусматривающие изменение размеров текста, нужно использовать единицу измерения em, а не rem или px.

▍тонких линий и маленьких отступов?


Обычно границы между объектами, оформляемые с помощью линии наименьшей толщины, делают, в ширину, равными 1px. Браузеры, кроме того, выводят элементы, размеры которых выражены в очень маленьких значениях rem, как имеющие размеры 1px. Поэтому можно не беспокоиться о том, что тончайшая граница просто исчезнет в том случае, если при настройке её ширины использовать не 1px, а 0.0625rem. (Экспериментально выяснено, что Firefox округляет любые размеры, начиная с 0.001, или 1⁻³. А Webkit-браузеры в этом плане проявляют гораздо большую щедрость, округляя значения в 0.000000000000000000000000000000000000000000000000000000001rem или 1⁻⁵⁶.) Размеры отступов (вроде padding и margin) не округляются до целых пикселей, они могут быть очень маленькими. Если важно, чтобы размер некоего отступа равнялся бы как минимум 1px, тогда я порекомендовал бы использовать конструкцию вида max(1px, really_small_relative_unit).

Подумаем о продвижении моей идеи


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

  • Абсолютные единицы измерения — это абсолютный хлам! (Absolute units are absolute trash!)
  • Просто скажем нет пикселям! (Just say no to pixels!)
  • Абсолютно никаких абсолютных единиц измерения! (Absolutely no absolute units!)
  • Чем относительнее дизайн — тем лучше! (Design is better relatively!)

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

Как вы относитесь к использованию абсолютных единиц измерения в веб-дизайне?

RUVDS.com
VDS/VPS-хостинг. Скидка 10% по коду HABR

Comments 50

    +13
    Отличная идея, больше стандартов на свалку. Кто перепишет все эти сайты, CMS, и прочие фреймворки, использующие px? Как отобразится сайт, привыкший думать в px, в браузере, их не поддерживающем?
      0
      Pixels Lives Matter (простите, но тут сложно удержаться). А если серьёзно, то плохо только реальный коктейль в CSS, когда абсолютные и относительные значения указываются по разным элементам, да ещё и в media — полный бардак, что куда как будет масштабироваться — не в курсе никто. Проблема не в стандартах, а в их приминении.
        +1
        Зачем ныть? Пусть верстальщики пускают слюни на rem, px никто не отменяет. Фреймы вон до сих пор везде поддерживаются.
        +1
        а для размеров div и больших отступов px не плохо?
          +1

          А не подскажете, есть ли сейчас какой-то надежный способ отобразить картинку с маппингом пикселей в аппаратные 1:1?

            0

            по поводу шрифтов и отступов согласен конечно со статьей

            +18
            Автор не в курсе наверно, что сейчас и пиксели не абсолютны. Но он там пытается футболки продавать?
              0
              сейчас и пиксели не абсолютны
              Автор же описывает случай когда это не так. px игнорирует настройки шрифтов в браузере.
              Если сайт создан с использованием размеров шрифтов, выраженных в единицах измерения px, то таким пользователям, для которых эти шрифты слишком мелки, даже если они и настроили удобный для себя размер шрифта, будет неудобно читать материалы сайта.
              +12
              Извините, далёк от фронта, это так у вас принято писать: 1⁻⁵⁶? По нормам в остальном мире это 10⁻⁵⁶
                0
                Всё просто, 1⁻⁵⁶ = 1, один пиксель ;)
                0
                мы на проекте используем rem как раз. привязали размер шрифта к размеру окна и сайт красиво масштабируется без медиа запросов. в плане удобства оно так же как с пикселями. в целом мне нравится. попробуйте у себя.
                  0

                  Насколько я понял, основная причина использования REM как раз в том, чтобы не фиксировать базовый размер шрифта в пикселях, потому что есть некие мифические пользователи, которые меняют размер шрифта, выставляя его в дебрях настроек браузера прямо в пикселях, а не кнопками зума. У вас, получается, таким пользователям всё равно будет плохо. Потом, если привязка к размеру окна, так это же vh/vw проще использовать. И ещё вопрос, а что если надо подключить сторонние компоненты? Не возникает ли проблем с ними?

                    0
                    Если использовать rem, то можно базовый размер шрифта высчитать исходя из ширины, высоты и dpi, а все остальные уже из него выводить.
                      0
                      У нас есть «синтетический» размер шрифта. на 1440 ширины для десктопа и на 375 для мобилки это 10px. Если ширина уменьшается/увеличивается, то и уменьшается/увеличивается размер этого шрифта. Все размеры на сайте заданы относительного этого шрифта, и уменьшаются пропорционально.

                      По поводу пользователей со своими шрифтами, я честно говоря это не проверял, но думаю шрифт будет переопределён.

                      В плане удобства, то очень приятно верстать, можно делать почти как «в пикселях» не высчитывая vh/vw, просто делить пиксели на 10, но в то же время иметь адаптивный вариант вёрстки.
                        0
                        А как вы с медиа-запросами работаете при такой системе? Если там же используете rem то будет плохо-предсказуемо поведение если пользователь масштабирует окно на десктопе.
                          0
                          У нас есть «синтетический» размер шрифта. на 1440 ширины для десктопа и на 375 для мобилки это 10px. Если ширина уменьшается/увеличивается, то и уменьшается/увеличивается размер этого шрифта.
                          Я правильно понял, что вверх от 375 шрифт увеличивается, а вниз от 1440 уменьшается — и таким образом где-то посередине должен быть резкий скачок?
                          Или имеется в виду в диапазоне от 375 до 1440 он равен константе 10px?
                            0
                            Там два «вида» условно.

                            Базовый размер на 1440 10px и уменьшается при уменьшении размера, до 800 px где переключаемся на мобильный вид и там будет в районе 24px, уменьшаясь до 10px на 375 и дальше если ширина экрана будет сокращаться.
                            нет на 375 и 1440 базовый шрифт равен 10px
                              +2
                              Это странная система. Получается, что планшеты попадают меж двух огней.
                              Например, классический Айпад 768x1024. В вертикальной ориентации я буду видеть раздутую в 2 с лишним раза мобильную верстку (зачем мне планшет, показывающий столько же информации, сколько и телефон?), а в горизонтальной — сильно скукоженную десктопную. В первом случае получается бабушкофон с огромными шрифтами, а ко второму наоборот надо лупу прикладывать.
                        0
                        реализовал такой механизм на 1 небольшом проекте (статистика компании). Получилось очень даже отлично!
                          +1
                          Это шутка? Страшно представить, как выглядит этот текст на смартфонах.
                          +16
                          Автор живет в волшебном мире, где у всех HDPI-мониторы и свойство aspect-ratio поддерживается не только в свежем Chrome… И при этом, не знает, что px в браузере давно жестко не привязан к физическому пикселю. Ох.
                            +2

                            Ну а как без волшебности мира футболки-то продавать? Никак.

                            0
                            Интересный пример статьи (или перевода?) где кажется, что смысл зависит от языка. В английской версии достаточно четко видно, что автор пишет о том, что верстка с использованием абсолютных координат это не хорошо, а в русской почему-то это звучит как «пиксели — зло».
                              +8

                              Где-то я это уже слышал. Пришло время попрощаться с милями, фунтами, баррелями, дюймами и прочими AM/PM.

                                +8
                                И переходом на зимнее/летнее время!
                                +10
                                Пора уже забыть про байку о невозможности масштабирования пикселей самим юзером.

                                Ну и отзывчивый дизайн в первую очередь идет из головы дизайнера. И явное указание конкретного размера шрифта и интерлиньяжа в зависимости от ширины экрана — намного более правильный вариант, нежели абсурдное «150% от текущего размера, а текущий размер зависит от ширины экрана»

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

                                  Т.е. при горизонтальном и вертикальном повороте экрана размер шрифта будет разным? И текущий размер не зависит от ширины экрана, а от настроек пользователя.
                                  0
                                  Хм, где то я уже это слышал… а вспомнил: стабильно раз в год последние 15 лет читаю несколько таких статей, вот только когда начинается реализация выясняется…
                                    +1
                                    Что касается текстов и отступов — с некоторыми оговорками с автором можно согласиться. Есть исключения и частности, но в целом подход жизнеспособный, проверено.

                                    Но вот для медиазапросов — явная глупость, во всяком случае до появления container queries.
                                      +1
                                      Вот интересный момент, px понятно у всех разный, т.к. плотность их на экране разная, но, например, cm известно каким должен быть (1/100 эталона метра), и устройство наверняка само всегда в курсе сколько у его экрана px это 1 cm. Вот делаяю я интерфейс, мне нужно чтобы пользователю было удобно попадать в кнопку пальцем, пальцы у нас у всех немного разные, но кнопка диаметром 1.5cm была бы достаточно удобна, и мне очень хочется сказать что я хочу «кнопку которая будет диаметром 1,5 cm на любом экране», а мне запрещают, говорят cm это только для печати, непонятно.
                                        0

                                        Пиксели разные, но CSS пиксели стараются привязывать к угловому размеру же при типичном режиме использования, так что для телефонов ширина будет от 320 до 420 пикселей для любых dpi. В CSS вроде изначально физические юниты были честные, а потом их через dpi=96 жёстко привязали к пикселям, якобы для совместимости. В итоге получить реальные размеры невозможно без хардкода и попыток угадать модель устройства. Может быть, когда-то ситуация изменится. Для размера кнопок же на первый взгляд кажется, что хорошая идея использовать физические размеры, но представьте, что вы делаете презентацию сайта на экране на всю стену и там появляется эта кнопочка в 1.5 см. Тоже не очень как-то.

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

                                            Ну, "отбирают" совсем не по этой причине. Я так понял W3C пыталась подстроиться под стандартные на тот момент 96dpi:


                                            Note: This definition of the pixel unit and the physical units differs from previous versions of CSS. In particular, in previous versions of CSS the pixel unit and the physical units were not related by a fixed ratio: the physical units were always tied to their physical measurements while the pixel unit would vary to most closely match the reference pixel. (This change was made because too much existing content relies on the assumption of 96dpi, and breaking that assumption broke the content.)

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

                                              0
                                              дать в конце концов в браузеры API о физических параметрах дисплея устройства

                                              А потом появится куча уязвимостей, fingerprinting и прочие радости. Современный Web очень трудно модифицировать из-за от обилия legacy, ждём Web 3.0...

                                            0
                                            Или у вас экран во всю стену, отображающий некую мнемосхему для персонала некоего агрегата. И всплывает ваша масштабированная форма с ВОТ ТАКЕННЫМИ КНОПКАМИ по полметра шириной.
                                              0

                                              Это нормально как раз. Если кнопки по полметра, значит зрители на стадионе сидят и им всё хорошо видно.

                                            0

                                            Кто это вам запрещает? В CSS можно использовать как единицы миллиметры, сантиметры и дюймы не только для печати.

                                            0
                                            угу, и тут выводится ваша страница на телек — вы этот 1.5cm даже не заметны будут)
                                              0
                                              Если интерфейс делается под носимое устройство типа смартфона то он в любом случае учитывает и портретную ориентацию при работе, и тачскрин в качестве основного устройства ввода, и возможность совершать основные действия свободным большим пальцем удерживающей смртфон руки, и много чего еще, им в любом случае будет не удобно пользоваться вне класса устройств под которые он разработан, наличие совместимости в отрисовке с телевизором ни на что не повлияет
                                                0

                                                При выводе на телек (или проектор) там явно будет DPI ниже чем на первичном мониторе, и масштабирование произойдёт естественным образом — как и с любой другой картинкой.


                                                Если же речь про большие (типа рекламных) мониторов — то и сантиметры на них нужно мерять с учётом расстояния с которого на них будут смотреть, хотя в этом случае единицы типа vw/vh действительно могут оказаться гораздо удобнее.

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

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

                                              Просто скажем нет пикселям!

                                              Я бы сказал так:
                                              Везде пиксели! В блоках где рядом есть текст — em (т.е. в основном паддинги и межстрочные интервалы). Всё!

                                              Когда везде тулят em/rem, особенно в медиа-запросы — поддержка ад.
                                              А любителям программировать в стилях (циклы и ветвления в sass, сюда же calc в перемешку с троекратными переопределениями css-переменных по пути и т.д.) — отдельный котёл в аду.
                                              Явное лучше неявного.
                                                0
                                                Современные браузеры могут рендерить элементы, измеряемые в сотых долях пикселя.

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

                                                  0
                                                  Ну это наверное как с дюймами. Совершено бессмысленная единица измерения, но жажда — ничего, традиция — это все…
                                                    +1
                                                    Это называется не «отзывчивый дизайн», а «ой, охренеешь теперь с этими вариациями экранов мобильников.
                                                    А на самом деле, адаптивный UI еще можно написать, но когда в результатах работы нужно получить текстовый документ, готовый к печати, да еще и по ГОСТу, то как без абсолютных единиц-то?
                                                    Да даже для показа картинок, логичнее всего использовать ресайзинг с абсолютным ограничением по ширине и/или высоте.

                                                    И причем тут слоганы?
                                                      +1
                                                      Лучший слоган здесь:
                                                      Я пока что не заказывал футболки
                                                        +1
                                                        У опубликованного текста стиль

                                                        .post__text {
                                                        font-size: 16px;
                                                        }
                                                          0
                                                          Есть три слова: «Страница для печати». Выкинув абсолютные величины, сложно будет обеспечить точность печати.
                                                            0

                                                            Статья ни о чем.
                                                            Есть сочетания ctrl+- для изменения размера на странице. Без всякой привязки к базовому размеру — отлично работает. Текст точно так же масштабируется.
                                                            Были проекты и с px и с rem. Хрен редьки не слаще, но с px проще брать значения с макета не преобразовывая.

                                                            Only users with full accounts can post comments. Log in, please.