กำหนด style sheet เพื่อแสดงผลในอุปกรณ์ต่างๆ

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

การออกแบบ style sheet สำหรับการแสดงผลในอุปกรณ์ที่แตกต่างกัน

เพิ่ม media=”output” ใน tag link หรือ tag style โดยที่ output นั้น หรือ อย่างหนึ่งอย่างใดดังต่อไปนี้ print, screen, handheld หรือ all โดยสามารถกำหนดหลายค่าได้ด้วยการคั่นด้วยลูกน้ำ

<link href=”style/styles-about.css” rel=”stylesheet” type=”text/css” />
<link href=”style/styles-about-print.css” rel=”stylesheet” type=”text/css” media=”print” />
สิ่งเพิ่มเติมที่ 8.13 การกำหนดให้ เรียกใช้ บาง stylesheet เพื่อแสดงผลในบางอุปกรณ์ โดยเราจะกำหนดเอาไว้ในส่วนของ media attribute ที่ link element

หรือว่าเราจะใช้ @import rule เพื่อให้มีผลต่ออุปกรณ์นั้นก็ได้ โดยที่เราจะวาง output เอาไว้ที่ด้านหลัง URL

<style>
@import “style/styles-about.css” screen;
@import “style/styles-about-print.css” print;
</style>
สิ่งเพิ่มเติมที่ 8.14 การใช้ style ในรูปแบบ @import rule

เพิ่มเติม
- ค่าเดิมที่เป็น default ของ media attribute นั้นคือ all หมายความว่าเอาไปใช้กับทุกๆอุปกรณ์
-ค่าที่เราจะเอาไปใช้ได้นั้น มีทั้งหมด 10 รูปแบบด้วยกันคือ all, aural, braille, embbossed, handheld, print, projection, screen, tty และ tv โดยควรกำหนดให้เหมาะสมสำหรับการใช้กับอุปกรณ์แต่ละประเภท
-การที่เราใช้ @media rule นั้น จะรองรับรูปแบบได้น้อยกว่า ข้อด้านบน
-สำหรับการเขียน style sheet เพื่อให้รองรับกับอุปกรณ์พกพานั้นเราจะกล่าวถึงในภายหลัง

No comments yet.
You must be logged in to post a comment.