แอตทริบิวต์ <link media> ของ HTML ใช้ระบุประเภทอุปกรณ์ที่สินทรัพย์ (มักเป็นไฟล์ CSS) ควรเพิ่มประสิทธิภาพสำหรับ วิธีนี้ช่วยให้คุณมีสไตล์ชีต CSS ที่แตกต่างกันสำหรับวัตถุประสงค์ที่ต่างกัน
แอตทริบิวต์ media รับค่าหลายค่า โดยที่มากที่สุดคือ:
all: เป็นค่าเริ่มต้น ใช้กับอุปกรณ์ทุกประเภทscreen: สำหรับหน้าจอคอมพิวเตอร์ แท็บเล็ต สมาร์ทโฟน — หน้าจอทุกประเภทprint: สำหรับโหมดพรีวิวการพิมพ์ และหน้าที่พิมพ์
ดังนั้นในทางปฏิบัติ คุณสามารถมีสไตล์ชีต CSS ที่แตกต่างกันซึ่งเพิ่มประสิทธิภาพสำหรับ screen และ print ตามลำดับ
ตัวอย่าง:
<head> <link rel="stylesheet" type="text/css" href="theme.css"> <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print"> </head>ในตัวอย่างด้านบน:
- เอลิเมนต์
<link>แรกไม่ระบุประเภทสื่อ หมายความว่าใช้แอตทริบิวต์media="all"โดยค่าเริ่มต้น (ใช้กับทุกประเภทสื่อ) มันไม่มองเห็น แต่มันอยู่ที่นั่น - เอลิเมนต์
<link>ที่สองใช้แอตทริบิวต์media="screen"หมายความว่าสไตล์ชีตนี้เพิ่มประสิทธิภาพสำหรับหน้าจอ - เอลิเมนต์
<link>ที่สามใช้แอตทริบิวต์media="print"หมายความว่าสไตล์ชีตนี้เพิ่มประสิทธิภาพสำหรับการพิมพ์/พรีวิว
