CSS @media print 可以用來列印自訂元素嗎？

使用CSS 列印自訂元素

當需要創建內容豐富的頁面的列印友好版本時，CSS 提供了透過@media 列印規則的強大機制。然而，所提供的解決方案對其可行性和瀏覽器相容性提出了疑問。

@media print 的瀏覽器支援

@media print 規則得到所有主要現代瀏覽器的支持，包括 Chrome、Firefox、Safari 和 Edge。這確保了列印樣式可以在不同平台上一致地應用。

使用CSS 隱藏和顯示元素

要在列印過程中選擇性地顯示元素，您可以利用CSS隱藏除標有特定類別的內容之外的所有內容。下面的CSS 片段實現了這一點：

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

在這種方法中，所有具有「printable」類別的元素及其子元素在列印過程中都將可見，而其他所有元素都將被隱藏。

負選擇器和瀏覽器相容性

雖然使用「not」選擇器排除元素看起來合乎邏輯，但在某些瀏覽器中可能無法按預期工作。為了解決這個問題，可以採用補充方法：

@media print {
  body *:not(.printable *) {
    display: none;
  }
}

此 CSS 規則隱藏正文中的所有元素，除了具有「printable」類別的元素的後代。

在瀏覽器和印表機中顯示元素

要在瀏覽器中顯示某些元素但在列印時隱藏它們，您可以使用以下CSS 技術：

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

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

此方法允許包含僅分別與瀏覽器或列印輸出相關的元素（例如連結或標誌）。

以上是CSS @media print 可以用來列印自訂元素嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！