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



Answers

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

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

Question

這是我現在的過程:

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

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

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




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

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

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




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

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

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




在Chrome 62中,cmd-R / cmd-P在Mac上運行良好,可以很好地預覽@media打印樣式頁面。

這可以通過瀏覽器窗口本身右上方的垂直省略號(不是開發者工具)/打印...來訪問

使用esc取消預覽窗口。

因此,對於IntelliJ IDEA和Chrome的工作流程,它是:cmd -s,cmd-tab,cmd-r,cmd-p,esc,cmd-tab,然後回到IDE中。

Windows 10中的Chrome 62在相同的位置具有相同的Print ...菜單,可通過ctrl-p訪問:




我不會使用任何不涉及打印預覽的測試方法。 有太多的不同之處:背景圖像在打印時根本不起作用,但在正常的屏幕背景下顯示是其中的主要部分。

在Chrome中, control+p會立即打印預覽。 (只需忘記將鼠標移動到菜單欄)。 這很容易。




Related



Tags

css css   firefox firefox