Что означает «пиксель перфект» в описании задания?

Question

[angelzzz]

Подскажите, пожалуйста, что означает "пиксель перфект" в задании?

Как это добиться? Главное ли чистота кода при этом или можно использовать костыли? Почему в описаниях заданий не пишут необходимость поддерживать ie7, ie8? Значит ли это, что можно обойтись без них? Можно ли при этом использовать js?

Answer 1

[Игорь Воротнёв]

Дополню ответы по поводу соответствия макетам. Иногда бывает, что макеты есть, но только часть из них вычищена и доведена до совершенства - одинаковые отступы, размеры шрифтом, междустрочные интервалы и тд. А на некоторых страницах или элементах/блоках могут встречаться неточности (чуть больше паддинг с одной стороны и тд). Так вот в таких случаях pixel perfect имеет более широкое значение. Я так говорю - это когда из дизайна пиксель-в-пиксель делается стайлгайд, где все элементы одинаковы. И дальше этот стайлгайд уже используется при сборке. Потому что если у нас у кнопки паддинги 10/20, то они у всех кнопок этого типа должны быть такие, по всему сайту. Даже если дизайнер на какой-то из страниц был неаккуратен и допустил 10/19 пикселей. В подобных случаях надо делать по стайлгайду и просить передать дизайнеру, что он неряха. Говорю об этом, потому что на практике встречал верстальщиков, которые таки пилили фанатично пиксель-в-пиксель, и все погрешности дизайнера в результате превращались в кучу magic numbers в CSS.

Comments

[Igor Roschak]

Соглашусь с этим ответом, за 2 года практики я не мало "наговнокодил" и когда требовали pixelperfect - делал пиксель в пиксель и потом тратил кучу времени на адаптацию. В верстке pixelperfect это соблюдение одинаковых отступов, размера заголовков одного порядка, размер иконок, картинок ...

[Елена]

Про magic numbers в CSS это точно) Мне, благо, пока таких заказчиков не попадалось. Но сейчас нашла вакансию в компании, что мне интересна, а там в описании стоит как раз "Внимание к деталям, pixel perfect", и я вот думаю, оно это или не оно, и стоит ли пытаться туда попасть, или итак все ясно) Потому что сам pixel perfect не так ужасен в верстке, если макет выполнен также идеально. А если это кривой косой макет от дизайнера, который наобум расставлял направляющие и элементы (а мне в основном такие и попадаются чаще всего, увы), то верстая pixel perfect можно такого наворотить, если заказчик будет сверять прям по макету...

Answer 2

[iBird Rose]

это значит верстка должна быть 1 в 1 с макетом. прям чтобы ты psd наложил поверх своей верстки - и все элементы пиксель в пиксель были там же.

Answer 3

[Edward]

Элементы должны располагаться пиксель в пиксель, как в макете.
Плагин для Chrome вам поможет PerfectPixel by WellDoneCode.

Answer 4

[GreatRash]

Пиксель-перфект в описании задания означает, что вам надо десять раз подумать прежде чем браться за такую работу. Это означает упоротого заказчика, или дизайнера, или обоих сразу. Это означает, что у вас в дизайне не будет никакой сетки зато будет гигантский бесполезный файл CSS.

Comments

[Игорь Воротнёв]

ой не факт. Но и такое встречается.

Answer 5

[polifill]

Почему в описаниях заданий не пишут необходимость поддерживать ie7, ie8? Значит ли это, что можно обойтись без них? Можно ли при этом использовать js?

Эти вопросы лучше задать ЛИЧНО заказчику.
Скорее всего js можно.
IE7, IE8 или забыли (напомните вспомнят) или не нужно.
Но ЛУЧШЕ ВСЕГО СПРОСИТЬ ЗАКАЗЧИКА о таких деталях.

Пиксель перфект - "один-в-один с макетом". Вообще - плохая задача. Слишком требовательный заказчик.

Тут ведь и от качества макета многое зависит. А ежели там не web-цвета? Задолбаетесь.

Я бы пообщался с заказчиком, возможно, он не так жестоко понимает "пиксель перфект".

Но в общем случае - это ЖОПА.

Answer 6

[Антон]

Ну если нет поддержки значит и не надо, ну наверно как минимум ie11 надо.
Про пиксел перфект, это, что бы Ваша верстка была такая же как и на макете.
Для этого скачайте https://chrome.google.com/webstore/detail/perfectp...

Answer 7

[Dave]

Подскажите, пожалуйста, что означает "пиксель перфект" в задании?

Это значит что при верстке макета, нужно использовать линейку чтобы отмерять все размеры в пикселях, а потом прописывать в CSS такие же.

Как это добиться?

Использовать линейку

Главное ли чистота кода при этом или можно использовать костыли?

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

Почему в описаниях заданий не пишут необходимость поддерживать ie7, ie8? Значит ли это, что можно обойтись без них?

Потому что это не требуется в 2016 (в болшинстве случаев). Обойтись можно.

Можно ли при этом использовать js?

Зависит от задач. Например слайдер и прочее пишутся на JS, а ты просто подключаешь готовые компоненты и настраиваешь под себя.

Comments

[angelzzz]

про js уточню. сейчас верстаю в том числе под ie8. часть задач решить стандартными методами css нельзя (например calc), отсюда вопрос, можно ли для достижения поставленной задачи использовать js, чтобы на его уровне расчитывался размер

Answer 8

[xmoonlight]

"пиксель перфект" - это 100%-й повтор дизайн-макета в HTML вёрстке.