Pixel-perfect — техника верстки, при которой результат максимально совпадает с исходным макетом.
Под этим понимается соответствие:
- положения элементов;
- размеров;
- отступов;
- цветов;
- шрифтов;
- размеров текста;
- межстрочного и межбуквенного интервалов.
Что не входит в pixel-perfect:
-
Аболютное соответствие макету.
Несмотря на свое название, техника pixel-perfect не подразумевает стопроцентного совпадения с макетом. Различия могут быть и будут.
Дизайнер при создании макета может сделать что-то «на глаз» или просто ошибиться: сбиться с сетки, выровнять слой немного не по центру, использовать не тот шрифт или размер текста, подобрать цвет не по палитре и так далее.
Не нужно повторять того же в верстке:
- Если положение элемента отклоняется от сетки или других подобных элементов, то его следует выровнять.
- Если элемент почти по центру, то вероятно он должен быть строго по центру.
- Если есть подозрение, что в каком-то месте макета сбился шрифт, то скорее всего он действительно сбился, и вместо него должен использоваться другой.
- Если несколько цветов, используемых в макете, незначительно отличаются HEX-кодом и неотличимы на глаз, то вероятно это должен быть один цвет.
Также стоит учесть различный рендеринг страницы в различных средах.
Операционные системы по-разному отображают текст. Графические редакторы и браузеры по-разному отображают текст. Браузеры по-разному интерпретируют дробные значения.
Все эти факторы в сумме не позволяют достичь абсолютного соответствия макету.
Погрешности от нескольких пикселей до нескольких десятков пикселей вполне допустимы.
-
Соответствие макету на всех возможных разрешениях.
Нарисовать макет для всех возможных разрешений крайне затруднительно. И уж тем более затруднительно сверстать все это многообразие.
На деле верстальщик получает лишь несколько основных макетов:
- десктопная версия;
- планшетная версия (очень редко);
- мобильная версия.
На эти имеющиеся макеты и следует ориентироваться. Применение pixel-perfect к промежуточным размерам сайта недопустимо.
Одним из лучших инструментов для pixel-perfect верстки является плагин PerfectPixel.
Преимущества плагина:
- Поддержка основными браузерами: Chrome, Firefox, Opera (в планах поддержка Safari, IE и Edge).
- Нет необходимости ставить дополнительный код на сайт.
- Удобный интерфейс.
- Возможность позиционировать и масштабировать слой, изменять прозрачность.
- Функция блокировки слоя.
- Режим инверсии (позволяет проще всего увидеть отличия от макета).
Нет необходимости устанавливать данный плагин во все браузеры одновременно. В основном при разработке используется Chrome, поэтому достаточно установить плагин только в него, а остальные браузеры проверить визуально на глаз.
Также необходимо учесть, что на разных операционных системах сайт может отображаться с небольшыми различиями. Например проверив верстку на соответствие макету в ОС Windows, используя Chrome вы получили идеальное соответствие с макетом. Далее, вы открываете сайт в Mac OS, используя Chrome и видите, что есть небольшие расхождения. Если данные рахождения как-то влияют на визуальное восприятие и изменяют структуру сайта, то их необходимо поправить, в других случаях - это считается нормой.