พิมพ์สไตล์ CSS ที่ฉันลืมไป ตัวแบ่งหน้าสำหรับการพิมพ์โดยใช้ CSS3 การพิมพ์ URL ของลิงก์

วิธีจัดการกับตัวแบ่งหน้าเมื่อพิมพ์ตาราง HTML ขนาดใหญ่ (8)

ฉันมีโครงการที่ต้องพิมพ์ตาราง HTML ที่มีหลายแถว

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

วิธีแก้ปัญหาเดียวที่เป็นไปได้ที่ฉันคิดได้คือใช้ DIV ที่ซับซ้อนแทนตารางและบังคับให้แบ่งหน้าหากจำเป็น... แต่ก่อนที่จะทำการเปลี่ยนแปลงทั้งหมด ฉันคิดว่าฉันอาจถามที่นี่ก่อนหน้านี้

ใช้คุณสมบัติ CSS เหล่านี้:

ตัวแบ่งหน้าหลังตัวแบ่งหน้าก่อน

ตัวอย่างเช่น:

@media print ( table (page-break-after:always) ) ....

ไม่มีคำตอบใดที่เหมาะกับฉันใน Chrome AAverin บน GitHub ได้สร้าง Javascript ที่มีประโยชน์สำหรับสิ่งนี้และมันได้ผลสำหรับฉัน:

เพียงเพิ่ม js ลงในโค้ดของคุณและเพิ่มคลาส splitForPrint ลงในตาราง จากนั้นมันจะแยกตารางออกเป็นหลาย ๆ หน้าอย่างเรียบร้อย และเพิ่มส่วนหัวของตารางลงในแต่ละหน้า

หมายเหตุ: เมื่อใช้ตัวแบ่งหน้า: สำหรับแท็กเสมอ แท็กจะสร้างตัวแบ่งหน้าหลังส่วนสุดท้ายของตาราง ทำให้เกิดหน้าว่างทุกครั้ง! หากต้องการแก้ไขปัญหานี้ เพียงเปลี่ยนเป็น page-break-after: auto มันจะเสียหายอย่างถูกต้องและจะไม่สร้างหน้าว่างเพิ่มเติม

@media พิมพ์ ( ตาราง ( page-break-after:auto ) tr ( page-break-inside:avoid; page-break-after:auto ) td ( page-break-inside:avoid; page-break-after:auto ) thead ( จอแสดงผล: table-header-group ) tfoot ( จอแสดงผล: table-footer-group ) ) ....

คำตอบที่ยอมรับไม่ได้ผลสำหรับฉันในทุกเบราว์เซอร์ แต่การติดตาม css ก็ได้ผลสำหรับฉัน:

Tr ( display: table-row-group; page-break-inside:avoid; page-break-after:auto; )

โครงสร้าง HTMLเคยเป็น:

...

ในกรณีของฉันมีปัญหาเพิ่มเติมกับ thead tr แต่วิธีนี้ช่วยแก้ปัญหาดั้งเดิมของการบรรจุแถวของตารางได้

เนื่องจากปัญหาส่วนหัว ฉันจึงได้:

#theTable td * ( page-break-inside:avoid; )

สิ่งนี้ไม่ได้หยุดการแตกแถว เฉพาะเนื้อหาของแต่ละเซลล์

ฉันลงเอยด้วยแนวทางของ @vicenteherrera พร้อมการปรับแต่งบางอย่าง (ซึ่งอาจเป็น bootstrap 3)

โดยพื้นฐานแล้ว; เราไม่สามารถแยก tr s หรือ td s ได้เพราะมันไม่ใช่องค์ประกอบระดับบล็อก ดังนั้นเราจึงแทรก div ลงในแต่ละอัน และใช้กฎ page-break-* กับ div ประการที่สอง เราเพิ่มช่องว่างภายในที่ด้านบนของแต่ละ div เหล่านี้เพื่อชดเชยส่วนการจัดรูปแบบใดๆ

@media print ( /* หลีกเลี่ยงการตัด tr"s ลงครึ่งหนึ่ง */ th div, td div ( margin-top:-8px; padding-top:8px; page-break-inside:avoid; ) ) $(document).ready (function())( // ล้อมเนื้อหาของ tr และ td" แต่ละรายการไว้ภายใน div // (สิ่งที่ต้องทำ: เพิ่มตรรกะ เพื่อให้เราทำสิ่งนี้เฉพาะเมื่อพิมพ์เท่านั้น) $("table tbody th, table tbody td").wrapInner(" " ); ))

จำเป็นต้องมีการแก้ไขและการปรับเปลี่ยนส่วนเพิ่มเติมเพื่อชดเชยความกระวนกระวายใจที่เกิดขึ้น (ฉันถือว่าจากบูตสแตรป) ฉันไม่แน่ใจว่าฉันกำลังนำเสนอวิธีแก้ปัญหาใหม่จากคำตอบอื่น ๆ สำหรับคำถามนี้หรือไม่ แต่อาจช่วยใครซักคนได้

ฉันเพิ่งแก้ไขปัญหานี้ด้วยวิธีแก้ปัญหาที่ดี

หลีกเลี่ยง ( เส้นขอบ: 2px solid; page-break-inside:avoid; )

ฟังก์ชั่น Print())( $(".tableToPrint td, .tableToPrint th").each(function())( $(this).css("width", $(this).width() + "px") )) ; $(".tableToPrint tr").wrap(""); window.print(); )

ทำงานเหมือนมีเสน่ห์!

ฉันทดสอบวิธีแก้ปัญหามากมายแต่ก็ไม่มีใครทำงานได้ดี

ดังนั้นฉันจึงลองใช้เคล็ดลับเล็ก ๆ น้อย ๆ และได้ผล:

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

tfoot เท่านั้นด้วย: จอแสดงผล: table-footer-group; ไม่ทับซ้อนกันแต่ไม่ได้อยู่ท้ายหน้าสุดท้าย...

ใส่สองฟุต:

TFOOT.placer ( จอแสดงผล: table-footer-group; ความสูง: 130px; ) TFOOT.contenter ( จอแสดงผล: table-footer-group; ตำแหน่ง: คงที่; ด้านล่าง: 0px; ความสูง: 130px; ) ข้อความยาวหรือรูปภาพสูงของคุณที่นี่

รายการหนึ่งสงวนพื้นที่ในหน้าที่ไม่ใช่หน้าสุดท้าย และอีกรายการหนึ่งในส่วนท้ายส่วนบุคคลของคุณ

ตารางทดสอบ ( page-break-inside:auto ) tr ( page-break-inside:avoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group )

หัวเรื่อง

บันทึกย่อ

วิธีจัดการกับตัวแบ่งหน้าเมื่อพิมพ์ตาราง HTML ขนาดใหญ่ (8)

ฉันมีโครงการที่ต้องพิมพ์ตาราง HTML ที่มีหลายแถว

ใช้คุณสมบัติ CSS เหล่านี้:

ตัวแบ่งหน้าหลังตัวแบ่งหน้าก่อน

ตัวอย่างเช่น:

@media print ( table (page-break-after:always) ) ....

Tr ( display: table-row-group; page-break-inside:avoid; page-break-after:auto; )

โครงสร้าง html คือ:

...

เนื่องจากปัญหาส่วนหัว ฉันจึงได้:

#theTable td * ( page-break-inside:avoid; )

สิ่งนี้ไม่ได้หยุดการแตกแถว เฉพาะเนื้อหาของแต่ละเซลล์

ฉันลงเอยด้วยแนวทางของ @vicenteherrera พร้อมการปรับแต่งบางอย่าง (ซึ่งอาจเป็น bootstrap 3)

ฉันเพิ่งแก้ไขปัญหานี้ด้วยวิธีแก้ปัญหาที่ดี

หลีกเลี่ยง ( เส้นขอบ: 2px solid; page-break-inside:avoid; )

ฟังก์ชั่น Print())( $(".tableToPrint td, .tableToPrint th").each(function())( $(this).css("width", $(this).width() + "px") )) ; $(".tableToPrint tr").wrap(""); window.print(); )

ทำงานเหมือนมีเสน่ห์!

ฉันทดสอบวิธีแก้ปัญหามากมายแต่ก็ไม่มีใครทำงานได้ดี

ดังนั้นฉันจึงลองใช้เคล็ดลับเล็ก ๆ น้อย ๆ และได้ผล:

ใส่สองฟุต:

ตารางทดสอบ ( page-break-inside:auto ) tr ( page-break-inside:avoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group )

หัวเรื่อง

บันทึกย่อ

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

จุดสนใจหลักของการพัฒนาเว็บอยู่ที่ รุ่นอิเล็กทรอนิกส์เว็บไซต์ ต้องตรวจสอบหน้าต่างๆ ในเบราว์เซอร์หลายตัว ทดสอบกับหน้าต่างขนาดต่างๆ... ใครสนใจเครื่องพิมพ์บ้าง? หรือบางทีฉันอาจลืมรูปแบบการพิมพ์เพราะฉันไม่ค่อยทำสำเนาหน้ากระดาษด้วยตัวเอง อย่างไรก็ตาม ฉันรู้สึกว่าสถานการณ์จำเป็นต้องแก้ไขอย่างเร่งด่วน

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

นี่คือสิ่งที่ Haydon Pickering ผู้เขียนหนังสือ “Inclusion Design Patterns” กล่าวเกี่ยวกับเรื่องนี้: “ฉันไม่ได้ใช้เครื่องพิมพ์ที่บ้านมานานแล้ว ประเด็นก็คือฉันรู้สึกว่ามันพังประมาณสิบนาทีหลังจากที่คุณเริ่มพิมพ์ แต่ฉันไม่ใช่ทุกอย่าง”

หากคุณตระหนักแล้วว่า คุณไม่ได้ให้ความสำคัญกับสไตล์การพิมพ์มากพอ เช่นเดียวกับฉัน ฉันหวังว่าเรื่องราวของฉันจะเป็นประโยชน์กับคุณ และช่วยให้คุณฟื้นความทรงจำได้อย่างรวดเร็ว และหากคุณไม่เคยปรับหน้าเว็บให้เหมาะสมสำหรับเครื่องพิมพ์เลย คอลเล็กชั่นเคล็ดลับ CSS ที่เป็นประโยชน์เล็กๆ น้อยๆ ของฉันจะช่วยให้คุณเริ่มต้นได้

1. การใช้ CSS Print Styles วิธีที่ดีที่สุดในการรวมสไตล์การพิมพ์เข้ากับเพจของคุณคือการประกาศกฎ @media ในไฟล์ CSS หลักของคุณ

เนื้อความ ( font-size: 18px; ) @media print ( /* รูปแบบการพิมพ์จะอยู่ที่นี่ */ body ( font-size: 28px; ) )
หรือคุณสามารถใส่รูปแบบการพิมพ์ลงในไฟล์แยกต่างหากและรวมไว้ใน HTML ได้ แต่ด้วยวิธีนี้ คุณจะต้องร้องขอเพิ่มเติมเมื่อโหลดหน้า

2. การทดสอบวิธีการประเมิน รูปร่างหน้าเว็บที่เตรียมไว้สำหรับการพิมพ์? เป็นที่ชัดเจนสำหรับทุกคนว่าการใส่มันลงบนกระดาษหลังจากการเปลี่ยนแปลงสไตล์ทุกครั้งนั้นไม่ใช่ การตัดสินใจที่ดีที่สุด. โชคดีที่ความสามารถของเบราว์เซอร์นั้นเพียงพอสำหรับการตรวจสอบหน้าเวอร์ชันที่พิมพ์แบบ "ไร้กระดาษ"

คุณสามารถส่งออกเพจเป็น PDF ได้โดยใช้ฟังก์ชันทั้งนี้ขึ้นอยู่กับเบราว์เซอร์ ดูตัวอย่างหรือแม้แต่ดีบั๊กเพจโดยตรงในเว็บเบราว์เซอร์

หากต้องการแก้ไขข้อบกพร่องของรูปแบบการพิมพ์ใน Firefox ให้เปิดแผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์โดยใช้แป้นพิมพ์ลัด Shift + F2 หรือโดยการรันคำสั่งเมนู พัฒนา → แผงควบคุมสำหรับนักพัฒนา เข้ามา บรรทัดคำสั่งที่อยู่ด้านล่างสุดของหน้าต่าง สิ่งต่อไปนี้: สื่อจำลองการพิมพ์ ป้อนข้อมูลให้เสร็จสิ้นโดยกด Enter แท็บที่ใช้งานอยู่จะทำงานเหมือนกับว่าชนิดสื่อสิ่งพิมพ์ถูกพิมพ์จนกว่าคุณจะปิดหรือรีเฟรชหน้า

การจำลองการพิมพ์ใน Firefox

Chrome ก็มีคุณสมบัติที่คล้ายกันเช่นกัน เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ซึ่งบน MacOS คุณสามารถใช้คีย์ผสม CMD + Opt + I บน Windows - Ctrl + Shift + I หรือดำเนินการคำสั่งเมนู เครื่องมือเพิ่มเติม→ เครื่องมือสำหรับนักพัฒนา หลังจากนั้นให้เปิดแผงการเรนเดอร์ วิธีหนึ่งในการทำเช่นนี้คือการกด Esc เพื่อเปิดแผงคอนโซล จากนั้นใช้เมนูเพื่อเปิดแผงการแสดงผล ในแผงการเรนเดอร์ ให้ตั้งค่าแฟล็ก Emulate CSS Media และเลือกพิมพ์

การจำลองการพิมพ์ใน Chrome

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับการทดสอบหน้าเว็บเวอร์ชันสิ่งพิมพ์บน StackOverflow

3. หน่วยการวัดแบบสัมบูรณ์ หน่วยการวัดแบบสัมบูรณ์ไม่เหมาะกับหน้าเวอร์ชันหน้าจอมากนัก แต่สำหรับการพิมพ์เป็นเพียงสิ่งที่คุณต้องการเท่านั้น ในรูปแบบการพิมพ์จะปลอดภัยอย่างยิ่ง นอกจากนี้ ขอแนะนำให้ใช้หน่วยการวัดสัมบูรณ์ เช่น cm, mm, in, pt หรือ pc

ส่วน (ระยะขอบด้านล่าง: 2 ซม.; )

4. คุณสมบัติของเพจ คุณสามารถใช้กฎ @page เพื่อควบคุมคุณสมบัติของเพจ เช่น ขนาด การวางแนว และระยะขอบ สิ่งนี้มีประโยชน์มาก เช่น เมื่อคุณต้องการให้หน้าที่พิมพ์ทั้งหมดมีระยะขอบเท่ากัน

@media print ( @page ( ระยะขอบ: 1cm; ) )
กฎ @page เป็นส่วนหนึ่งของมาตรฐาน Paged Media Module ซึ่งนำเสนอสิ่งดีๆ มากมาย เช่น การเลือกหน้าแรกที่จะพิมพ์ การปรับแต่ง หน้าว่างการจัดตำแหน่งองค์ประกอบที่มุมของหน้า และ นอกจากนี้ยังสามารถใช้เพื่อเตรียมหนังสือสำหรับการพิมพ์ได้อีกด้วย

5. การจัดการตัวแบ่งหน้า เนื่องจากแผ่นงานที่พิมพ์ออกมานั้นไม่มีที่สิ้นสุด เนื้อหาของหน้าเว็บไม่ช้าก็เร็วจะแตกออกบนกระดาษแผ่นเดียวและดำเนินต่อไปในหน้าถัดไป มีคุณสมบัติห้าประการในการควบคุมตัวแบ่งหน้า: ตัวแบ่งหน้าก่อนองค์ประกอบ หากคุณต้องการให้องค์ประกอบปรากฏที่จุดเริ่มต้นของหน้าเสมอ คุณสามารถบังคับตัวแบ่งหน้าก่อนที่จะใช้คุณสมบัติตัวแบ่งหน้าก่อน

ส่วน ( ตัวแบ่งหน้าก่อน: เสมอ; )

▍ตัวแบ่งหน้าหลังองค์ประกอบ คุณสมบัติตัวแบ่งหน้าหลังช่วยให้คุณสามารถตั้งค่าบังคับตัวแบ่งหน้าหลังองค์ประกอบได้ การใช้คุณสมบัตินี้ทำให้คุณสามารถป้องกันการแตกหักได้

H2 ( ตัวแบ่งหน้าหลัง: เสมอ; )

▍แบ่งหน้าภายในองค์ประกอบ คุณสมบัติ page-break-inside มีประโยชน์มากหากคุณต้องการหลีกเลี่ยงการแยกองค์ประกอบระหว่างสองหน้า

Ul ( ตัวแบ่งหน้าภายใน: หลีกเลี่ยง; )

▍เส้นห้อยด้านบนและด้านล่าง บางครั้งคุณไม่จำเป็นต้องบังคับให้แบ่งหน้า แต่คุณต้องการควบคุมเอาต์พุตของย่อหน้าที่ขอบเขตหน้า

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

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

ป(เด็กกำพร้า: 3;)
จุดประสงค์ของโค้ดด้านบนคือ เพื่อที่จะไม่ตัดทั้งย่อหน้าไปยังหน้าถัดไป ต้องมีอย่างน้อยสามบรรทัดให้พอดีกับหน้าปัจจุบัน

เพื่อให้เข้าใจสิ่งนี้ได้ดีขึ้น ลองดูตัวอย่างที่เตรียมไว้โดยใช้ CodePen และนี่คือตัวอย่างเดียวกันในเวอร์ชันดีบัก ซึ่งสะดวกกว่าในการทดสอบ

*, *:before, *:after, *:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line ( พื้นหลัง: โปร่งใส !สำคัญ; สี: #000 !important; box-shadow: none !important; text-shadow: none !important; )
อย่างไรก็ตาม สไตล์ CSS สำหรับการพิมพ์เป็นหนึ่งในข้อยกเว้นบางประการที่คำสั่ง!importantถือเป็นเรื่องปกติ ;)

7. การลบเนื้อหาที่ไม่จำเป็นออก เพื่อไม่ให้เปลืองหมึก คุณควรลบทุกสิ่งที่ไม่จำเป็นออกจากหน้าเวอร์ชันที่พิมพ์ เช่น สไลด์ที่สวยงามขนาดใหญ่ โฆษณา เครื่องมือนำทางไซต์ และอื่นๆ ซึ่งสามารถทำได้โดยการตั้งค่าคุณสมบัติการแสดงผลเป็นไม่มีสำหรับองค์ประกอบที่ไม่จำเป็น ค่อนข้างเป็นไปได้ที่คุณจะพบว่าการแสดงเฉพาะเนื้อหาหลักของหน้าและซ่อนสิ่งอื่นทั้งหมดนั้นถูกต้อง:

เนื้อหา > *:not(main) ( จอแสดงผล: none; )

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

ในการแสดงที่อยู่ลิงก์หลังการแสดงข้อความ เพียงใช้สไตล์ต่อไปนี้:

A:หลัง ( เนื้อหา: " (" attr(href) ")"; )
แน่นอนว่าด้วยวิธีนี้ สิ่งที่ไม่จำเป็นจำนวนมากจะถูก "ถอดรหัส" ตัวอย่างเช่น ลิงก์ที่เกี่ยวข้อง ลิงก์สัมบูรณ์บนไซต์เดียวกับหน้าที่พิมพ์ ลิงก์จุดยึด และอื่นๆ เพื่อไม่ให้หน้าที่พิมพ์เกะกะ ควรใช้ดังนี้:

A:not():after ( เนื้อหา: " (" attr(href) ")"; )
มันดูบ้าแน่นอน ผมจะอธิบายความหมายนะครับ ของกฎนี้เป็นภาษาอังกฤษธรรมดา: "แสดงค่าของแอตทริบิวต์ href ถัดจากแต่ละลิงก์ที่มีแอตทริบิวต์ที่ขึ้นต้นด้วย http แต่ไม่มี mywebsite.com"

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

Abbr:after ( เนื้อหา: " (" attr(title) ")"; )

10. การบังคับพิมพ์พื้นหลัง โดยปกติแล้วเบราว์เซอร์เมื่อสร้างหน้าสำหรับการพิมพ์จะไม่แสดงสีพื้นหลังและ ภาพพื้นหลังเว้นแต่จะระบุไว้อย่างชัดเจน อย่างไรก็ตาม บางครั้งจำเป็นต้องพิมพ์ทั้งหมดนี้ คุณสมบัติการปรับสีการพิมพ์ที่ไม่ได้มาตรฐานจะช่วยเราได้ ซึ่งช่วยให้คุณสามารถแทนที่การตั้งค่าเริ่มต้นสำหรับเบราว์เซอร์บางตัวได้

ส่วนหัว ( -webkit-print-color-adjust: แน่นอน; print-color-adjust: ตรง; )

11. Media Queries หากคุณเขียน Media Queries ดังตัวอย่างด้านล่างนี้ โปรดทราบว่ากฎของ CSS นั้นอยู่ในนั้น คำขอที่คล้ายกันจะไม่ส่งผลกระทบต่อเวอร์ชันที่พิมพ์ของหน้า

@หน้าจอสื่อ และ (ความกว้างขั้นต่ำ: 48em) ( /* หน้าจอเท่านั้น */ )
ทำไมจึงเป็นเช่นนี้? ประเด็นก็คือกฎ CSS จะถูกนำมาใช้ก็ต่อเมื่อค่าความกว้างขั้นต่ำคือ 48em และหากประเภทสื่อคือ screen หากคุณกำจัดสื่อแบบสอบถามนี้ออกไป คำสำคัญ screen จากนั้นจะถูกจำกัดด้วยค่าความกว้างขั้นต่ำเท่านั้น

@media (ความกว้างขั้นต่ำ: 48em) ( /* สื่อทุกประเภท */ )

12. การพิมพ์แผนที่ Firefox และ Chrome เวอร์ชันปัจจุบันสามารถพิมพ์แผนที่ได้ แต่ตัวอย่างเช่น Safari ไม่สามารถทำได้ จะทำอย่างไรเมื่อพิมพ์การ์ด? หนึ่งในตัวเลือกสากลคือการใช้แผนที่แบบคงที่แทนแผนที่แบบไดนามิก

แผนที่ ( กว้าง: 400px; ความสูง: 300px; พื้นหลังรูปภาพ: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true "); -webkit-print-color-adjust: แน่นอน; print-color-adjust: แน่นอน; )

13. รหัส QR การพิมพ์รหัส QR ที่มีลิงก์ที่สำคัญสามารถปรับปรุงการใช้งานหน้าเว็บเวอร์ชันกระดาษได้อย่างมาก นี่คือชิ้นส่วนจากนิตยสาร The Smashing ที่คุณสามารถหาได้ เคล็ดลับที่เป็นประโยชน์เกี่ยวกับธีมนี้ หนึ่งในนั้นคือการใส่ที่อยู่ในรูปแบบของรหัส QR บนหน้าที่พิมพ์ ด้วยเหตุนี้ ผู้ใช้จึงสามารถเปิดหน้าที่พิมพ์ออกมาในเบราว์เซอร์ได้ โดยไม่จำเป็นต้องพิมพ์ที่อยู่แบบเต็มบนแป้นพิมพ์14. เกี่ยวกับการพิมพ์หน้าที่ไม่ได้รับการปรับให้เหมาะสม ฉันค้นพบในขณะที่ค้นคว้าหัวข้อการพิมพ์หน้าเว็บ เครื่องมือที่ยอดเยี่ยมซึ่งช่วยให้คุณเตรียมหน้าที่ยังไม่ได้เพิ่มประสิทธิภาพสำหรับการพิมพ์ได้อย่างสะดวก การใช้โปรแกรม Printliminator