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"ব্যবহার করা হয়েছে, অর্থাৎ এই স্টাইলশিট প্রিন্ট/প্রিভিউর জন্য অপ্টিমাইজড।