Какие наиболее полезные media="print" специфические, совместимые с браузером свойства css?

Какие самые полезные media="print"-специфичные, совместимые с браузером свойства CSS?

Я думаю, что у нас есть эти 5 свойств для конкретной печати.

  1. страниц обкатки перед тем
  2. страниц обкатки после
  3. страниц обкатки внутри
  4. вдовы
  5. дети сироты

Пожалуйста, объясните, когда и где их использовать? Какие кросс-браузерные совместимы? и какие другие общие свойства CSS могут быть полезны при печати, кроме display:none?

Источник

4 ответа

Решение

Я использую знаменитую статью "Отдельный список" ( CSS Design: Going to Print) и эту статью, когда мне нужно сделать версию страницы для печати. Есть несколько общих тегов, но многое зависит от используемой вами модели css (а также от заполнения контейнера и полей):

body {
   background: white;
   font-size: 12pt;
   }
#menu {
   display: none;
   }
#wrapper, #content {
   width: auto;
   margin: 0 5%;
   padding: 0;
   border: 0;
   float: none !important;
   color: black;
   background: transparent none;
   }
div#content {
   margin-left: 10%;
   padding-top: 1em;
   border-top: 1px solid #930;
   }
div#mast {
   margin-bottom: -8px;
   }
div#mast img {
   vertical-align: bottom;
   }
a:link, a:visited {
   color: #520;
   background: transparent;
   font-weight: bold;
   text-decoration: underline;
   }
#content a:link:after, #content a:visited:after {
   content: " (" attr(href) ") ";
   font-size: 90%;
   }
#content a[href^="/"]:after {
   content: " (http://www.alistapart.com" attr(href) ") ";
   }
Источник

Я использую следующее:

 /* Browser will TRY to avoid spanning content within across a page */
 tr, td, th {page-break-inside:avoid}

 /* Repeat table headers when table spans a page */
 thead {display:table-header-group}

  /* Apply to anything you don't want to print */
 .NoPrint {visibility:hidden; display:none}
Источник

Крис Койер из css-tricks.com написал отличную статью на эту тему: http://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/

Источник

В духе обмена, вот пара правил, которые я регулярно использую. Они хорошо вписываются в SemanticUI, но могут быть полезны в других местах

[class*="printed only"] {
    display:    none;
}

@media print {
    .printed {
        display:    initial !important;
        opacity:    1 !important;
    }

    [class*="non printed"] {
        display:    none !important;
        opacity:    0 !important;
    }
}

Показать на экране и распечатать

использование class="printed", Это удобно, когда у вас есть вкладки в пользовательском интерфейсе, поэтому вы можете принудительно распечатать их, даже если они не отображаются в данный момент.

Показать на экране, но не печатать

использование class="non printed", Это удобно для элементов навигации и других вещей, которые вы не хотите печатать

Не отображать на экране, а печатать

использование class="printed only", Я считаю удобным включать в печатную версию некоторые метаданные о веб-странице, которые могут не иметь отношения к веб-версии - например, дату / время создания страницы, имя пользователя человека, который напечатал документ, ссылку (если она удалена из заголовки) и soforth.

Источник
Другие вопросы по тегам