Pull to refresh

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

Reading time2 min
Views35K
Нет, с твоим монитором всё в порядке, %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
Tags:
Hubs:
Total votes 4: ↑4 and ↓0+4
Comments63

Articles