วิธีที่เร็วกว่าในการพัฒนาและทดสอบสไตล์การพิมพ์ (หลีกเลี่ยงการแสดงตัวอย่างก่อนพิมพ์ทุกครั้ง)?

นี่คือกระบวนการของฉันตอนนี้:

1. บันทึกการเปลี่ยนแปลงเพื่อ print.css
2. เปิดหน้าเบราว์เซอร์และรีเฟรช
3. คลิกขวาและเลือกพิมพ์> ตัวอย่างก่อนพิมพ์ (Firefox แต่เบราว์เซอร์ใด ๆ จริงๆ)

เป็นขั้นตอนที่ 3 ที่ทำให้ฉันสับสนและฉันสงสัยว่ามันเป็นไปได้ที่จะตัดมันออกจากกระบวนการด้วยปลั๊กอินหรืออะไรบางอย่าง เพียงเลือกที่จะดูหน้าเป็นสื่อสิ่งพิมพ์จากนั้นเพียงรีเฟรชเพื่อดูการเปลี่ยนแปลง

คุณจะทดสอบสไตล์การพิมพ์ของคุณได้อย่างไร คุณคลิกตัวอย่างก่อนพิมพ์หลังจากรีเฟรชหรือไม่

คุณสามารถใช้Chrome สื่อประเภทการแข่งขันได้รับการยอมรับในการโพสต์ดู CSS การพิมพ์ในเบราว์เซอร์

อัพเดท 21/11/2560

ปรับปรุง doc DevTools สามารถพบได้ที่นี่: ดูเพจในโหมดการพิมพ์

เพื่อดูหน้าในโหมดการพิมพ์:
1. เปิดเมนูคำสั่ง ( TL; DR Cmd+Shift+P (Mac) หรือCtrl+Shift+P(Windows, Linux))
พิมพ์ 2 เริ่มต้นและเลือกRendering 3. สำหรับเลียนแบบ CSS สื่อแบบเลื่อนลงเลือกพิมพ์ Show Rendering

อัพเดท 29/02/2559

เอกสาร DevTools ได้ย้ายแล้วและลิงค์ด้านบนนี้ให้ข้อมูลที่ไม่ถูกต้อง เอกสารเกี่ยวกับการปรับปรุงประเภทสื่อจำลองสามารถพบได้ที่นี่: รูปแบบตัวอย่างสำหรับประเภทสื่อมากขึ้น

เปิดลิ้นชักอีมูเลชัน DevTools โดยคลิกที่ไอคอนการแทนที่เพิ่มเติม•••ไอคอนการแทนที่เพิ่มเติมที่มุมขวาบนของวิวพอร์ตเบราว์เซอร์ จากนั้นเลือกสื่อในลิ้นชักการจำลอง

อัพเดท 12/04/2559

น่าเสียดายที่ดูเหมือนว่าเอกสารยังไม่ได้รับการอัปเดตเกี่ยวกับการจำลองการพิมพ์ อย่างไรก็ตาม Print Media Emulator ได้ย้าย (อีกครั้ง):

1. เปิด Chrome DevTools
2. กดescแป้นพิมพ์ของคุณ
3. คลิก⋮ (จุดไข่ปลาแนวตั้ง)
4. เลือกการแสดงผล
5. ทำเครื่องหมายเลียนแบบสื่อสิ่งพิมพ์

ดูภาพหน้าจอด้านล่าง:

อัปเดต 28/06/2016

Google Developers เอกสารรอบ ๆ Chrome DevTools และตัวเลือก "Emulate Media" ได้รับการอัปเดตสำหรับ Chrome> 51:

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

เพื่อดูเพจในโหมดตัวอย่างก่อนพิมพ์เปิด DevTools เมนูหลักเลือกเครื่องมือ > การตั้งค่าการแสดงผลและเปิดใช้งานแล้วสื่อเลียนแบบช่องทำเครื่องหมายกับชุดเมนูแบบเลื่อนลงเพื่อการพิมพ์

อัปเดต 24/05/2559

การตั้งชื่อได้เปลี่ยนไปอีกครั้ง:

เพื่อดูเพจในโหมดตัวอย่างก่อนพิมพ์เปิด DevTools เมนูหลักเลือกเครื่องมือ > การแสดงผลและเปิดใช้งานแล้วเลียนแบบ CSS สื่อช่องทำเครื่องหมายกับชุดเมนูแบบเลื่อนลงเพื่อการพิมพ์

ใน Firefox คุณสามารถพิมพ์Shift+F2เพื่อเปิดบรรทัดคำสั่งแถบเครื่องมือนักพัฒนาแล้วพิมพ์media emulate print

คุณสามารถเลียนแบบสื่อประเภทอื่นด้วยวิธีนี้

ส่วนขยายแถบเครื่องมือ Firefox + Web Developerมีวิธีการเปิด / ปิดสไตล์ชีทต่าง ๆ

ดูใต้เมนู CSS มีเมนูสำหรับปิดใช้งานและเปิดใช้งานสไตล์ชีทแต่ละอย่างและเมนู "แสดงตามประเภทสื่อ" ด้วย

นอกจากนี้หากต้องการลดขั้นตอนในการไปที่ PrintPreview ใน Firefox ให้ลองใช้ส่วนขยาย PrintPreviewซึ่งจะสร้างปุ่มแถบเครื่องมือ

สำหรับ Chrome มีพอร์ตของส่วนขยายนั้น จากสิ่งที่ฉันสามารถบอกได้ด้วยเวอร์ชัน Chrome คุณสามารถเลือก "แสดงสไตล์การพิมพ์"

ฉันจะไม่ใช้วิธีการทดสอบใด ๆ ที่ไม่เกี่ยวข้องกับตัวอย่างก่อนพิมพ์ มีความแตกต่างกันมากเกินไป: ภาพพื้นหลังไม่ทำงานเลยในการพิมพ์ แต่ปรากฏในบริบทหน้าจอปกติที่เป็นหัวหน้าในหมู่พวกเขา

ใน Chrome control+pไปที่หน้าตัวอย่างก่อนพิมพ์ทันที (เพียงลืมการแจ้งเตือนจนถึงแถบเมนูของคุณ) นั่นเป็นเรื่องง่าย

คุณสามารถปิดการใช้งานรูปแบบหน้าจอของคุณและเปลี่ยนประเภทสื่อเป็น "หน้าจอ" สำหรับสไตล์การพิมพ์ขณะทดสอบ สิ่งนี้จะไม่เหมือนกับการใช้ตัวอย่างก่อนพิมพ์จริง (ตัวแบ่งหน้าความกว้างของเอกสาร ฯลฯ ) แต่มันก็ยังให้ความคิดที่ดี

ง่ายสำหรับฉัน (ไม่มี@screenส่วนหรือคล้ายกัน¹ ) กับ FF :

• ใส่@media print { ...ส่วนท้ายของเนื้อหา CSS ของคุณ
• ออกความคิดเห็นเพียงประกาศเสื้อคลุม/*@media print {*/ ... /*}*/
  • ดังนั้นการใช้สิ่งที่พิมพ์กับสไตล์ของคุณแทนที่พวกเขาทันทีที่เกี่ยวข้อง
• (ฉันใช้LiveReloadหน้าเบราว์เซอร์ของฉันจะรีเฟรชทันทีหลังจากบันทึกการเปลี่ยนแปลง)
• (ไม่เช่นนั้นหากไม่ได้ใช้LiveReload :) กดCTRL+Rเพื่อโหลดหน้าซ้ำ
• ตอนนี้คุณสามารถทำการปรับเปลี่ยน CSS การพิมพ์ทั่วไปได้มากมาย (แบบอักษรขนาดตัวอักษรการเว้นวรรคสี)ซึ่งคุณไม่จำเป็นต้องมีตัวอย่างก่อนพิมพ์
• กดALT+F+Vเพื่อเปิดภาพตัวอย่างก่อนพิมพ์และALT+Wปิดอีกครั้ง

¹ : ถ้ามีพวกเขา out- / in-commenting เหล่านั้นขึ้นอยู่กับสื่อทดสอบของคุณอาจไม่เป็นเรื่องใหญ่

ตามที่อธิบายไว้ในโพสต์อื่นนี้ ( การใช้องค์ประกอบตรวจสอบของ Chrome ในโหมดตัวอย่างก่อนพิมพ์? ) คุณสามารถใช้โครเมี่ยมเพื่อเลียนแบบสไตล์การพิมพ์ นี่เป็นสิ่งที่ยอดเยี่ยมเพราะคุณสามารถใช้ผู้ตรวจการเพื่อดูว่าสไตล์มาจากไหนแทนที่จะเดาเมื่อคุณเห็นไดอะล็อกการพิมพ์ปรากฏขึ้น

เข้าถึงกล่องโต้ตอบการตั้งค่าแทนที่โดยคลิกที่ไอคอนรูปเฟืองที่มุมขวาล่างของตัวตรวจสอบองค์ประกอบของ Chrome จากนั้นเลือกพิมพ์เป็นประเภทสื่อสิ่งพิมพ์เป้าหมาย

! น่ากลัว

อย่างน้อยใน Chrome: 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

Chrome 62 ใน Windows 10 มีเมนู Print ... ที่เหมือนกันในที่เดียวกันสามารถเข้าถึงได้ด้วย ctrl-p: