css css功能 - 開發和測試打印樣式表的更快方法(避免每次打印預覽)?





寫css css起源 (9)


您可以嘗試暫時刪除常規樣式表,並僅使用普通鏈接標籤加載打印樣式表。

這是我現在的過程:

  1. 保存對print.css的更改
  2. 打開瀏覽器並刷新頁面。
  3. 右鍵單擊並選擇“打印”>“打印預覽”(Firefox,但確實是任何瀏覽器)

這是錯誤的第3步,我想知道是否有可能通過插件或其他東西將其從流程中刪除。 只需選擇將頁面視為打印介質,然後只需刷新即可查看更改。

你如何測試你的打印樣式表? 刷新後,您是否總是點擊打印預覽?




如另一篇文章( 在打印預覽模式下使用Chrome的元素檢查器? )中所述,您可以使用chrome來簡單地模擬打印樣式表。 這很棒,因為您可以使用檢查器查看樣式來自哪裡,而不是在您看到打印對話框出現時猜測。

通過點擊Chrome元素檢查器右下角的齒輪圖標訪問覆蓋設置對話框。 然後選擇打印作為目標媒體類型。

真棒!




您可以簡單地禁用屏幕樣式,並在測試時將您的媒體類型更改為您的打印樣式表的“屏幕”。 這與使用真正的打印預覽(分頁符,文檔寬度等)不完全相同,但它仍然給你一個不錯的主意。




對我來說簡單 (沒有@screen部分或類似的1FF

  • @media print { ...部分放在CSS內容的末尾
  • out-comment僅包裝器聲明/*@media print {*/ ... /*}*/
    • 從而將印刷材料應用於您的樣式,並在適用的情況下立即覆蓋它們
  • (我正在使用LiveReload,因此我的瀏覽器頁面在保存更改後立即刷新
  • 否則 ,如果不使用LiveReload :)按CTRL+R重新加載頁面
  • 現在您已經可以做很多典型的打印CSS調整(字體樣式,字體大小,間距,顏色) ,但不需要打印預覽
  • ALT+F+V打開打印預覽和ALT+W再次關閉它

1 :如果有人擁有他們,那麼根據你的測試媒體,這些評論可能不是什麼大不了的




Firefox + Web Developer工具欄擴展可以啟用/禁用各種樣式表。

在CSS菜單下查找。 有一個菜單可以禁用和啟用單個樣式表和“按媒體類型顯示”菜單。

此外,為了減少在Firefox中訪問PrintPreview的步驟,請嘗試PrintPreview擴展 ,它將創建一個工具欄按鈕。

對於Chrome,有一個擴展端口 。 從我可以告訴的Chrome版本中,您可以選擇“顯示打印樣式”




至少在Chrome中:在開發過程中,添加到body標籤onload="window.print()" 。 這將導致打印模式在刷新後立即打開。

不幸的是,它似乎並不像開發人員工具那麼有用,因為它本質上是一個嵌入式PDF。

順便說一句,有一些方法可以消除第2步。一個流行的是LiveReload。




您可以使用Chrome 類型仿真功能,瀏覽器中的後續查看打印CSS所接受。

更新21/11/2017

更新的DevTools文檔可以在這裡找到: 在打印模式下查看頁面

以打印模式查看頁面:
1.打開命令菜單 。 ( tl; dr Cmd + Shift + P (Mac)或Ctrl + Shift + P (Windows,Linux))
2.開始輸入渲染並選擇Show Rendering
3.對於Emulate CSS Media下拉菜單,選擇print

更新29/02/2016

DevTools文檔已經移動,上面的鏈接提供了不准確的信息。 有關媒體類型仿真的更新文檔可在此處找到: 預覽更多媒體類型的樣式

通過單擊瀏覽器視口右上角的更多覆蓋•••更多覆蓋圖標打開DevTools仿真抽屜。 然後,在仿真抽屜中選擇媒體

更新12/04/2016

不幸的是,似乎文檔在打印仿真方面沒有更新。 但是,打印介質模擬器已經移動(再次):

  1. 打開Chrome DevTools
  2. 在鍵盤上按esc
  3. 點擊 (垂直省略號)
  4. 選擇渲染
  5. 勾選仿真打印介質

看下面的截圖:

更新28/06/2016

谷歌開發者文檔圍繞Chrome DevTools和“仿真媒體”選項已針對Chrome> 51進行了更新:

https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media

要以打印預覽模式查看頁面,請打開DevTools主菜單,選擇更多工具 > 渲染設置 ,然後啟用仿真媒體複選框,並將下拉菜單設置為打印

更新24/05/2016

設置的命名已經再次改變:

要以打印預覽模式查看頁面,請打開DevTools主菜單,選擇更多工具 > 渲染 ,然後啟用仿真CSS Media複選框,並將下拉菜單設置為打印




在Firefox中,您可以鍵入Shift+F2來打開開發人員工具欄命令行,然後鍵入media emulate print

您也可以通過這種方式模擬其他媒體類型。




我已經掙扎了好幾個小時,基本上,瀏覽器正在應用您需要在CSS中重寫的計算樣式。 我忘記了fieldset元素與div的設置的確切屬性(可能是min-width ?)。

我最好的建議是將您的元素更改為div ,從檢查器中復制計算的樣式,然後將元素更改回fieldset並比較計算出的樣式以找到罪魁禍首。

希望有所幫助。

更新:添加display: table-cell有助於非Chrome瀏覽器。





css firefox