Швидший спосіб розробити та протестувати таблиці стилів друку (уникати попереднього попереднього друку)?


179

Зараз це мій процес:

  1. Збережіть зміни до print.css
  2. Відкрийте веб-переглядач та оновіть сторінку.
  3. Клацніть правою кнопкою миші та виберіть Друк> Попередній перегляд друку (Firefox, але дійсно будь-який браузер)

Цей крок 3 клопоче мене, і мені цікаво, чи можна вирізати його з процесу за допомогою плагіна чи чогось іншого. Просто виберіть перегляд сторінки як друкованого носія, а потім просто оновіть, щоб побачити зміни.

Як ви протестуєте свої таблиці стилів друку? Ви завжди натискаєте попередній перегляд друку після оновлення?


Дякую за всі пропозиції. Мені подобається, якщо Mozilla додасть налаштування для розробника, щоб увімкнути можливості "Оновити" у вікні попереднього перегляду друку (не за замовчуванням, щоб уникнути плутанини кінцевого користувача, звичайно). Це моє ідеальне рішення, тому що (погоджуючись з Фаустом) зазвичай мені потрібно побачити це в Попередньому перегляді друку, щоб точно показати , як воно буде відображатися (зображення на заднім полі, розриви сторінок, поля тощо). Chrome може трохи допомогти, оскільки він показує попередній перегляд за замовчуванням. Я також розгляну цей додаток для Firefox PrintPreview, рекомендований slolife.
Михайло

Це не працюватиме для Mac, оскільки немає опції попереднього перегляду друку, проте у діалоговому вікні друку може бути опція PDF, де ви можете відкрити попередній перегляд, "надрукований" у тимчасовий PDF-файл. Не впевнений, чи вбудована ця функція в OSX чи тому, що в мене встановлений Acrobat.
Ніл Монро

Тільки роблячи уточнення, виявляється, що в OSX параметр «Попередній перегляд друку» недоступний у меню «Файл ...», але з розширенням «Попередній перегляд друку / друку» ви можете мати кнопку, яка його запускає. addons.mozilla.org/en-US/firefox/addon/printprint-preview
Ніл Монро

Відповіді:


208

Ви можете використовувати емуляцію типу медіа Chrome, як прийнято у публікації Див. Css-файл друку у браузері .

ОНОВЛЕННЯ 21.11.2017

Оновлений документ DevTools можна знайти тут: Перегляд сторінки в режимі друку .

Щоб переглянути сторінку в режимі друку:
1. Відкрийте командне меню . ( tl; dr Cmd+Shift+P (Mac) або Ctrl+Shift+P(Windows, Linux))
2. Почніть вводити Renderingта вибирати Show Rendering.
3. Для спаду Emulate CSS Media виберіть друк .


ОНОВЛЕННЯ 29.02.2016

Документи DevTools перемістилися, і вищевказане посилання надає неточну інформацію. Оновлені документи щодо емуляції типів мультимедіа можна знайти тут: Стилі попереднього перегляду для інших типів носія .

Відкрийте ящик емуляції DevTools, натиснувши на піктограму Додаткові відмінки ••• більше перекриття у верхньому правому куті вікна перегляду браузера. Потім виберіть Медіа у вікні емуляції.

ОНОВЛЕННЯ 12.04.2016

На жаль, схоже, документи не оновлювались щодо емуляції друку. Однак емулятор друкованої медіа перемістився (знову):

  1. Відкрийте Chrome DevTools
  2. Удар esc на клавіатуру
  3. Клацніть (вертикальний еліпсис)
  4. Виберіть Надання
  5. Поставте галочку Емуляція друкованих носіїв

Дивіться знімок екрана нижче:

налаштування візуалізації 04.12.2016

ОНОВЛЕННЯ 28.06.2016

Документи розробників Google навколо Chrome DevTools та параметр "Емуляція медіа" оновлено для Chrome> 51:

https://developers.google.com/web/tools/chrome-devtools/settings?hl=uk#emulate-print-media

Щоб переглянути сторінку в режимі попереднього перегляду друку, відкрийте головне меню DevTools, виберіть Додаткові інструменти > Настройки візуалізації , а потім увімкніть прапорець Емуляція медіа за допомогою спадного меню, встановленого для друку .

налаштування візуалізації 28.06.2016

ОНОВЛЕННЯ 24.05.2016

Ім'я налаштувань знову змінилося:

Щоб переглянути сторінку в режимі попереднього перегляду друку, відкрийте головне меню DevTools, виберіть Більше інструментів > Візуалізація , а потім увімкніть прапорець Емуляція CSS Media за допомогою випадаючого меню, встановленого для друку .

емуляція CSS-медіа


2
@SupaIrish Так, для Firefox дивіться відповідь Шімона.
djule5

Документація повністю застаріла, і ніде всередині області "більше перекриття" немає емуляції css-медіа. Куди воно пішло?
TetraDev

2
Розташований під "консоллю (esc)", потім "3 вертикальними крапками", потім "рендерінг", потім "емуляція друкованих носіїв" внизу - чому так приховано, я поняття не маю.
TetraDev

Вибір цієї опції на ОСX, схоже, нічого не робить?
v3nt

165

У Firefox ви можете ввести Shift+F2 щоб відкрити командний рядок Панелі інструментів розробника, а потім ввестиmedia emulate print

Ви також можете імітувати інші типи носіїв таким чином.


3
Я помітив, що це може не відображати той самий вигляд, який передбачено в попередньому перегляді друку - особливо, якщо мова йде про додаткову пробіл - переконайтеся, що попередній перегляд друку не відрізняється після завершення цього кроку.
jave.web

15
На жаль, GLCI було скинуто з Firefox з версією 62. Перетягування.
zerpsed

4
Як увімкнути це без GLCI (shift + F12)?
StR

3
@Str Ви можете емулювати стилі друку в Firefox ще один спосіб в даний час: stackoverflow.com/questions/47877112 / ...
TylerH

2
Я щойно перевірив те, що сказав @TylerH у Firefox v68, і це працює.
StR

22

Панель інструментів Firefox + Web DeveloperРозширення має можливість вмикати / вимикати різні таблиці стилів.

Подивіться у меню CSS. Існує меню для відключення та включення окремих таблиць стилів, а також меню "Відображення за типом медіа".

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

Для Chrome є порт цього розширення . З того, що я можу сказати у версії Chrome, ви можете вибрати "Показати стилі друку"


12

Я б не використовував жодного методу тестування, який не передбачає попереднього перегляду друку. Існує занадто багато відмінностей: фонові зображення взагалі не працюють у друкованому вигляді, але відображаються у звичайних екранах, які є головними серед них.

У Chrome control+pпереходить до друку попереднього перегляду. (Забудьте, що ви збираєтеся до свого меню). Це досить просто.


Chrome напевно не дотримується того, що показано в емуляції носіїв друку. Я виявив, що якщо у вас немає функції переддруку хромованих медіа-запитів, що працює нижче 2 мс, зміни не зафарбують.
Камберлен

1
Проблема з попереднім переглядом друку полягає в тому, що він не дозволяє перевірити елементи, тому налагодження таких речей, як прокладка та поля, надзвичайно складно. Бачити ці елементи окремо - це найкраще, що ви можете мати при спробі налагодження проблем із полем.
Сейрія

6

Ви можете просто відключити стилі екрана та змінити тип медіа на "екран" для таблиці стилів друку під час тестування. Це не буде точно так само, як використання реального попереднього перегляду друку (розриви сторінки, ширина документа тощо), але це все ще дає досить гарну ідею.


5

простий для мене (не маючи @screenдеталей або подібних 1 ) з FF :

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

1 : якщо хтось має, те, що коментує / коментує, залежно від перевірених засобів масової інформації, інакше не може бути великою справою


3

Як описано в цій іншій публікації ( Використання Інспектора елементів Chrome у режимі попереднього перегляду друку? ), Ви можете використовувати хром, щоб просто імітувати таблицю стилів друку. Це чудово, оскільки ви можете використовувати інспектор, щоб побачити, звідки беруться стилі, а не здогадуватися, коли ви бачите діалог друку.

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

Дивовижно!


2

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

На жаль, не здається, що інструменти для розробників дуже корисні, оскільки це, по суті, вбудований PDF.

До речі, є способи усунути крок 2. Один з популярних - LiveReload.


0

Ви можете спробувати тимчасово видалити звичайний аркуш стилів і завантажувати в друкований файл лише тегом звичайного посилання.


0

У Chrome 62 cmd-R / cmd-P добре працює на Mac, щоб створити приємний попередній перегляд сторінки для стилю друку @media.

Це доступно через вертикальний еліпсис у верхньому правому куті самого вікна браузера (не Інструменти для розробників) / Друк ...

Використовуйте esc, щоб скасувати вікно попереднього перегляду.

Отже, для мого робочого процесу з IntelliJ IDEA та Chrome це: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab і я знову в IDE.

Chrome 62 у Windows 10 має те саме меню Друк ... у тому самому місці, доступне за допомогою ctrl-p: друк в Chrome 62

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.