एचटीएमएल <link media> विशेषता का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि किस उपकरण प्रकार की संपत्ति (आमतौर पर एक सीएसएस फ़ाइल) को अनुकूलित किया जाना चाहिए। इस तरह आपके पास अलग-अलग उद्देश्यों के लिए अलग-अलग सीएसएस स्टाइलशीट हो सकते हैं।
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". का उपयोग करता है विशेषता, जिसका अर्थ है कि यह स्टाइलशीट प्रिंट/पूर्वावलोकन के लिए अनुकूलित है।