Как мы обычно верстаем макеты? Самый распространенный способ - это, пожалуй, постоянная беготня из графического редактора в редактор кода и обратно. Достаточно долгая и кропотливая работа. Иной раз приходится долго выверять все отступы, чтобы во всех браузерах страница смотрелась один в один, как на макете. Дабы упростить себе жизнь, можно использовать другой подход - накладывать поверх страницы изображение макета и верстать пиксель в пиксель.
Верстка “пиксель в пиксель” (“Perfect Pixel”) - максимальное соответствие верстки макету. Иными словами, верстка с точностью до пикселя. Принцип простой - поверх верстки накладывается полупрозрачное изображение макета, в точном соответствии с которым и выстраиваются все элементы на странице.
Есть несколько способов верстать таким образом.
Можно накладывать поверх верстки дополнительный слой с изображением самостоятельно - способ простой, но неудобный, ибо приходится постоянно включать/отключать видимость макета, чтобы была возможность работать с другими элементами страницы. Пользоваться этим вариантом можно во всех браузерах. В конце работы нужно не забыть удалить слой с макетом из верстки.
Можно использовать плагины в браузерах:
Есть замечательное расширение PerfectPixel, с помощью которого можно накладывать на страницу макет, свободно его двигать, фиксировать, менять прозрачность. Кроме того PerfectPixel запоминает изображения, при перезагрузке страницы они сохраняются, их можно менять. Плагин можно установить в Chrome, FireFox и Opera, для Safari и IE он находится на стадии разработки.
В FireFox есть еще одно расширение - FireX Pixel Perfect. Его интерфейс приятней, однако изображения запоминать он не умеет. При перезагрузке страницы их приходится открывать заново.
Еще один вариант - написать (или найти готовый) JS-скрипт, с помощью которого можно управлять изображением, как душе угодно. Это удобно при кроссбраузерной верстке, но в конце так же нужно удалить все лишнее. С появлением плагина PerfectPixel написание такого скрипта - теперь уже скорее развлечение нежели необходимость.
Преимущества верстки “пиксель в пиксель”:
При фиксированных размерах результат очень качественный. В спорах с заказчиком можно наглядно показать, кто тут прав.
Верстать достаточно удобно, не нужно все время переключаться между графическим редактором и редактором кода.
Скорость верстки в целом повышается.
И недостатки:
Это нужно сделать в каждом браузере, ведь верстаем мы кроссбраузерно.
В адаптивах, учитывая плавающие размеры элементов, результат может получиться уже не таким идеальным.
Есть еще один коварный момент при верстке пиксель в пиксель - это шрифты. В графическом редакторе и в браузере, даже в разных браузерах, они отображаются по-разному. Это нужно учитывать.
В целом, верстка пиксель в пиксель отлично подходит для фиксированных размеров. Несмотря на концепцию верстать с точностью до пикселя, при грамотно отрисованном макете ее можно использовать и для адаптивов. Наложение полупрозрачного слоя с макетом значительно упрощает весь процесс верстки. А потому, если у заказчика не стоит обязательного требования верстать пиксель в пиксель, можно использовать данный метод на свое усмотрение, по мере необходимости, возможно, для отдельных элементов страницы, дабы облегчить себе жизнь.