Верстаем пиксел в пиксел: кроссбраузерный аналог PixelPerfect

    Нет, с твоим монитором всё в порядке, %username%
    Довольно часто некоторые заказчики, отдавая макет сайта на вёрстку, требуют попиксельно достоверной точности в разметке во всех браузерах.

    Проверить такое соответствие достаточно легко — нужно сделать скриншот сайта и совместить его с графическим макетом, например, в Photoshop'е.

    Но вот только в процессе вёрстки использовать такой приём не очень удобно.

    Решение для Firefox

    Недавно я натолкнулся на addon для Firefox'а, под названием Pixel Perfect.
    Он выводит полупрозрачный макет поверх вёрстки так, что сразу видны все неточности.

    И всем Pixel Perfect замечателен, только предназначен он только для Firefox'а, а «работать» наша вёрстка должна в разных браузерах.

    Решение для всех

    Я написал небольшой скрипт, который можно подключать в файл с html-разметкой через тэг <script>.

    Также его можно использовать в качестве userscript'а (greasemonkey-скрипта) во всех браузерах, для которых есть соответствующее расширение (или встроенная в0змóжность).

    Для того чтобы скормить скрипту макет, нужно просто закинуть в директорию с вашим html-файлом макет в формате png, jpg или gif, предварительно переименовав его в layout.png (jpg или gif).

    Хоткеи:
    • shift+space — показать / спрятать слой с макетом
    • ctrl+enter — изменить размеры окна браузера под размер макета (работает в FF, IE6 и Safari)
    Для того чтобы разместить макет так, как нам нужно (например, если мы создаём фиксированную вёрстку, в виде колонки по центру), можно создать в той же директории, где у нас происходит всё действо, файл pmarkup.css:
    /* Пример для расположения макета по центру: */
    #pmOverlay { /* div, в котором находится image с макетом */
    text-align: center;
    }

    #pmOverlayImg {
    /* image с макетом */
    }


    Посмотреть в действии

    Протестировано в IE6-7, Firefox 2-3. Opera 9.5, Safari 3

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 63

      0
      Спасибо, весьма полезно и достаточно удобно...
        0
        Спасибо. Очень полезая штука :)
        А помню раньше, когда в dreamveawer верстал, там была функция, которая позволяла подложку делать под макет. Удобно, но к сожалению не совсем то, что надо. А вот ваш сркип в самый раз :)
        • UFO just landed and posted this here
            –3
            А зачем серьезным компаниям заказывать ручки только у паркер, мышины только мерседес... У таких проектов неточностей не должно быть ;)
            • UFO just landed and posted this here
                0
                цвет на странице у тебя будет такой же, как на макете, потому что ты берёшь его именно там, а не где-либо.
                соответственно, цвета страницы и макета на одном компутере у всех будут совпадать ;)
                • UFO just landed and posted this here
                    0
                    ну если клиент хочет пиксель в пиксель, то я думаю он будет сравнивать макет и страницу на одном компьютере. или он попросит соседа повернуть к нему свой монитор и включит на его компьютере макет, а на своём — страницу и будет, вертя головой, сравнивать?

                    хотя, конечно, бывают люди, которые не понимают, почему сайт дома по-другому выглядит. тут надо или объяснить или попросить показать в сравнении с макетом) цвета совпадут, клиент в недоумении, задача выполнена
                      0
                      но вообще, я придерживаюсь мнения, что пиксель-пёрфект — недосягаемая утопия. недосягаемая потому что не необходима
                        –1
                        Пиксель-перфект - это мелочь. При создании любого продукта таких мелочей сотни. Из сотен мелочей строится продукт. Крупных и сложных вещей немного, ими занимаются серьезные специалисты, они работают, о них много думать не приходится.

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

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

                          не каждый дизайнер специалист, не каждый дизайнер понимает, что такое вёрстка, не каждый дизайнер советуется с верстальщиком.

                          примеры пиксель-пёрфект вёрстки, пожалуйста
                            0
                            Не каждый - не то слово. Их очень мало!
                            Будем надеться на благоразумие "серьезных заказчиков".
                    0
                    А не стоит брать цвета. На самом деле и пиксель заказчика не волновал бы, если бы он был уверен, что версткой занимаются профессионалы. Но он не знает. Пиксели - всего лишь проверка того, что работа выполнена качественно. Просто способ с минимумом затрат - установить жесткие рамки.
                  0
                  Абсолютно точно! :D
                    0
                    согласен. как добиться попиксельной точности при «резиновой» вёрстке? и вообще как её в таком случае воспринимать, эту точность. )
                      +1
                      Элементарно — подогнать ширину окна, совмещая выравненные направо блоки с аналогичными на макете.

                      Опять же это применимо если вы действительно хотите совмещать макет с результатом, а не просто ищете способ отказать заказчику в этой просьбе.
                        0
                        А на всех остальных размерах пусть расползается как хочет. У нас же пиксель-перфект, мы профессионалы!
                      0
                      Верно подмечено. Требования попиксельной точности можно предъявлять только к "нерезиновым" блокам сайта. И то...
                        0
                        В дополнение: шрифт в photoshop'е и в браузере это вещи разные
                          0
                          Пиксель пикселю рознь. Требование верстать пиксель в писксель мне кажется придумано ленивыми (или не желающими заморачиваться) заказчиками для верстальщиков, которые не ориентируются в дизайне и не могут самостоятельно определить где дизайнер расчитал до пикселя размер, а где взял на глазок. (также случай подходит под вариант когда с к верстальщику нет достаточного доверия и взаимопонимания).
                          Если есть взаимопонимае и верстальщик понимает что хотел дизайне - пиксель в пиксель - бред чистой воды.
                            0
                            Заказчик или менеджер довольно часто шлётся лесом, когда присылают одну картинку, наложенную поверх другой, т.к. если обычно вглядеться в ТЗ - то там и шрифты в em и вёрстка резиновая... Естественно, какие-то части и при таком ТЗ будут стоять там, где надо, но далеко не все...
                            +4
                            Есть ещё один универсальный способ — просто наложить окно браузера на окно просмотрщика макета и добавить окну браузера прозрачности. Я делаю это с помощью Compiz удерживая кнопку Alt на клавиатуре и одновременно крутя колесо мыши. Уверен, что подобное решение при желании вы сможете реализовать и на других ОС.

                            PS второй удобный инструмент в составе Compiz это экранная лупа — если покрутить колесо мыши удерживая кнопку "Win", то можно увеличить нужный кусок экрана разглядев каждый нужный пиксел. (Лично я отключил сглаживание точек у этого инструмента, чтобы оно не мешало рассматривать экран попиксельно)
                              +1
                              это всё сложно реализовать в M$
                                –1
                                не верю :)
                                  +1
                                  За что минус? Не верите, что я не верю? :)
                                  Или не верите, что существует программа, которая может менять прозрачность окон под виндой?
                                  Или может с тех пор, как я ушёл с винды там отменили экранную лупу? :)
                                  +1
                                    –1
                                    Хм.. что сложного, сам делал такую прогу, вешал на хоткеи и скрывал в трей.
                                    10 строчек на дельфине с ВинАПИ.
                                      0
                                      бред. экранная лупа на винде есть, прозрачность окон рулится элементарно(есть куча программ для этого)
                                    +6
                                    требование попиксельной точности - это идиотизм
                                      +2
                                      сотрудники Автоваза с Вами полностью солидарны!
                                      • UFO just landed and posted this here
                                        • UFO just landed and posted this here
                                            0
                                            Это называется эксклюзив =)
                                            "Каждый наш автомобиль уникален" =)
                                          +1
                                          сотрудники автоваза несут ответственность за жизни людей
                                        0
                                        эмм... я что-то упустил, или body { background-image: url('images/dev/maket.jpg') } является самым простым решением задачи? :) или не катит, потому что контенту надо будет задавать дополнительный контейнер? :)
                                          0
                                          Этот способ сразу отпадает, как только мы начинаем использовать background у блоков на странице. Как пример — цветная плашка, а на ней определённым образом расположенные элементы.
                                            +1
                                            хмм... да, проблемс :) ну собственно, можно же наложить тогда макет сверху и задать ему прозрачность средствами css :)

                                            зы: статья мне понравилась, просто думаю над другими вариантами :)
                                              0
                                              Собственно это и делает скрипт — накладываел слой с макетом сверху и задаёт прозрачность.
                                              Только это более автоматизировано.
                                                0
                                                :) затупил. спасибо, что поправили.
                                          0
                                          Я предпочитаю использовать модульную сетку, т. к. в макетах часто используется много "рыбного" материала и сайт может быть резиновым.
                                            0
                                            Задумка дизайнера тоже должна выполняться, и свёрстаный макет должен выглядеть как макет, т. е. совпадать с ним при заданном разрешении. Естественно, если он должен тянуться — он будет тянуться, иначе как таковой «веб-вёрстки», даже точнее «разметки» бы не существовало.

                                            У модульной сетки несколько иная задача.
                                            +1
                                            div.innerHTML( '<style> ...' );
                                            style= div.firstChild;
                                              0
                                              Да, я почти так делал (только в IE со style'ом в начале div'а не работает, нужно добавить br или form, например).

                                              Но согласитесь, это не красиво. И ради того, чтобы IE обманывали такими банальными хаками MS не стоило городить весь этот огород с «безопасностью».
                                                0
                                                гм.. забавно..
                                                как вариант: http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx
                                                  0
                                                  createStyleSheet создаёт <link> с href'ом, указанным в первом параметре — так что не вариант (к тому же, это ie-only функция)
                                                    0
                                                    ты невнимательно прочитал её описание =)
                                              –1
                                              Кажется, онанизм ухудшает зрение. Картинку плохо видно.
                                                0
                                                а есть ли возможность проверить дизайнера на "обратное"?
                                                то есть на возможность сверстать его дизайн пиксель в пискель.

                                                причем быстрый.
                                                  0
                                                  Постольку поскольку мы живём в мире иллюзий, то совершенно не нужно делать сайт в точности похожий на макет. Но нужно сделать так (конечно, если макет хорош), чтобы никто с первого взгляда не смог назвать значимых различий между сайтом и макетом.

                                                  То есть важно сохранять не точки а пропорции для сохранения художественности. Или нерезинку. Конечно же со временем странички станут совсем векторными (SVG) и тогда никакой отдельной резинистости, только нормальное увеличение. Флэш ввиду неиндексируемости и геморности никак не подходит. Хотя бы за то, что во флэше не пашут кнопки вперёд-назад и нельзя скопировать ссылку, его нельзя считать адекватным для сайтостроения.
                                                    0
                                                    Яндекс и гугл индексируют флэш. Во влэше можно сделать переход по стрелкам браузера вперед назад(тому подтверждения статья Михаила Антипина (Nox Noctis) http://noregret.org/tutor/gentle/). Можно копировать ссылку если ставить форматирование текста как html. И его вполне можно считать адекватным для сайтостроения. И во флэше сразу идет верстка пиксель в пиксель.
                                                      0
                                                      Эмм, как-то не ощутил по результатам поиска. Ещё ни разу в жизни не попадал с Яндекса и гугля на нужную страницу флэшевого сайта. Понятно что можно, а делают ли? Да и зачем всё это, если SWF проблемно развернуть в читаемый текст (у меня вот мания в блокнотике фиксить )))) Ну а загонять хтмл во флэш — тот ещё метод.
                                                        0
                                                        Темнеменее они обладают алгоритмами поиска во флэш страницах и если человек грамотно подходит к разработке флэш сайта, то он использует все необходимые инструменты чтобы это был сайт а не презентиция. такие сайты и получают FWA. Скоро выход Adobe Flash CS4 где смениться формат исходного файла флэша и который можно будет редактировать ручками, хоть через блокнот.
                                                        0
                                                        ммм... а средняя кнопка мышки? )
                                                        чем дальше люди уходят от plain html - тем больше страдают простые юзеры )
                                                        некоторые моменты внедряются в броузеры и привычки людей быстрее, чем люди пытаются улучшить флеш. все-таки он еще сильно отстает по навигации от html кода.
                                                        0
                                                        Откуда такая уверенность про SVG? Top4top был насквозь "профлэшен" и смотрелся отвратительно.
                                                          0
                                                          Не факт, что SVG, просто других претендентов пока не ощущаю. SVG можно и в блокнотике поредактировать и под разными платформами в разных утилитах, а со флэшем не катит.

                                                          Топфотоп просто унылый. Наверное потому что всё, что ни делает Дибров — сплошное уныние. Он сам какой-то мятый и это отражается на всём, чего он касается. Я помню он ещё певцом быть хотел, я его клип по ящику видел — вот в точности топфотоп.

                                                          К тому же флэш слишком слепит возможностями (покрутить, заэффектить, заанимировать) и это мешает клиенту и разработчику больше времени уделить удобству и контенту.
                                                            0
                                                            Да, Дибров - клинический случай =) Столько пафоса было заложено в top4top, в итоге ушел в небытие.
                                                              0
                                                              Иллюзия крутого сайта есть, а по сути слишком сильно похоже на телевизор
                                                        0
                                                        Супер!!
                                                        Спасибо
                                                        • UFO just landed and posted this here
                                                            0
                                                            Во-первых, из-за этого расширения все заказчики начнут кидать понты, мол у тебя тут пару пикселей не сходиться. И снова придется объяснять, где проходит граница между задумкой дизайнера и слепой уверенностью в собственной правоте.

                                                            Во-вторых кто-то будет разъяснять дизайнерам о подготовке макетов к попиксельной верстке? Большинству абсолютно до фени дрязги верстки и лепят неравномерные градиенты, полупрозрачные плашки на графический фон, и чекбоксы из сна наркомана.
                                                              0
                                                              Разрежьте макет в фотошопе слайс-тулом, будет вам пиксел в пиксел. только оно надо?
                                                                0
                                                                Согласен с leMar по поводу неадекватных заказчиков, но для себя я нахожу этот аддон очень полезным, хотябы потому что можно представить на одной картинке "как есть" и "как должно быть".
                                                                  0
                                                                  Добавил скрипт — на выходе пустое body…

                                                                  Only users with full accounts can post comments. Log in, please.