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

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

7 голосов
/ 09 февраля 2010

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

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

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

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

Ответы [ 4 ]

6 голосов
/ 09 февраля 2010

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

 /* 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}
6 голосов
/ 09 февраля 2010

Я использую знаменитую статью из списка ( 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) ") ";
   }
1 голос
/ 09 февраля 2010

Крис Койер на css-tricks.com написал отличную статью об этом: http://css -tricks.com / CSS-уловок, наконец, получает-а-печать таблицы стилей /

0 голосов
/ 14 декабря 2016

В духе обмена, вот пара правил, которые я регулярно использую. Они хорошо вписываются в 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.

...