media

Tag: media

มาทำความรู้จัก Media Queries เมื่อโลกปัจจุบันอะไรก็ใช้อินเตอร์เน็ตได้

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

เพราะบางบทความเราเขียนกันข้ามเดือนก็ยังมี ที่สำคัญการงานก็ยุ่งๆ ยากๆ ไหนจะเวลาเล่นเฟสบุ๊คของเราอีก

โดยทั่วไป บทความจะเริ่มจากความสงสัยว่า ถ้าอย่างนั้น แล้วมันจะเป็นยังไง หลังจากสงสัยก็ ค้นหาคำตอบโดยการ “ลองเขียนตัวอย่าง” ซึ่งแหล่งข้อมูลหลักของพวกเราก็คือ W3C ตรงนี้แหละครับที่มันกินเวลานาน บางบทความเขียนเมื่อ 6 เดือนที่ผ่านมาตอนนี้ ผม (พร อันทะ) ก็ยังปล่อยให้มันเป็น Draft อยู่ รอ IE10 ก่อนค่อยว่ากัน

เมื่อได้ตัวอย่างเป็นอันพึงพอใจ ก็มาถึงภาระอันหนักอึ้งซึ่งก็คือ เขียนยังไงให้คนอ่านรู้เรื่อง!! ซึ่งตอนนี้ก็ยังเป็นงานยากของเราอยู่ แม้ว่า ThaiCSS จะเกิดตั้งแต่ปี 2006 ก็ตาม (อายุมากใช่ว่าจะเก่งเสมอไป เห็นได้ตามออฟฟิศที่พวกแก่ๆ แต่แม่มชอบเกรียน ชิมิ๊ฮาาาาว์ฟ)

ไม่มีอะไรใหม่ หลังสงกรานต์ นอกจากเสียดายที่ผม กับ แบงค์ไม่ได้ไปดูโชวเขย่าเต้าที่สีลมแล้ว เราก็ตกลงกันว่า จากนี้ไปอีก 10 บทความพวกเราจะเขียนเรื่อง Media (Queries) หรือ CSS สำหรับอุปกรณ์ประเภทต่างๆ กันไปก่อน

อาทิ เขียน CSS ให้ TV, Mobile, Printer, iPad, iPhone โดยเฉพาะเรื่องการเขียน CSS ให้กับโทรทัศน์นี่ หลังจากที่ผมเล่นมานานจะได้เอามาบอกต่อกันเสียที

ตอนนี้ก็เปิดด้วยเรื่อง Media Queries กันไปก่อนนะขอรับ โดยเป็นบทความจาก เชี่ยแบงค์ก่อน เพราะผมยังบ้าแต่งเพลงอยู่ เชิญแซ่บ…

เขียน css สำหรับเครื่องปริ้นท์

หลายคนยังคิดไม่ออกว่ามันคืออะไร การเขียน css สำหรับเครื่องปริ้นท์ หรือการกำหนด print media ให้กับหน้าเว็บเพจ เราสามารถเขียน css ควบคุมหน้าเอกสารในเว็บของเราได้ ว่าจะให้แสดงผลต่างไปอย่างไร ใน User Agents แบบอื่นๆ ไม่ใช่แค่บราวเซอร์อย่างเดียว

ตอนนี้มาลองดูรูปแบบง่ายๆ กับการสั่งแสดงผลบน ปริ้นเตอร์กันครับ

สำหรับหน้าเว็บไทยซีเอสเอส หน้านี้ผมได้เขียน css รองรับปริ้นเตอร์ ไว้แล้ว สามารถสั่งปริ้นท์ หน้าเว็บออกไปได้เลยโดยที่แสดงผลไม่ผิดเพี้ยน ยังกะเอกสารจากไมโครซอฟเวิร์ด สามารถทดสอบได้โดย ไปที่เมนู Files -> Print Preview แล้วคุณจะเห็นความแตกต่างระหว่างหน้าเว็บ

ThaiCSS กับ Screen, Print และ Handheld Media type

ตอนนี้ถ้าใครใช้โทรศัพท์มือถือ หรือ พีดีเอ เข้าเว็บไทยซีเอสเอส คงเห็นหน้าตาเว็บที่เปลี่ยนไป หรือ ใครที่สั่งพิมพ์หน้าเว็บก็จะเห็น ความแตกต่างเช่นเดียวกัน ใช่เลยครับ ผมเขียน css ขึ้นมาใหม่เพื่อให้รองรับ Handheld และ Print เพราะฉะนั้นเวลาที่ผู้ใช้เปลี่ยน device ในการเข้าถึงหน้าเว็บ การแสดงผลจะต่างไปด้วย

Back to Top