Существуют ли решения для какой-либо автоматизации pixel perfect'a?
Доброго дня.
Недавно, извращаясь с одним из браузерных плагинов для подгонки верстки под pixel perfect и сдвигая картинку попиксельно, подумал, что было бы здорово иметь инструмент, который бы делал часть этого процесса самостоятельно. Например, сравнивал бы скормленный скриншот макета и отрендеренную верстку, и на выходе выдавал бы список классов, которые в этом месте отличаются от изображения (т.е., logo - сдвинуто на 3 пиксела вправо и на 1 пиксел вниз). А разработчику осталось бы только внести указанные изменения, и снова запустить скрипт, пока не будет 100% точность. А чтобы скрипт не реагировал на текст, можно указать список классов \ тэгов, которые не будут считаться.
Обеспечить такое мог бы, к примеру, плагин для Phantom JS.
Кто-нибудь знает подобное, или любое решение на тему?
Я делал достаточно простое решение:
- Страницу макета забрасывал в PS, сводил слои, инвертировал и делал прозрачность 50%.
- Выгонял результат в PNG с альфа-прозрачностью.
- На страницу подвешивал две кнопки, с JS логикой, которая поверх верстки выводит инвертированную исходную картинку (и когда надо, не инвертированный исходник с той же 50% прозрачностью).
У меня примерно такой же вариант) Но все равно, навскидку не скажешь - приходится в dev tools ручками подставлять значение. А, к примеру, разницу в расстоянии между двумя элементами можно просчитать автоматически.
Алексей Николаев:
Тут начинает тогда появляться проблема:
- Вы имеете графический макет, даже если он разнесен по слоям.
- Дизайнер нифига не будет заморачиваться с размерами блоков в PSD/CDR/AI, т.е. Ваш блок в верстке не будет соответствовать размерам блока в макете. Хоть и будут визуально выглядеть идентично (например добавили margin/padding/position).
В итоге: как бы вы не пытались распарсить исходный макет и сопоставить его с версткой - потерпите неудачу.
Выход:
1 вар. Cопоставлять различия вышеприведенным мною способом (можно подточить, например написав на JS плагин лупы, для наилучшего "разглядывания").
2 вар. Писать десктопную или серверную программу, которая будет автоматически искать критическую разницу между двумя изображениями, пытаться определять что находится в вверстке над критическими точками и собирать названия элементов, которым стоит уделить внимание.
3 вар. Наркоманский. Перед версткой, взять макет, отрисовать все критические блоки в SVG, сопоставлять верстку и SVG по координатам.
ИМХО: 1 вариант самый практичный и дешевый, если нет потока, скажем, в 100 страниц в день.
Антон Щербаков: а тут не обязательно парсить. Можно просто взять png, а скрипт наложил бы его на верстку в режиме умножения или разницы, не суть важно, чтобы расхождение было легче определить. Далее, определяем селектор в месте расхождения (phantom js это может), считаем размер расхождения в пикселах по 2м их 4х осей, и пишем в лог, в конце выдаем в консольку. Или что-то типа того, потому что времени порой отнимает порядочно)
Выглядит круто, но на практике точные и красивые значения в 270px, 20px и т.п. преобразуются в 273px, 17px и так далее, ибо, например, по факту у блока текста, кроме отступа, есть line-height, а дизайнер сделал отступ в 20 пикселов без учета этого расстояния. И так далее...
