HTML <link media> แอตทริบิวต์ใช้เพื่อระบุประเภทอุปกรณ์ที่เนื้อหา (โดยปกติคือไฟล์ 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"ซึ่งหมายความว่าสไตล์ชีตนี้เหมาะสำหรับการพิมพ์/แสดงตัวอย่าง
