Что такое Pixel Perfect в верстке

Что такое Pixel Perfect в верстке

197 в Html5, Css3 0

Приветствую вас дорогой коллега. Часто в тех. задании заказчика можно встретить такой пункт, как верстка pixel perfect. Что это такое разберём в данной статье.

Если перевести дословно, то Perfect pixel означает — прекрасный пиксель. То есть здесь задумка сводится к тому, что в идеале ваш сверстанный шаблон должен в точности соответствовать макету дизайна. Казалось бы — нет проблем, я верстаю достаточно хорошо и быстро, но…

Как же верстать в pixel perfect? Для начала, верстаем, не задумываясь ни о каких соответствиях. Все размеры берем с макета в точности. Если шрифт, например, указан не целым числом, то я его округляю до целого в большую или меньшую сторону. Отступы padding и поля margin я могу взять с макета или на глаз, благо опыта уже хватает, чтобы определить более менее точно. Вообще определить margin и padding не проблема, в Figma, Zeplin или в том же Photoshop делается это довольно просто. Но все это требует времени, а время в верстке также, как и качество также играет весомую роль.

Когда макет сверстан можно проверять на точное соответствие макету. Вам может показаться, что вы сделали все правильно и у вас соответствуют все расстояния между элементами, соблюдены все размеры и все на глаз смотрится идеально. Но это только на глаз. Я долгое время так и верстал. Но что будет, если наложить полупрозрачную картинку макета на ваш шаблон? Как это сделать легко?

Для проверки верстки в Pixel perfect существуют плагины для браузеров, в основном для Chrome и Firefox. Я использую Firefox Developer поэтому расскажу про тот плагин, который сам использую.

Читайте также:  Методология БЭМ в примерах

Я сейчас не буду в подробностях рассказывать, как устанавливать плагины для браузера. Это все делается элементарно. И так, заходим на страницу плагинов Firefox и в поиске вбиваем «perfect pixel». В найденном списке устанавливаем под названием «PerfectPixel». Скорее всего он будет первым в выдаче. Вот как он выглядит…

Аддон для Firefox PerfectPixel
Расширение для Firefox PerfectPixel

Очень понравился этот плагин, так как он прост в работе и полностью на русском языке.

Главное окно аддона PerfectPixel

Первое, что необходимо сделать после вызова окна плагина (кликаем по иконке в панели инструментов) — это загрузить скриншот макета сайта. Скриншот можете сделать именно той области, которую хотите проверить. Например, шапка сайта. Создать скриншот можно как угодно, я лично пользуюсь небольшой программкой под названием Joxi.

Добавляем наш скрин в окно PerfectPixel. После этого в окне браузера появится наслоение данной картинки над нашим сверстанным шаблоном. Теперь необходимо совместить картинку с элементами шаблона. Просто перемещаем скрин, зацепив левой кнопкой мыши. Можно совместить только один блок, например, логотип в шапке сайта и далее «плясать» от него.

Наслоение скриншота макета над сверстанным шаблоном

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

После того, как выставили далее блокируем слой с картинкой, чтобы он не съезжал никуда.

Блокируем слой с картинкой в Perfect Pixel

Вообще обратите внимание на кнопочки слева и справа от замочка. Иконка глаза отключает/включает скриншот, иконка фильтра позволяет приглушить некоторые цвета, тем самым выделяя сопоставляемые слои.

Выделение слоев в Perfect Pixel

Поиграйтесь также прозрачностью слоя — перемещайте ползунок влево — вправо. Выставите то значение, с которым вам комфортно работать.

Теперь мы видим, что нужно править. Открываем инспектор кода и вносим правки. В идеале оба слоя должны наложиться друг на друга без отклонений. Но есть тут одно «НО»…

Проверяя шаблон на Pixel Perfect, необходимо, чтобы сам макет дизайна был нарисован идеально, что бывает далеко не всегда.

Например, не всегда в дизайне бывают идеально указаны отступы между пунктами меню. Всегда найдется отклонений в 1-2 пикс. На глаз не видно, но при верстке в пиксель перфект могут возникнуть сложности. Я считаю, что не стоит относиться к этому с фанатизмом. Правим косячки дизайнера и объясняем заказчику, что так быть не должно. Также, если вы начинаете подгонять под дизайн, перемещая элементы отрицательными отступами, то явно тут делаете что-то не то. В общем, такого быть не должно.

Читайте также:  Стильное вертикальное меню аккордеон для сайта

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

Остались вопросы? Задавайте в комментариях. До встречи в следующих постах!

Остались вопросы? Посмотрите видео...

Оцените пост
Пока оценок нет
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, jQuery, JavaScript, Git, БЭМ, Gulp.
Другие материалы той же категории