Как верстать под печать?

Question

[Ivanushka255]

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

Предлагается сделать такое:

@media print {
    /* print styles go here */
    body {
        font-size: 28px;
    }
}

Но мне кажется, что это ерунда. Туда отдельно писать код для всей страницы снова?
Как насчет того, чтобы в медиа-запросе не писать -

@media screen and (max-width: 600px) {
/* CSS-стили */;}

мол чисто для экранов. А указать -

@media (max-width: 600px) {
/* CSS-стили */;}

- применяется для всего (вообще наверное screen лучше не указывать).

Или же для печати нужно сверстать один вариант, который всегда будет выводиться для печати?

Comments

[lamer350]

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

[Ankhena]

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

Если стили для отображения в браузере и на печати одинаковые, то разумеется нет смысла их повторять.

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

Answer 1

[Сергей delphinpro]

Ну давай посмотрим на примере тостера.

Попробуем распечатать страницу с вопросом.
Для начала вопрос: для чего мы его распечатываем? Очевидно, нам интересен вопрос, и главное его решение. Именно это мы хотим распечатать на бумаге.

Что же нам предлагают верстальщики из ТМ?

Мы получаем на бумажной версии кнопку главного меню, поле поиска, кнопки добавления вопроса и контекстного меню. Отлично. Я обязательно их понажимаю после распечатки. Ха-ха. Хорошо хоть сайдбар спрятали.

Смотрим дальше

Форма комментирования. Ну что же. Наверное я отстал от современных технологий в своей деревне и во всем мире уже давно можно комментировать распечатанные страницы...

В самом конце аж три листа совершенно бесполезной информации.

В общем мы видим совершенно не оптимизированную под печать страницу.

А вот если не забывать про печатные устройства, можно все это лишнее как минимум спрятать.

Comments

[ComodoHacker]

Думаю, "верстальщики из ТМ" даже не предполагали, что кому-то придет в голову распечатывать вопрос с ответами.

И думаю, вполне резонно не предполагали.

[Сергей delphinpro]

ComodoHacker, на хабре немногим лучше.

Answer 2

[acwartz]

Но мне кажется, что это ерунда. Туда отдельно писать код для всей страницы снова?

На чистом CSS - да.

Чтобы скрасить монотонность копирования одного и того же, существуют препроцессоры css (LESS, SCSS, Stylus), и вместо дублирования под все медиа, Вы сразу пишите медиа запросы к конкретному классу, в последующем препроцессор сформирует нужное, и оно будет ожидаемо работать.
Например:

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
  @media screen and (min-width: 640px) {
    width: 350px;
  }
  @media print {
    display: none;
  }
}

на выходе будет:

.sidebar {
	width: 300px;
}

@media screen and (orientation: landscape) {
	.sidebar {
		width: 500px;
	}
}

@media screen and (min-width: 640px) {
	.sidebar {
		width: 350px;
	}
}

@media print {
	.sidebar {
		display: none;
	}
}

Отладка меди-запросов включается в DevTools доп утилитах рендера:

Туть:

Comments

[posters]

Дополню. Чтобы сделать итоговый css файл более читаемым, медиа запросы неплохо было бы сгруппировать и поместить в самый конец файла. Для этих целей можно использовать специальный плагин "group css media queries" или оболочку для галпа "gulp group css media queries".

[acwartz]

posters, как бы это ещё scss заставить размешать под-классы в одном медиа.
А то получается:

@media print {
  .A{
    display: none;
  }
}
@media print {
  .B{
    display: none;
  }
}

а хочется феншуй:

@media print {
  .A{
    display: none;
  }

  .B{
    display: none;
  }
}

или вообще умное:

@media print {
  .A, .B {
    display: none;
  }
}

[posters]

acwartz, давно не верстал, если честно.
Сейчас зашел на гитхаб group css media queries, оказалось, он больше не поддерживается. Предлагают перейти на node-css-mqpacker:
https://github.com/hail2u/node-css-mqpacker
Еще, судя по документации, такое умеет clean-css:
https://github.com/jakubpawlowicz/clean-css