Как мы обычно верстаем макеты? Самый распространенный способ - это, пожалуй, постоянная беготня из графического редактора в редактор кода и обратно. Достаточно долгая и кропотливая работа. Иной раз приходится долго выверять все отступы, чтобы во всех браузерах страница смотрелась один в один, как на макете. Дабы упростить себе жизнь, можно использовать другой подход - накладывать поверх страницы изображение макета и верстать пиксель в пиксель.


Верстка “пиксель в пиксель” (“Perfect Pixel”) - максимальное соответствие верстки макету. Иными словами, верстка с точностью до пикселя. Принцип простой - поверх верстки накладывается полупрозрачное изображение макета, в точном соответствии с которым и выстраиваются все элементы на странице.


Есть несколько способов верстать таким образом.


Можно накладывать поверх верстки дополнительный слой с изображением самостоятельно - способ простой, но неудобный, ибо приходится постоянно включать/отключать видимость макета, чтобы была возможность работать с другими элементами страницы. Пользоваться этим вариантом можно во всех браузерах. В конце работы нужно не забыть удалить слой с макетом из верстки.


Можно использовать плагины в браузерах:

Есть замечательное расширение PerfectPixel, с помощью которого можно накладывать на страницу макет, свободно его двигать, фиксировать, менять прозрачность. Кроме того PerfectPixel запоминает изображения, при перезагрузке страницы они сохраняются, их можно менять. Плагин можно установить в Chrome, FireFox и Opera, для Safari и IE он находится на стадии разработки.

В FireFox есть еще одно расширение - FireX Pixel Perfect. Его интерфейс приятней, однако изображения запоминать он не умеет. При перезагрузке страницы их приходится открывать заново.


Еще один вариант - написать (или найти готовый) JS-скрипт, с помощью которого можно управлять изображением, как душе угодно. Это удобно при кроссбраузерной верстке, но в конце так же нужно удалить все лишнее. С появлением плагина PerfectPixel написание такого скрипта - теперь уже скорее развлечение нежели необходимость.


Преимущества верстки “пиксель в пиксель”:

  1. При фиксированных размерах результат очень качественный. В спорах с заказчиком можно наглядно показать, кто тут прав.

  2. Верстать достаточно удобно, не нужно все время переключаться между графическим редактором и редактором кода.

  3. Скорость верстки в целом повышается.


И недостатки:

  1. Это нужно сделать в каждом браузере, ведь верстаем мы кроссбраузерно.

  2. В адаптивах, учитывая плавающие размеры элементов, результат может получиться уже не таким идеальным.


Есть еще один коварный момент при верстке пиксель в пиксель - это шрифты. В графическом редакторе и в браузере, даже в разных браузерах, они отображаются по-разному. Это нужно учитывать.


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

Читать статью о первой конференции.