![форма.png форма.png](/upload/medialibrary/4fb/4fbad3052d9578f255cd1e8919911581.png)
Проблема: при выводе на печать видим что-то такое:
![print-1.png print-1.png](/upload/medialibrary/b18/b186a273d20ba7090167ef95ba026ca8.png)
- На печать выводится много лишней информации: меню, строка поиска и тд.
- Разноцветные надписи надо привести к ч/б виду
- По умолчанию современные браузеры убирают фон страницы (на практике: игнорируют тэг background), однако проблема возникает в старых браузерах
@media screen { }Проще говоря, браузеры всех устройств с экранами будут брать стиль отсюда. Теперь ниже печатаем конструкцию для вывода на печать:
@media print { }…и в нем пишем новый стиль для вывода на печать, который будет обрабатываться только принтерами. Я сделал невидимыми все ненужные блоки, изменил цвет текста на черный, прописал отсутствие фона блока, выводимого на печать и немного изменил форматирование текста, чтоб форма занимала всю страницу и не выходила за её пределы. Весь стиль у меня занял всего несколько строк:
@media print { #pagetitle { color: black; margin-left: 5%; } #panel, #header-wrapper, #left-column, #print-btn, #breadcrumb-search, #footer{ display: none; } #print { background: none; margin-left: 5%; margin-right: 5%; width: 90%; } }Теперь вывод на печать выглядит так:
![ptint-2.png ptint-2.png](/upload/medialibrary/87a/87a217db0a4eda8ae288e3c97096dbf9.png)