it-swarm.com.ru

Предложения по отладке таблиц стилей печати?

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

  • Правка код
  • команда-вкладка
  • перезагружать

но весь этот процесс становится гораздо труднее, когда вы пытаетесь напечатать:

  • Правка код
  • команда-вкладка
  • перезагружать
  • распечатать
  • косоглазие при предварительном просмотре изображения
  • открыть PDF в окне предварительного просмотра для дальнейшей проверки

Есть ли здесь инструменты, которые мне не хватает? Есть ли у инспектора WebKit флажок "Притворись, что это носитель с подкачкой"? Есть ли какая-то магия, которую может сделать Firebug (дрожь)?

237
Jim Puls

Есть опция для этого в инспекторе Chrome.

  1. Откройте инспектор DevTools (mac: Cmd + Shift + C окна: Ctrl + Shift + C)
  2. Нажмите на значок режима переключения устройства  Toggle device mode button, расположенный в верхнем левом углу панели DevTools. (окна: Ctrl+Shift+MMac: Cmd+Shift+M).
  3. Нажмите Другие изменения  more overrides значок в верхнем правом углу окна просмотра браузера, чтобы открыть ящик devtools.
  4. Затем выберите Media в блоке эмуляции и установите флажок CSS media .

    enter image description here

Это должно сделать свое дело.

Обновление: меню изменились в DevTools. Теперь его можно найти, нажав на меню "три точки" в верхнем правом углу> Дополнительные инструменты > Настройки рендеринга> Эмуляция носителя> Печать.

Источник: страница Google DevTools *

323
Rafael Nogueira

Я предполагаю, что вы хотите максимально контролировать печатное окно, не используя подход HTML к PDF ... Используйте экран @media для отладки - @media print для окончательного css

Современные браузеры могут быстро оценить, что произойдет во время печати, используя дюймы и pts в @media query.

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

Как только ваш браузер отобразит "дюймы", у вас будет лучшее представление о том, чего ожидать. Этот подход должен почти закончить метод предварительного просмотра. Все принтеры будут работать с блоками pt и in, а использование метода @media позволит вам быстро увидеть, что произойдет, и соответствующим образом настроить. Firebug (или эквивалент) абсолютно ускорит этот процесс. Когда вы добавили свои изменения в @media, у вас есть весь код, необходимый для связанного CSS-файла, с использованием атрибута media = "print" - просто скопируйте/вставьте правила экрана @media в указанный файл.

Удачи. Сеть не была создана для печати. Создание решения, которое доставляет весь ваш контент, стили, равные тем, которые видны в браузере, иногда могут быть невозможны. Например, гибкий макет для преимущественно 1280 x 1024 аудитории не всегда легко переводится на аккуратную и аккуратную лазерную печать 8,5 x 11.

Ссылка W3C для пурусаля: http://www.w3.org/TR/css3-mediaqueries/

72
Dawson

В Chrome v41 он есть, но в немного другом месте.

enter image description here

19
johntrepreneur

Chrome 48 вы можете отлаживать стили печати на вкладке Rendering.

Щелкните значок меню в правом верхнем углу инспектора и Настройки рендеринга.

Редактировать
Для Chrome 58 местоположение изменилось на Веб-инспектор> Меню> Дополнительные инструменты> Рендеринг

19
minlare

Существует простой способ отладки таблицы стилей печати без переключения какого-либо атрибута медиа в вашем HTML-коде (конечно, как уже отмечалось, это не решает проблему ширины/страниц):

  • Используйте расширение Firefox + Web Developer.
  • В меню веб-разработчика выберите CSS/Показать CSS по типу носителя/Печать
  • Вернитесь в меню Web Developer, выберите Options/Persist Features

Теперь вы просматриваете CSS для печати и можете неограниченно обновлять свою страницу. Когда вы закончите, снимите флажок "Persist Features" и перезагрузите компьютер, вы снова получите CSS экрана.

НТН.

16
Capsule

Пользовательский интерфейс Chrome снова снова , начиная с v53.

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

Обратите внимание, что это меню ... в панели инструментов разработчика , а не меню ... в Chrome Панель браузера.

Printer preview as of v53 on MacOS

Теперь прокрутите вниз в разделе рендеринга. Это часто ниже сгиба.

11
TrophyGeek

После ответа от rflnogueira текущие настройки Chrome (40.0. *) Будут выглядеть следующим образом:

chrome print css emulation

8
Anil Vangari

Просто покажите таблицу стилей печати в вашем браузере, используя media="screen" во время отладки. В режиме предварительного просмотра печати используется тот же механизм рендеринга, что и в обычном режиме просмотра, поэтому с его помощью можно получить точные результаты.

5
Tatu Ulmanen

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

Вот пример того, как это можно сделать с помощью JavaScript/jquery

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
            a.document.open("text/html");
            a.document.write("<html><head>");
            a.document.write('<link rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });
0
Blowsie