Более быстрый способ разработки и тестирования таблиц стилей печати (избегать предварительного просмотра печати каждый раз)?
Это мой процесс прямо сейчас:
- Сохранить изменения в print.css
- Откройте браузер и обновите страницу.
- Щелкните правой кнопкой мыши и выберите "Печать"> "Предварительный просмотр" (Firefox, но любой браузер на самом деле)
Это шаг 3, который меня беспокоит, и мне интересно, можно ли его вырезать из процесса с помощью плагина или чего-то еще. Просто выберите просмотр страницы как печатного носителя, а затем просто обновите страницу, чтобы увидеть изменения.
Как вы тестируете свои таблицы стилей печати? Вы всегда нажимаете кнопку предварительного просмотра после обновления?
10 ответов
Вы можете использовать Chrome Media Type Emulation, как принято в посте. См. Print css в браузере.
ОБНОВЛЕНИЕ 21/11/2017
Обновленный документ DevTools можно найти здесь: Просмотр страницы в режиме печати.
Чтобы просмотреть страницу в режиме печати:
1. Откройте меню команд. (tl; dr Cmd + Shift + P (Mac) или Ctrl + Shift + P (Windows, Linux))
2. Начните вводить Rendering и выберитеShow Rendering,
3. В раскрывающемся списке " Эмулировать CSS- носитель" выберите " Печать".
ОБНОВЛЕНИЕ 29/02/2016
Документы DevTools перемещены, и приведенная выше ссылка предоставляет неточную информацию. Обновленные документы по эмуляции медиа-типов можно найти здесь: Предварительный просмотр стилей для большего количества медиа-типов.
Откройте секцию эмуляции DevTools, щелкнув значок Дополнительные переопределения ••• Дополнительные переопределения в правом верхнем углу окна просмотра браузера. Затем выберите Media в эмуляторе.
ОБНОВЛЕНИЕ 12/04/2016
К сожалению, похоже, что документы не были обновлены в отношении эмуляции печати. Однако эмулятор печатных носителей перемещен (снова):
- Открыть Chrome DevTools
- Хит Esc на клавиатуре
- Нажмите ⋮ (вертикальный многоточие)
- Выберите Rendering
- Tick Emulate печатные СМИ
Смотрите скриншот ниже:
ОБНОВЛЕНИЕ 28/06/2016
Документы Google для разработчиков по Chrome DevTools и параметр "Эмуляция мультимедиа" были обновлены для Chrome> 51:
https://developers.google.com/web/tools/chrome-devtools/settings?hl=en
Чтобы просмотреть страницу в режиме предварительного просмотра, откройте главное меню DevTools, выберите " Дополнительные инструменты" > " Параметры рендеринга", а затем включите флажок " Эмулировать носитель" с раскрывающимся меню для печати.
ОБНОВЛЕНИЕ 24/05/2016
Наименование настроек изменилось еще раз:
Чтобы просмотреть страницу в режиме предварительного просмотра, откройте главное меню DevTools, выберите " Дополнительные инструменты" > " Рендеринг", а затем установите флажок " Эмулировать CSS-медиа", а в раскрывающемся меню выберите " Печать".
В Firefox вы можете ввести Shift+F2 чтобы открыть командную строку панели инструментов разработчика, а затем введите media emulate print
Вы также можете эмулировать другие типы носителей таким образом.
Расширение панели инструментов Firefox + Web Developer позволяет включать / отключать различные таблицы стилей.
Посмотрите в меню CSS. Существует меню для отключения и включения отдельных таблиц стилей, а также меню "Отображение по типу мультимедиа".
Также, чтобы просто уменьшить количество шагов, чтобы добраться до PrintPreview в Firefox, попробуйте расширение PrintPreview, которое создаст кнопку панели инструментов.
Для Chrome есть порт этого расширения. Из того, что я могу сказать с версией Chrome, вы можете выбрать "Показать стили печати"
Я бы не стал использовать какой-либо метод тестирования, который не предусматривает предварительный просмотр. Слишком много различий: фоновые изображения вообще не работают при печати, но отображаются в нормальных контекстах экрана, являясь главными среди них.
В Chrome control+p сразу идет к предварительному просмотру. (Просто забудьте навести курсор на строку меню). Это довольно легко.
Вы можете просто отключить стили экрана и изменить тип носителя на "экран" для таблицы стилей печати во время тестирования. Это будет не то же самое, что реальный предварительный просмотр печати (разрывы страниц, ширина документа и т. Д.), Но это все же дает вам неплохую идею.
просто для меня (не имея @screen части или аналогичные 1) с FF:
- положить
@media print { ...часть в конце вашего CSS контента - комментировать только объявление оболочки
/*@media print {*/ ... /*}*/- таким образом применяя материал печати к вашим стилям, немедленно переопределяя их, где это применимо
- (Я использую LiveReload, поэтому страница моего браузера обновляется сразу после сохранения изменений)
- (в противном случае, если не используется LiveReload:) нажмите
CTRL+Rперезагрузить страницу - теперь вы уже можете выполнить множество типичных настроек CSS для печати (стиль шрифта, размер шрифта, интервалы, цвета), когда вам пока не требуется предварительный просмотр.
- Нажмите
ALT+F+Vоткрыть предварительный просмотр иALT+Wзакрыть его снова
1: если они у вас есть, то их комментирование, в зависимости от того, что вы тестировали, может не иметь большого значения, иначе
Как описано в этом другом посте ( Использование инспектора элементов Chrome в режиме предварительного просмотра?), Вы можете использовать chrome для простой эмуляции таблицы стилей печати. Это замечательно, так как вы можете использовать инспектор, чтобы увидеть, откуда поступают стили, а не догадываться, когда увидите диалоговое окно печати.
Откройте диалоговое окно "Параметры переопределения", щелкнув значок шестеренки в правом нижнем углу инспектора элементов Chrome. Затем выберите печать в качестве целевого типа носителя.
Потрясающие!
По крайней мере, в Chrome: во время разработки добавьте тег body onload="window.print()", Это приведет к открытию режима печати сразу после обновления.
К сожалению, не похоже, что инструменты разработчика широко используются, так как это по сути встроенный PDF.
Кстати, есть способы устранить шаг 2. Одним из популярных является LiveReload.
В Chrome 62 cmd-R/cmd-P хорошо работает на Mac, чтобы получить хороший предварительный просмотр страницы в стиле печати @media.
Это доступно через вертикальный элипсис в правом верхнем углу самого окна браузера (не Developer Tools) / Печать...
Используйте Esc, чтобы отменить окно предварительного просмотра.
Итак, для моего рабочего процесса с IntelliJ IDEA и Chrome это: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab и я снова в IDE.
Chrome 62 в Windows 10 имеет то же самое меню Print... в том же месте, доступном с помощью ctrl-p:
Вы можете временно удалить свою обычную таблицу стилей и загрузить только печатную таблицу с обычным тегом ссылки.