Довольно часто некоторые заказчики, отдавая макет сайта на вёрстку, требуют попиксельно достоверной точности в разметке во всех браузерах.
Проверить такое соответствие достаточно легко — нужно сделать скриншот сайта и совместить его с графическим макетом, например, в 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)
/* Пример для расположения макета по центру: */
#pmOverlay { /* div, в котором находится image с макетом */
text-align: center;
}
#pmOverlayImg {
/* image с макетом */
}
