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

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

• изменить код
• Команда-вкладка
• перезарядка

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

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

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

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

1. Откройте инспектор DevTools (mac: Cmd+ Shift+ C, windows: Ctrl+ Shift+ C)
2. Нажмите на значок режима устройства Toggle , расположенный в верхнем левом углу панели DevTools. (Windows: Ctrl+ Shift+ M, Mac: Cmd+ Shift+ M).
3. Нажмите на значок More overrides в верхнем правом углу окна просмотра браузера, чтобы открыть ящик devtools.

4. Затем выберите « Media» в эмуляторе и установите флажок « CSS media» .

   

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

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

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

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

Современные браузеры могут дать вам быстрый визуальный для того, что будет происходить во время печати с использованием дюймов и очков в @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/

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

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

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

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

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

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

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

НТН.

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

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

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

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

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

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

2019 - Обновленные инструкции

1. Инспектор Open Chrome
   • С Mac => option+ command+i
   • Из Windows =>F12

2. Нажмите на маленькие 3 точки, customize and control devTools

3. Выбрать More Tools

4. Выбрать Rendering

5. Прокрутите вниз, чтобы Emulate CSS Media

6. Выберите printиз стрелки вниз

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

Вот пример того, как это можно сделать с помощью 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();
        });

В DreamWeaver есть панель инструментов, на которой отображаются практически любые параметры рендеринга: экран, печать, карманные носители, проекционный экран, телепередачи, таблицы стилей desitn time и т. Д. Это то, что я использую, особенно потому, что оно: мгновенно показывает предварительный просмотр с 1 однократное нажатие кнопки.

Я использую макросы для многократной отправки нажатий клавиш и мыши. В Windows AutoHotKey - отличное программное обеспечение, а в OS X вы можете прочитать об Automator , альтернативном AHK для OsX .

В Windows (замените Ctrl на Cmd в OS X) «Ctrl-s / переключиться в окно Fx, где бы он ни находился в списке открытых окон / Ctrl-r», привязанный к 1 неиспользуемой клавише, позволяет избежать разочарований от неинтересных задач и в конечном итоге спасет мои руки из RSI :)