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

Верстаем пиксел в пиксел: кроссбраузерный аналог PixelPerfect

Время на прочтение2 мин
Количество просмотров36K
Нет, с твоим монитором всё в порядке, %username%
Довольно часто некоторые заказчики, отдавая макет сайта на вёрстку, требуют попиксельно достоверной точности в разметке во всех браузерах.

Проверить такое соответствие достаточно легко — нужно сделать скриншот сайта и совместить его с графическим макетом, например, в Photoshop'е.

Но вот только в процессе вёрстки использовать такой приём не очень удобно.

Решение для Firefox

Недавно я натолкнулся на addon для Firefox'а, под названием Pixel Perfect.
Он выводит полупрозрачный макет поверх вёрстки так, что сразу видны все неточности.

И всем Pixel Perfect замечателен, только предназначен он только для Firefox'а, а «работать» наша вёрстка должна в разных браузерах.

Решение для всех

Я написал небольшой скрипт, который можно подключать в файл с html-разметкой через тэг <script>.

Также его можно использовать в качестве userscript'а (greasemonkey-скрипта) во всех браузерах, для которых есть соответствующее расширение (или встроенная в0змóжность).

Для того чтобы скормить скрипту макет, нужно просто закинуть в директорию с вашим html-файлом макет в формате png, jpg или gif, предварительно переименовав его в layout.png (jpg или gif).

Хоткеи:
  • shift+space — показать / спрятать слой с макетом
  • ctrl+enter — изменить размеры окна браузера под размер макета (работает в FF, IE6 и Safari)
Для того чтобы разместить макет так, как нам нужно (например, если мы создаём фиксированную вёрстку, в виде колонки по центру), можно создать в той же директории, где у нас происходит всё действо, файл pmarkup.css:
/* Пример для расположения макета по центру: */
#pmOverlay { /* div, в котором находится image с макетом */
text-align: center;
}

#pmOverlayImg {
/* image с макетом */
}


Посмотреть в действии

Протестировано в IE6-7, Firefox 2-3. Opera 9.5, Safari 3
Теги:
Хабы:
Всего голосов 4: ↑4 и ↓0+4
Комментарии63

Публикации

Истории

Ближайшие события

7 – 8 ноября
Конференция byteoilgas_conf 2024
МоскваОнлайн
7 – 8 ноября
Конференция «Матемаркетинг»
МоскваОнлайн
15 – 16 ноября
IT-конференция Merge Skolkovo
Москва
22 – 24 ноября
Хакатон «AgroCode Hack Genetics'24»
Онлайн
28 ноября
Конференция «TechRec: ITHR CAMPUS»
МоскваОнлайн
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань