Пропозиції щодо налагодження таблиць стилів друку?

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

• змінити код
• команда-вкладка
• перезавантажити

але весь цей процес стає набагато складнішим при спробі друку:

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

Чи є тут інструменти, які мені не вистачає? Чи має інспектор WebKit прапорець "Зробити вигляд, що це заздалегідь підказка"? Чи є якась магія, яку Firebug ( здригання ) може зробити?

Для інспектора Chrome є варіант для цього.

1. Відкрийте інспектор DevTools (mac: Cmd+ Shift+ C, windows: Ctrl+Shift + C)
2. Клацніть піктограму режиму Toggle device , розташовану у верхньому лівому куті панелі DevTools. (windows: Ctrl+ Shift+ M, mac: Cmd+Shift + M).
3. Клацніть на Додаткові параметри іконку " у верхньому правому куті вікна перегляду браузера, щоб відкрити ящик для розробників.

4. Потім виберіть Медіа у вікні емуляції та встановіть прапорець CSS-медіа .

   

Це повинно зробити трюк.

Оновлення: Меню змінили в 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 х 1024 аудиторій не завжди легко переводить на приємний і акуратний 8,5 х 11 лазерний друк.

Посилання на W3C про помилку: http://www.w3.org/TR/css3-mediaqueries/

Chrome 48 ви можете налагоджувати стилі друку на вкладці Візуалізація .

Клацніть піктограму меню вгорі праворуч від інспектора та параметрів візуалізації .

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

У Chrome v41 він є, але в дещо іншому місці.

Існує простий спосіб налагодити таблицю стилів друку, не перемикаючи атрибут медіа у вашому HTML-коді (звичайно, як зазначалося, це не вирішує проблему з шириною / сторінками):

• Використовуйте розширення Firefox + Web Developer.
• У меню Веб-розробник виберіть CSS / Відображення CSS за типом носія / Друк
• Поверніться до меню веб-розробників, виберіть Опції / Зберегти функції

Тепер ви переглядаєте CSS для друку, і ви можете перезавантажити сторінку на невизначений термін. Як тільки ви закінчите, зніміть прапорець "Персистентські функції" та перезавантажте, ви знову отримаєте екранну CSS.

HTH.

Користувацький інтерфейс Chrome знову відрізняється від v53.

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

Зауважте, що це ... меню на панелі інструментів Dev, а не меню ... у панелі браузера Chrome.

Тепер прокрутіть вниз у розділі Візуалізація. Це часто внизу складки.

Після відповіді від rflnogueira, поточні налаштування Chrome (40.0. *) Виглядатимуть нижче:

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

2019 рік - оновлені інструкції

1. Відкрийте інспектор Chrome
   • З Mac => option+ command+i
   • З Windows =>F12

2. Клацніть на маленьких 3 крапки, customize and control devTools

3. Виберіть More Tools

4. Виберіть Rendering

5. Прокрутіть униз до Emulate CSS Media

6. Виберіть printстрілку вниз

Якщо у вас є функція друку, яка переписує вміст сторінки в нове вікно з посиланням на ваш аркуш стилю друку, ви отримаєте набагато краще уявлення про те, як виглядатиме його на папері, і ви зможете налагодити його з подобами firebug теж.

Ось приклад того, як це можна зробити за допомогою 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 є панель інструментів, яка показує практично будь-який потрібний параметр візуалізації: екран, друк, портативні носії інформації, екран проекції, телевізійний носій, аркуші стилів часу та ін. Це те, що я використовую, особливо тому, що він: миттєво показує попередній перегляд з 1 одним натисканням кнопки.

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

У Windows (замініть Ctrl на Cmd на OS X) "Ctrl-s / переключиться на вікно Fx, де б воно не було у списку відкритих вікон / Ctrl-r", пов'язане з 1 невикористаним ключем, уникне розладу від нецікавих завдань і в кінцевому підсумку врятує мою зброю від RSI :)