CSS หรือ Cascading Style Sheets ใช้เพื่อกำหนดการแสดงผลของหน้าตาของเว็บ
เช่น ลักษณะ สี ขนาดของ Font, ลักษณะ สี ขนาดของเส้น เป็นต้น
ไม่ใช่แค่การแสดงผลในเว็บเท่านั้น
CSS ยังสามารถกำหนดการแสดงของเว็บที่ print ออกมาได้
ซึ่งบ่อยครั้งที่อยากจะ print หน้าเว็บนั้นๆ เป็น PDF เก็บเอาไว้ ก็พบว่าติดเมนูด้านข้างมาด้วย
อยากจะ print แบบให้แสดงเนื้อหาแบบเต็มๆ จอ
พอทำบลอกที่ exteen เลย เขียน CSS ให้ทำอย่างงั้นซะเลย ใครที่อยากทำบ้าง
ให้ copy code ด้านล่างใส่ tab "Theme" -> "4. Config CSS (Advanced user)"
ใน exteen หน้าที่ใช้แก้ไข style
@media print {
#divDrag0,
#tab,
form,
.picture,
.rightcontent,
.entryfooter,
.comment {
display: none;
}
}
จาก code ด้านบน class picture(header ด้านบน), rightcontent (เมนูด้านข้าง),
entryfooter (ส่วนที่อยู่ด้านล่างเนื้อหา ที่แสดงวันเวลาที่โพสต์ และจำนวนคนคอมเมนต์),
comment, tag form (form ที่ให้โพสต์คอมเมนต์) และ id divDrag0 กับ tab
(แถบเมนูด้านข้างที่ลากๆได้) ถูกกำหนดให้ display เป็น none
เพื่อไม่ให้แสดง HTML component
ใครที่เคยเขียน CSS มาแล้ว แล้วใช้ visibility: hidden จะได้ผลที่แตกต่างกัน
เพราะ visibility แค่ไม่ให้มองเห็น HTML component นั้น
แต่พื้นที่ที่ใช้ในการแสดง component ยังอยู่ ขณะที่ display: none พื้นที่จะหายไปด้วย
ส่วน class leftcontent (ส่วนเนื้อหา) กำหนดให้ width เป็น 100% เพื่อให้แสดงเต็มหน้า
ใครที่พยายามแบ่ง CSS เป็นหลายๆไฟล์แบบ เช่น
base.css, code.css, content.css, print.css แล้วระบุ media ตามชื่อไฟล์ เช่น
@import url("style/print.css") print;
การอ้าง CSS จากไฟล์อื่น ในไฟล์ CSS นั้น ควรที่จะใส่ media แบบด้านบนด้วย
เพราะแม้ว่าจะระบุว่า print ตอน import แล้ว แต่ Internet Explorer (IE) ไม่รองรับตรงนี้
ถ้าจะให้ผลทั้ง IE และ Firefox แสดงผลเหมือนกันจึงต้องใส่ @media print ครอบ style ด้วย
