Дизайнерам и фронтендерам — Что делать с 1px бордерами?  Публичный пост

Друзья, желательно дизайнеры, или фронтендеры.

Я вот дизайню уже много лет, но так и не разобрался, что делать с 1px бордерами?

Что я имею ввиду.
Вы рисуете пиксель-перфект прототип. И у вас есть какие-то блоки, которые стыкуются. Каждый из этих блоков имеет бордер.
Итак, блиц! Этот бордер должен быть:
а) Внутри
б) Снаружи
в) Посередине

А теперь с картинками и обьяснениями проблемы.
Если бордер внутри, у нас на стыках выходит не 1px, а 2px.

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

Если бордер посередине, то проявляется проблема стыкования с блоками без бордера.

Есть еще опция, вручную рисовать 1px линии между блоками. Но тогда не будет соблюдаться сетка, например 8-16-24-32, каждый раз добавляя лишние пиксели то с одной стороны, то с двух сторон.

Дизайнеры, что вы делаете, как живете с этим?!?
Фронтендеры, обьясните мне, почему я не должен париться?

17 комментариев 👇

pixel perfect не нужен
оставь бордер по сетке в 8px

  Развернуть 1 комментарий

@Rustho, так где его оставлять? снаружи, внутри или посередине? :) В данную секунду я использую "снаружи", но оно кривое-косое становится, если не следить постоянно. Особенно доставляют таблицы, где это сильно видно.

  Развернуть 1 комментарий

А есть более конкретный пример, чем серые квадраты?

У меня использование бордеров зависит от задач.

  • Если кнопка или поле, то бордер внутренний. Удобно работать с отступами, когда у контейнера ничего не торчит наружу.

  • Если иконка, то бордер средний, чтобы правильно скруглялись кривые. Ещё удобно рисовать разные состояния, например, когда иконка должна быть линейной, а потом заливаться цветом.

  • Если табличка или линейки между объектами, то бордер наружний. Ячейка или строка в таком представлении просто объект, а линейки разбивают эти объекты. Чаще всего тут даже не бордер, а просто отдельная линейка.
  Развернуть 1 комментарий

@vlasmn, Ну сразу скажу про иконки - я вообще не использую бордер, а если использую, то делаю outline stroke, чтобы он был fill цветом, а не stroke. Тогда нет проблем с размером (например, у вас все иконки 16px должны быть, а не 16,5 или 15), и нет проблем с заливкой разными цветами на продакшене.

По табличкам - отдельными линиями это геморрой. Особенно если надо её менять регулярно, докидывать колонки, менять размер, эти линии нереально выделить, приходится по одной, надо постоянно подстраивать под размеры. Я обычно использую inner shadow, но тогда надо нормально обьяснять девелоперам, что за хрень у тебя в Фигме вместо бордера, почему обычных ячеек 9 штук разных (для первой и последней колонки по 3 (верхняя, нижняя, середина), и для всех между ними 3 штуки)

  Развернуть 1 комментарий

@Zefir, мы иконки помещаем в Union и на экспорте они получаются в Outline. Структура примерно такая:

Шейпами удобно редактировать иконки, а на экспорт они идут по-феншую. В Stroke, конечно же, не отдаём.

Сами иконки строго в контейнерах под все размеры, чтобы разработчикам было удобно их подменять, в случае чего. Поэтому никаких 16,5 или 15px не случается.

А с табличками спасают компоненты и варианты. Мы просто добавляем девайдер в мастер компонент, делаем 2 варианта (с дивайдерами и без), и в макетах нигде ничего ручками не делаем.

  Развернуть 1 комментарий
Karl Kallavus, Frontend Developer 29 июля в 10:48

Обычно задается свойство box-sizing: border-box

По умолчанию, именно border-box считается стандартным соглашением между дизайнером и разработчиком.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Цитирую mdn

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

Есть статья еще 2012 года от Paul Irish. Он отвечает в Google Chrome за Developer Tooling;

https://www.paulirish.com/2012/box-sizing-border-box-ftw/

Он рекомендует задавать box-sizing: border-box всем элементам.

Такое правило часто встречается во всяких reset.css и normalize.css

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

От себя могу сказать, что когда-то давно видел правило исключение, для input[type="search"]

input[type="search"] {
    -webkit-appearance: textfield; 
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

Но это было для Safari 5 и каких-то совсем старых Chrome.

  Развернуть 1 комментарий

простите, я чет не понимаю проблемы (как фронтэндер), разве же это не так должно быть?


  Развернуть 1 комментарий

По умолчанию в HTML/CSS бордер снаружи, но его легко сделать так, чтобы он был внутри через border-box, так что этот выбор несущественен, смотрите как у вас в сетку ложится. Бордер посередине это вообще что-то неведомое.

Проблему с двойными бордерами легко решить через отрицательные марджины: https://codepen.io/alextewpin/pen/BaRrEKE Прием хорошо подходит для верстки сеток, до модного grid их все так и делали.

Можно еще таблицами верстать, но в 2к21 это как-то эээ.

  Развернуть 1 комментарий

@alextewpin, уточню, что даже если бордер внеший это еще не значит, что он будет торчать из блока наружу, в HTML/CSS это влияет только на то, как считаются размеры этого самого блока.

Наружу может торчать outline или box-shadow, но верстать ими бордеры, пожалуй, все-таки не стоит.

  Развернуть 1 комментарий

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

На вёрстке никаких проблем нет.

Например, стоят 4 блока с однопиксельной рамкой в ряду, я просто напишу:

.box {
border: 1px solid #000;
}

.box ~ .box {
border-left: none;
}

Если что-то на пиксель не попало в сетку — ваще пох, никто этого не увидит.

Если два и более рядов, то всякие :nth-of-type() поправят дело.

Если захочу в фигме идеал, добавлю лишние обёртки, которые скроют ненужные рамки.

https://www.figma.com/file/hu4spQFPca1YxB71fBR75M/samples-for?node-id=2:2

Сразу скажу, пример накидал очень грубый, за минуту. В реальном проекте, конечно же пришлось бы покумекать сильнее чтобы всё как следует сделать.

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

  Развернуть 1 комментарий
Yan Rzhevutski, Frontend Developer 28 июля в 13:48

Если речь идёт о вёрстке, то есть такая чудесная вещь как outline: 1px solid red, которая, собственно, не пихает никакие блоки, а просто рисует линию там, где она должна быть

UPD: поэтому при их наложении не будет линии х2

  Развернуть 1 комментарий

@kadron141, ну я вижу, что верстальщикам обычно пофиг, аутлайн и ок. :) но когда дизайнишь, нужно точно дать расстояния и размеры, чтобы оно нормально вышло в продукте. И каждый раз это боль и страдания.

  Развернуть 1 комментарий

@Zefir, верстальщикам пофиг с цсс, так сказать «под коробкой», это бордер или аутлайн. И по большому счету это верно в тех случаях, когда визуально и по перформансу результат тот же

  Развернуть 1 комментарий
themylogin, Разработчик 29 июля в 08:29

Верстать таблицами как в 2001 году, тогда такой проблемы не было!

  Развернуть 1 комментарий

@themylogin, я про дизайн больше говорю, когда мне нужно точно соблюдать расстояния между элементами, чтобы передать разработчикам и они не спрашивали, почему у тебя прыгают линии или почему вдруг появился 1px лишний между обьектами (хотя визуально всё ок)

  Развернуть 1 комментарий

@Zefir, а может и хер с ним, с этим пикселем, если визуально все ок? мы вообще за что боремся?

  Развернуть 1 комментарий

@ganqqwerty, так блин, было бы всё хорошо, не парился бы :) но пиксель пикселю рознь, и если что-то стоит не на своём месте часто можно забить, но когда у тебя линии в два раза толще становятся, или линия прыгает вверх-вниз, это сложно не заметить.

  Развернуть 1 комментарий

😎

Автор поста открыл его для большого интернета, но комментирование и движухи доступны только участникам Клуба

Что вообще здесь происходит?


Войти  или  Вступить в Клуб