Как стать автором
Обновить

Комментарии 53

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

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

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

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

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

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

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

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

Базовый размер на 1440 10px и уменьшается при уменьшении размера, до 800 px где переключаемся на мобильный вид и там будет в районе 24px, уменьшаясь до 10px на 375 и дальше если ширина экрана будет сокращаться.
нет на 375 и 1440 базовый шрифт равен 10px
Это странная система. Получается, что планшеты попадают меж двух огней.
Например, классический Айпад 768x1024. В вертикальной ориентации я буду видеть раздутую в 2 с лишним раза мобильную верстку (зачем мне планшет, показывающий столько же информации, сколько и телефон?), а в горизонтальной — сильно скукоженную десктопную. В первом случае получается бабушкофон с огромными шрифтами, а ко второму наоборот надо лупу прикладывать.

Почему вы не используете 1rem = 1px ? Ведь тогда вы не будете ничего никогда делить ни на 10 ни на 16)

реализовал такой механизм на 1 небольшом проекте (статистика компании). Получилось очень даже отлично!
Это шутка? Страшно представить, как выглядит этот текст на смартфонах.

Там страшно за команду, которая будет потом этот код читать/писать

padding: 1.23456rem;

margin: 0.456789rem

Автор живет в волшебном мире, где у всех HDPI-мониторы и свойство aspect-ratio поддерживается не только в свежем Chrome… И при этом, не знает, что px в браузере давно жестко не привязан к физическому пикселю. Ох.

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

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

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

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

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

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

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

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

Ну, "отбирают" совсем не по этой причине. Я так понял 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 о физических параметрах дисплея устройства. А то странно, для геолокации и акселерометра уже есть поддержка, а физические размеры экрана узнать невозможно.

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.