CSS 如何透過控制列印行為來提高列印效率？

用於選擇性列印的 CSS

列印大量網頁可能很麻煩，需要包含不必要的元素。 CSS 透過其「@media print」功能提供了一個解決方案。了解它的工作原理可以幫助您簡化列印過程。

瀏覽器支援

大多數現代瀏覽器支援「@media print」。它被廣泛應用於 Chrome、Firefox、Safari 和 Edge 等流行瀏覽器中。此功能已成為控製列印行為的可靠標準。

顯示特定元素

要在列印期間選擇性地顯示元素，您可以使用以下兩種方法之一：

1. 白名單方法（顯示：區塊）：

   • 建立 CSS 類別（例如「可列印」）。
   • 將「display: none」套用至媒體列印查詢中除具有「printable」類別的元素之外的所有元素。
   • 這將確保只有具有「printable」類別的元素在列印期間保持可見。

2. 黑名單方法（非）：

   • 將「display: none」應用於媒體查詢中的所有元素。
   • 使用「not」選擇器從「display: none」規則中排除具有「printable」類別的元素。
   • 雖然這種方法看起來合乎邏輯，但由於限制，它可能不適用於所有瀏覽器

範例程式碼

使用白名單法：

@media print {
    * {display:none;}
    .printable, .printable > * {display:block;}
}

在瀏覽期間隱藏元素

要在瀏覽期間隱藏特定元素但在列印期間顯示它們，可以使用以下程式碼：

@media print {
  .noPrint {
      display:none;
  }
}
@media screen {
   .onlyPrint {
       display: none;
   }
}

此程式碼將隱藏帶有“noPrint”的元素”類別在瀏覽期間使用「onlyPrint」類別顯示元素，並在列印期間顯示元素。

以上是CSS 如何透過控制列印行為來提高列印效率？的詳細內容。更多資訊請關注PHP中文網其他相關文章！