HTML <link media> एट्रिब्यूट का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि किसी एसेट (आमतौर पर एक CSS फ़ाइल) को किस डिवाइस प्रकार के लिए अनुकूलित किया जाना चाहिए। इस तरह आप अलग-अलग उद्देश्यों के लिए अलग-अलग CSS स्टाइलशीट रख सकते हैं।
media एट्रिब्यूट कई मान लेता है, जिनमें सबसे आम हैं:
all: डिफ़ॉल्ट है, जो सभी मीडिया प्रकार के उपकरणों पर लागू होता है।screen: कंप्यूटर स्क्रीन, टैबलेट, स्मार्टफोन - किसी भी स्क्रीन के लिए है।print: प्रिंट पूर्वावलोकन मोड और प्रिंटेड पेज के लिए है।
तो व्यवहार में, आप screen और print के लिए क्रमशः अनुकूलित अलग-अलग CSS स्टाइलशीट रख सकते हैं।
उदाहरण के लिए:
<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"एट्रिब्यूट का उपयोग करता है, जिसका अर्थ है कि यह स्टाइलशीट प्रिंट/पूर्वावलोकन के लिए अनुकूलित है।
