Более быстрый способ разработки и тестирования таблиц стилей печати (избегайте предварительного просмотра каждый раз)?

в Firefox вы можете ввести Shift+F2 чтобы открыть командную строку панели инструментов разработчика, а затем введите media emulate print

вы также можете эмулировать другие типы носителей таким образом.

Firefox + панель инструментов веб-разработчика расширение имеет возможность включить / отключить различные таблицы стилей.

посмотрите в меню CSS. Существует меню для отключения и включения отдельных таблиц стилей и меню" отображение по типу носителя".

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

для Chrome, есть порт, что расширение. Из того, что я могу сказать с версией Chrome, вы можете выбрать "Показать стили печати"

Я бы не использовал какой-либо метод тестирования, который не включает предварительный просмотр. Слишком много различий: фоновые изображения вообще не работают в печати, но отображаются в обычных контекстах экрана, являясь главным среди них.

В Chrome,control+p сразу же переходит к предварительному просмотру. (Просто забудьте о наведении мыши на строку меню). Это довольно просто.

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

просто для меня (не имеющего @screen запасные части или аналогичные¹)С FF:

• поставить @media print { ... часть в конце вашего контента CSS
• out-comment только объявление обертки /*@media print {*/ ... /*}*/
  • таким образом, применяя материал печати к вашим стилям немедленно переопределяя их, где это применимо
• (я использую LiveReload мой страница браузера обновляется сразу после сохранения изменения)
• (иначе, если вы не используете LiveReload:) нажмите клавишу CTRL+R обновить страницу
• теперь вы уже можете сделать много типичных настроек CSS печати (стиль шрифта, размер шрифта, интервалы, цвета) где еще не нужен предварительный просмотр
• пресс ALT+F+V открыть предварительный просмотр и ALT+W чтобы закрыть его снова

¹: если у вас есть их, out- / in-commenting те, в зависимости от вашего тестируемого носителя, не может быть большой проблемой в противном случае

Как описано в этом посте (использование инспектора элементов Chrome в режиме предварительного просмотра?), вы можете использовать chrome, чтобы просто эмулировать таблицу стилей печати. Это здорово, так как вы можете использовать инспектор, чтобы увидеть, откуда берутся стили, а не угадывать, когда вы видите диалоговое окно печати.

откройте диалоговое окно Параметры переопределения, щелкнув значок шестеренки в правом нижнем углу инспектора элементов Chrome. Выберите печать в качестве носителя тип.

потрясающе!

по крайней мере, в Chrome: во время разработки добавьте к тегу body onload="window.print()". Это приведет к открытию режима печати сразу после обновления.

к сожалению, не похоже, что инструменты разработчика очень полезны, так как это по существу встроенный PDF.

кстати есть способы устранить Шаг 2. Одним из популярных является нагрузка на печень.

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

в Chrome 62 cmd-R / cmd-P хорошо работает на Mac, чтобы вызвать хороший предварительный просмотр страницы в стиле @media print.

это доступно через вертикальный elipsis в правом верхнем углу самого окна браузера (не Инструменты разработчика) / печать...

используйте esc для отмены окна предварительного просмотра.

Итак, для моего рабочего процесса с IntelliJ IDEA и Chrome это: УМК-ов, КМД-вкладка, КМД-Р, УМК-п, ЭСК, КМД-вкладка и я снова в IDE.

Chrome 62 В Windows 10 имеет тот же отпечаток... меню там же, доступно с помощью ctrl-p: