Css media print: CSS печатной версии страницы / Хабр

Содержание

@media | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	9.2+	1.3+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	all
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/media.html#at-media-rule

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.

Табл. 1. Типы носителей и их описание
Тип	Описание
all	Все типы. Это значение используется по умолчанию.
aural	Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
braille	Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheld	Наладонные компьютеры и аналогичные им аппараты.
print	Печатающие устройства вроде принтера.
projection	Проектор.
screen	Экран монитора.
tv	Телевизор.

Синтаксис

@media тип1 [, тип2] {
  Описание стиля 
}

Значения

После ключевого слова @media идет один или несколько типов носителя, перечисленных в табл. 1; если их больше одного, то они разделяются между собой запятой. После чего следуют обязательные фигурные скобки, внутри которых идет обычное описание стилевых правил.

Пример 1

XHTML 1.0CSS2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>@media</title>
  <style type="text/css">
   @media screen { /* Стиль для отображения в браузере */
    body {
     font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт */
     font-size: 0.9em; /* Размер шрифта */
     color: #000080; /* Цвет текста */
    }
    h2 {
     background: #faf0e6; /* Цвет фона под текстом */
     border: 2px dashed #800000; /* Рамка вокруг заголовка */
     color: #a0522d; /* Цвет текста */
     padding: 7px; /* Поля вокруг текста */
    }
    h3 {
     color: #556b2f; /* Цвет текста */
     margin: 0; /* Убираем отступы */
    }
    p {
     margin-top: 0.5em; /* Отступ сверху */
    }
   }
   @media print { /* Стиль для печати */
    body {
     font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
    }
    h2, h3, p {
     color: #000; /* Черный цвет текста */
    }
   }
  </style>
 </head>
 <body>
   <h2>Метод ловли льва в пустыне</h2>
   <h3>Метод последовательного перебора</h3>
   <p>Пусть лев имеет габаритные размеры LxWxH, где L — длина льва от кончика носа 
   до кисточки хвоста, W — ширина льва, а H — его высота.

  После чего пустыню разбиваем на 
   ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва. 
   Учитывая, что лев может находиться не строго на заданном участке, а одновременно на 
   двух из них, клетку для ловли следует делать повышенной площади, а именно 2Lx2W. 
   Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина 
   льва или, что хуже, только его хвост.</p>
   <p>Далее последовательно накрываем каждый из размеченных прямоугольников пустыни 
   клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура 
   поимки считается завершенной.</p>
 </body>
</html>

В данном примере вводится два стиля — один для изменения вида элементов при их обычном отображении в браузере, а второй — при выводе страницы на печать. При этом облик документа для разных носителей может сильно различаться между собой, например, как это показано на рис. 1 и рис. 2.

Рис. 1. Страница для отображения в окне браузера

Рис. 2. Страница, предназначенная для печати

Просмотреть документ, у которого CSS установлен как тип print можно, если распечатать определенную страницу. Или пойти на хитрость и временно заменить слово print на screen, чтобы отобразить итог в браузере. Именно так был получен рис. 2.

Команда @media применяется в основном для формирования одного стилевого файла, который разбит на блоки по типу устройств. Иногда же имеет смысл создать несколько разных CSS-файлов — один для печати, другой для отображения в браузере — и подключать их к документу по мере необходимости. В подобном случае следует воспользоваться тегом <link> с атрибутом media, значением которого выступают те же типы, перечисленные в табл. 1.

Пример 2

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>@media</title>
  <link media="print, handheld" rel="stylesheet" href="print.css">
  <link media="screen" rel="stylesheet" href="main. css">
 </head>
 <body>
  <p>...</p>
 </body>
</html>

В данном примере используются две таблицы связанных стилей, одна для отображения в браузере, а вторая — для печати документа и его просмотре на КПК. Хотя на страницу загружаются одновременно два разных стиля, применяются они только для определенных устройств.

@-правила

CSS по теме

@media

Статьи по теме

Типы носителей

Статьи по теме

Рецепты CSS

CSS учебник

Широкое развитие различных платформ и устройств заставляет разработчиков делать под них специальные версии сайтов, что достаточно трудоёмко и проблематично. Вместе с тем, времена и потребности меняются, и создание сайта для различных устройств является неизбежным и необходимым звеном его развития. С учетом этого в CSS введено понятие типа носителя, когда стиль применяется только для определённого устройства. В табл. 4.

1 перечислены некоторые типы носителей.

Табл. 4.1. Типы носителей и их описание
Тип	Описание
all	Все типы. Это значение используется по умолчанию.
aural	Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
braille	Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheld	Наладонные компьютеры и аналогичные им аппараты.
print	Печатающие устройства вроде принтера.
projection	Проектор.
screen	Экран монитора.
tv	Телевизор.

В CSS для указания типа носителей применяются команды @import и @media, с помощью которых можно определить стиль для элементов в зависимости от того, выводится документ на экран или на принтер.

Ключевые слова @media и @import относятся к эт-правилам. Такое название произошло от наименования символа @ — «эт», с которого и начинаются эти ключевые слова. В рунете для обозначения символа @ применяется устоявшийся термин «собака». Только вот использовать выражение «собачье правило» язык не поворачивается.

При импортировании стиля через команду @import тип носителя указывается после адреса файла. При этом допускается задавать сразу несколько типов, упоминая их через запятую, как показано в примере 4.1.

Пример 4.1. Импорт стилевого файла

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Импорт стиля</title>
  <style>
    @import "/style/main.css" screen; /* Стиль для вывода результата на монитор */
    @import "/style/smart.css" print, handheld; /* Стиль для печати и смартфона */
  </style>
 </head>
 <body>
  <p>. ..</p>
 </body>
</html>

В данном примере импортируется два файла — main.css предназначен для изменения вида документа при его просмотре на экране монитора, и smart.css — при печати страницы и отображении на смартфоне.

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

Команда @media позволяет указать тип носителя для глобальных или связанных стилей и в общем случае имеет следующий синтаксис.

@media тип носителя 1 {
  Описание стиля для типа носителя 1
}
@media тип носителя 2 {
  Описание стиля для типа носителя 2
}

После ключевого слова @media идёт один или несколько типов носителя, перечисленных в табл. 4.1, если их больше одного, то они разделяются между собой запятой. После чего следуют обязательные фигурные скобки, внутри которых идёт обычное описание стилевых правил.

В примере 4.2 показано, как задать разный стиль для печати и отображения на мониторе.

Пример 4.2. Стили для разных типов носителей

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Типы носителей</title>
  <style>
   @media screen { /* Стиль для отображения в браузере */
    BODY {
     font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт */
     font-size: 90%; /* Размер шрифта */
     color: #000080; /* Цвет текста */
    }
    h2 {
     background: #faf0e6; /* Цвет фона */
     border: 2px dashed maroon; /* Рамка вокруг заголовка */
     color: #a0522d; /* Цвет текста */
     padding: 7px; /* Поля вокруг текста */
    }
    h3 {
     color: #556b2f; /* Цвет текста */
     margin: 0; /* Убираем отступы */
    }
    P {
     margin-top: 0.5em; /* Отступ сверху */
    }
   }
   @media print { /* Стиль для печати */
    BODY {
     font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
    }
    h2, h3, P {
     color: black; /* Чёрный цвет текста */
    }
   }
  </style>
 </head>
 <body>
  <h2>Как поймать льва в пустыне</h2>
  <h3>Метод случайных чисел</h3>
  <p>Разделим пустыню на ряд элементарных прямоугольников, размер
     которых совпадает с размером клетки для льва.
  После чего
     перебираем полученные прямоугольники, каждый раз выбирая заданную
     область случайным образом. Если в данной области окажется лев,
     то мы поймаем его, накрыв клеткой.</p>
 </body>
</html>

Рис. 4.1. Страница для отображения в окне браузера

Рис. 4.2. Страница, предназначенная для печати

Просмотреть документ, у которого CSS установлен как тип print можно, если распечатать определенную страницу или воспользовавшись предварительным просмотром в браузере (Файл > Предварительный просмотр). Или пойти на хитрость и временно заменить print на screen, чтобы отобразить итог в браузере. Именно так был получен рис. 4.2.

Команда @media применяется в основном для формирования одного стилевого файла, который разбит на блоки по типу устройств. Иногда же имеет смысл создать несколько разных CSS-файлов — один для печати, другой для отображения в браузере — и подключать их к документу по мере необходимости. В подобном случае следует воспользоваться тегом <link> с атрибутом media, значением которого выступают все те же типы, перечисленные в табл. 4.1.

В примере 4.3 показано, как создавать ссылки на CSS-файлы, которые предназначены для разных типов носителей.

Пример 4.3. Подключение стилей для разных носителей

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Разные носители</title>
  <link media="print, handheld" rel="stylesheet" href="print.css">
  <link media="screen" rel="stylesheet" href="main. css">
 </head>
 <body>
  <p>...</p>
 </body>
</html>

В данном примере используются две таблицы связанных стилей, одна для отображения в браузере, а вторая — для печати документа и его просмотре на смартфоне. Хотя на страницу загружаются одновременно два разных стиля, применяются они только для определённых устройств.

Аналогично можно использовать и глобальные стили, добавляя атрибут media к тегу <style> (пример 4.4).

Пример 4.4. Стиль для смартфона

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Разные носители</title>
  <style media="handheld">
   BODY {
    width: 320px; /* Ширина страницы */
   }
  </style>
 </head>
 <body>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
   nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
   volutpat.  </p>
 </body>
</html>

В данном примере ширина для устройств типа handheld ограничена размером 320 пикселов.

Вопросы для проверки

1. Паша решил для своего сайта сделать версию для печати. Какую строку ему следует использовать в коде?

<link media=»printer» rel=»stylesheet» href=»print.css»>
@import «palm.css» print;
@import url(«printer.css») printer;
@media «palm.css» print;
<style media=»print»>

2. В какой момент подключается стиль для принтера?

Во время печати документа.
Сразу после загрузки страницы.
Как только браузер найдёт в коде подходящий стиль или ссылку на стилевой файл.
После обнаружения компьютером принтера.
После того, как принтер сообщит браузеру о своем наличии.

3. В какой строке кода содержится ошибка?

@media hanheld {
BODY {
color: #080;
background: #ffe;
}

@media hanheld {
BODY {
color: #080;
background: #ffe;
}

Ответы

1. @import «palm.css» print;

2. Во время печати документа.

3. }

@Media print css – 2 Ответа

Если это точная структура вашего html, то это будет работать на вас.

@media print {
  nav, 
  div > div:not(.to-print), 
  div + div:not(.to-print) {
      display: none;
  }
}
/* So you can see the styles working on the elements you want to hide outside of print */
  nav, 
  div > div:not(.to-print), 
  div + div:not(.to-print) {
      color: red;
  }

<nav>
  ....  navigation menu
</nav>
   <div>
         <div></div>
         <div>
           <h3>My div to display in print mode<h3>
           <section>
               <article>. ...content....</article>
           </section>
         </div>
         <div></div>
   </div>
   <div>
      .... HTML elements
   </div>

Вы можете распечатать @media и @media, чтобы определить, что будет напечатано и что будет показано на экране.

 @media print {
       .to-print {
           --css to show content--
       }
 }
 @media screen {
       .to-print {
           --css to not show content--
       }
 }

или

Создайте новый css и включите его так:

  <link rel="stylesheet" type="text/css" href="/print.css" media="print">

Ещё вопросы

1Android — Java — Доступ к закрытой переменной в Main-Activity из другого экземпляра класса
1ESRI Карта управления PanTo
0Попытка создать PIVOT в MySQL с помощью хранимой процедуры не приведет к добавлению столбцов, имеющих только нулевые записи.
0Проблемы с cin
0IE 10 не принимает пользовательское значение атрибута типа тега <li>
0Радиокнопки по обе стороны от JQuery Mobile Listview
0ng-выбран с истиной или ложью
1Создание XML в C # с использованием шаблонов с заполнителями
0Медленный запрос при использовании DISTINCT в MYSQL с различными другими условиями (10 миллионов записей)
0UiRouter — состояние равно нулю
1Как включить активную инициализацию при вызове метода Hibernate
1Изменить цвет фона каждой строки в ExpandableListView?
0Почему цикл for в c ++ обращается к области памяти в неинициализированном месте по сравнению с поведением обычного cout?
0JavaScript jQuery appendTo и плагин работают вместе
0Проверка определенного синтаксиса с помощью preg_match
1Вложенные лямбда-выражения
1Проверка, вводит ли пользователь одну и ту же строку дважды, используя массив
0Подсчитать элемент до смещения
0jQueryUI — автозаполнение с помощью файла json
1Записать в каждую таблицу CSV с последующим заголовком
0Получить значение текстового поля из ячейки
1Сделайте клик на символе табуляции и измените карету правильно
1Лучший способ улучшить суммирование элементов сложной матрицы в Numpy по сравнению с MATLAB
1Создание приложения для Android
0Используя регулярные выражения, замените CSS ID или класс на PHP
1стиль пейджера в скине gridview в asp. net
0Mysql-запрос для объединения двух таблиц, используя отношение многие ко многим
1Установка ширины и высоты JComponent в качестве переменных экземпляра
0Div разочаровывает с JQuery высота авто
0AngularJS V1.4.7 директива templateUrl динамический путь
1При получении ошибок типа не удается прочитать свойства ‘contact’ и ‘name’ из undefined
1Синхронные сокеты все еще допускают внешние действия пользователя?
1Вычислить корреляцию между функциями и целевой переменной
1Ошибка конфигурации: отсутствует регион в конфигурации (AWS)
1Почему иногда нам нужен префикс [attr.] Для привязки
0MySQL скрипт для добавления вывода запроса в качестве ввода в другой запрос
0Почему определение метода не является обязательным?
1Как запускать примеры проектов прямо с сайта разработчика в Eclipse?
0Отправка изображения с наложением текста в электронном письме
0Почему функция отображения мешает выравниванию текста?
1сравнение столбцов в 2 файлах CSV
0Редактировать текущий мастер формы для успешного размещения данных
1Как удалить строку из jtable
1NetBeans, работающий на Java-программе с main в непубличном классе
1Regex находит и печатает совпадения многогранника внутри одного совпадения
0Функция keyup выполнена, хотя она не вызывается
0Почему следующий SQL-запрос работает, несмотря на неправильный синтаксис?
0Как правильно сохранить строку с кавычками в базе данных для дальнейшего отображения?
1Нужна помощь в очистке моего кода парсера XML
0Заставить приложение angular js на heroku использовать http вместо https?

Как настроить таблицу стилей для печати — Smashing Magazine

Чтение за 20 мин. CSS, Техники, Распечатать
Поделиться в Twitter, LinkedIn

Об авторе

Кристиан когда-то был очень активен в сообществе Sketch и даже написал книгу о приложении для дизайна. В настоящее время работает евангелистом Gravit …

Подробнее о Кристиан ↬

В то время, когда кажется, что у каждого есть планшет, который позволяет потреблять все в цифровом виде, а единственная настоящая бумага, которую мы используем, — это туалетная бумага, может показаться странным писать о давно забытой привычке печатать веб-страницы. страница. Тем не менее, как ни странно это может показаться провидцам и производителям планшетов, мы все еще далеки от реальности безбумажного мира. [Ссылки проверены 08.02.2017] На самом деле тонны бумаги уплывают из принтеров по всему миру каждый день, потому что не у всех есть планшеты, а компьютер не всегда находится под рукой. Более того, многие из нас считают, что письменный текст лучше потребляется в автономном режиме.

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

Дополнительная литература на SmashingMag:

Дизайн для печати с помощью CSS
Дизайн макетов CSS с помощью Flexbox прост как пирог
Жаргон индустрии веб-дизайна: глоссарий и ресурсы
Вывод библиотек шаблонов на новый уровень

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

Таблица стилей для печати полезна, а иногда даже необходима. Некоторые читатели могут захотеть сохранить вашу информацию локально в виде хорошо отформатированного PDF-файла, чтобы обращаться к ней позже, когда у них не будет подключения к Интернету. Однако в эпоху адаптивного веб-дизайна о стилях печати часто забывают. Хорошей новостью является то, что таблицу стилей для печати на самом деле очень легко создать: вы можете следовать паре простых приемов CSS, чтобы создать приятный опыт для читателей и показать им, что вы приложили дополнительные усилия, чтобы сделать пользователя немного лучше. опыт. Итак, с чего начать?

Еще после прыжка! Продолжить чтение ниже ↓

Начало работы

Давайте рассмотрим процесс настройки таблицы стилей печати. Лучший способ — начать с нуля и полагаться на таблицу стилей браузера по умолчанию, которая по умолчанию довольно хорошо заботится о выводе на печать. В этом случае вставьте все объявления для печати в конце вашей основной таблицы стилей и заключите их в это четкое правило:

@медиа печать {
   …
}

Чтобы это сработало, мы должны подготовить две вещи:

Включить все стили экрана в отдельное правило @media screen {…} ;
Не указывать тип носителя для сокращенной таблицы стилей:

В редких случаях использование экранных стилей для печати является дизайн таблицы стилей печати. Хотя таким образом было бы проще сделать два вывода похожими по внешнему виду, решение не является оптимальным, поскольку экран и печать — это разные котлы. Многие элементы нужно будет сбросить или оформить по-другому, чтобы они нормально выглядели на листе бумаги. Но самыми большими ограничениями являются ограниченная ширина страницы и потребность в лаконичном и четком выводе. Лучше строить стили печати отдельно от стилей экрана. Это то, что мы будем делать на протяжении всей этой статьи.

Конечно, вы можете разделить объявления screen и print на два файла CSS. Просто установите тип носителя для вывода на экран на media="screen" и тип носителя для печати на media="print" , опустив его для первого, если вы хотите использовать таблицу стилей экрана.

Для иллюстрации я создал простой веб-сайт вымышленной винодельни Smashing Winery.

Наш пример сайта.

Все необходимое для корректного отображения экрана на месте. Но как только среда меняется с виртуальных пикселей на настоящую бумагу, единственное, что имеет значение, — это фактическое содержимое.

Две страницы неизмененного предварительного просмотра. Шапка пока не оптимальна, а основная навигация и футер лишние.

Поэтому в качестве первой задачи скроем все лишнее: а именно основную навигацию и футер.

заголовок навигации, нижний колонтитул {
дисплей: нет;
}

В зависимости от типа веб-сайта вы также можете рассмотреть возможность скрытия изображений по умолчанию. Если изображения большие, это было бы разумно, чтобы сэкономить вашим пользователям некоторые расходы на печать. Но если изображения в основном поддерживают содержание, и их удаление повредит смыслу, просто оставьте их. Что бы вы ни решили, ограничьте изображения до определенной ширины, чтобы они не растекались по бумаге. Я обнаружил, что 500 пикселей — это хороший компромисс.

картинка {
максимальная ширина: 500 пикселей;
}

В качестве альтернативы вы также можете положиться на испытанный и надежный max-width: 100% , который отображает изображения в их максимальном размере, но не больше, чем ширина страницы.

Вы можете использовать простой трюк, чтобы получить высококачественные изображения при печати. Просто предоставьте версию с более высоким разрешением для каждого необходимого изображения и измените его размер до исходного размера с помощью CSS. Подробнее об этой технике читайте в статье «Печать изображений с высоким разрешением» на A List Apart.

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

Тип носителя	Описание
все	Подходит/предназначен для всех устройств (по умолчанию).
слуховой	Предназначен для синтезаторов речи.
шрифт Брайля	Предназначен для устройств тактильной обратной связи с шрифтом Брайля.
рельефный	Предназначен для постраничных принтеров Брайля.
портативный	Предназначен для портативных устройств (обычно небольших экран, монохромный, ограниченная пропускная способность).
печать	Предназначен для печатных документов (относится к документам также просматривать в режиме предварительного просмотра).
выступ	Предназначен для проецируемых презентаций (например, проекторы или печать на прозрачные пленки).
экран	Предназначен для экранов компьютеров.
телетайп	Предназначен для носителей, использующих сетку символов с фиксированным шагом (например: телетайпы или терминалы).
телевизор	Предназначен для устройств телевизионного типа.

@media | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

CSS по теме

Статьи по теме

Статьи по теме

Рецепты CSS

CSS учебник

Вопросы для проверки

Ответы

@Media print css – 2 Ответа

Ещё вопросы

Как настроить таблицу стилей для печати — Smashing Magazine

Об авторе

Дополнительная литература на SmashingMag:

Начало работы

Подгонка под нужный размер