Почта:vova@vbeg.ru
Скайп:vova-beglecov

Вёрстка пиксель в пиксель

Когда просят сделать вёрстку «пиксель в пиксель» (в англонете «pixel perfect»), то ни к чему хорошему это не приведёт. Дабы каждый раз не тратить время на разьяснения, решено всё вынести в отдельную статью.

В общем смысле

В общем смысле вёрстку «пиксель в пиксель» можно сделать только для очень простого макета без шрифтов. Для более сложных макетов такую вёрстку можно попытаться сделать с участием css хаков, но данные извращения крайне не одобряются, так как с выходом нового браузера вёрстка может испортиться. В идеале лучше придерживаться стандартов W3C, но не переборщать. Щепетильная проверка валидатором W3C такая же дурь, как «пиксель в пиксель».

Шрифты

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

Но всё это не так страшно, по сравнению с тем, когда дизайнер в макете использует нестандартные шрифты, зачастую платные и не оптимизированные под браузеры. Так же не все браузерные шрифты могут отобразиться в дробных размерах. Например, фотошоп позволяется задать размер стандартного шрифта Arial как 10,3pt (pt – это обычная мера шрифта), но браузеры не умеют показывать такую размерность. Ближайший дробный размер, который браузер сможет показать это 10,5pt. Таким образом ещё на этапе создания макета требование «пиксель в пиксель» будет невыполнимо.

Увеличенный фрагмент блока «Мотосезон откроется» с нестандартным шрифтом. В данном случае используется шрифт Open Sans. Можно наглядно увидеть, как однозначно заданный формат и размерность шрифта в браузерах выглядит по-разному.


Центрирование, расположение внутри тянущихся элементов

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


Визуально кажется, что каждая из картинок отцентрирована в своей ячейке. Скрываем в макете белый фон и видим, что такое центирование производилось дизайнером "на глаз". Третий товар вовсе прижат к нижнему краю. 

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

Поэтому, если в вёрстке сделать автоматическое центрирование (указать «text-align: center; vertical-align: middle;»), то картинка расположится совсем не так, как на макете и заказчик начнёт винить верстальщика, так как вёрстка блока будет отличается от макета. 

Заказчику покажется, что верстальщик схалтурил, а на самом деле верстальщик сделал правильно. В идеале макет должен сохранять красивый вид, даже если какая-то картинка сместилась на 5-10 пикселей от изначального макетного вида. 


Вывод

Вёрстка «пиксель в пиксель» всего лишь пустая фраза, не имеющая под собой никакой практической пользы. Более того, при постановке задачи «пиксель в пиксель» заказчик рискует получить работу, выполненную на костылях с css-хаками, а исполнитель рискует затянуть реализацию работы. И при привязке такой вёрстки к движку или в ходе наполнения данными, на сайте будут происходить проблемы с отображением, которые на этапе принятия вёрстки заметить было невозможно.

Правильное требование звучит не «пиксель в пиксель», а «максимально возможное соответствие».