HTML <source> media অ্যাট্রিবিউট

HTML <source> ট্যাগ

বর্ণনা ও ব্যবহার

media এই অ্যাট্রিবিউট সাধারণত CSS-তে নির্ধারিত কোনও মিডিয়া কোনসুল নিয়ে গ্রহণ করে。

দৃষ্টান্ত:এই অ্যাট্রিবিউট একাধিক মান গ্রহণ করতে পারে。

প্রয়োগ

একটি <picture> এলিমেন্ট যা দুটি সোর্স ফাইল এবং একটি রিজার্ভ চিত্র ধারণ করে:

<picture>
  <source media="(min-width:650px)" srcset="flower-1.jpg">
  <source media="(min-width:465px)" srcset="flower-2.jpg">
  <img src="flower-3.jpg" alt="Flowers" style="width:auto;">
</picture>

স্বয়ং প্রয়োগ করুন

সংজ্ঞান

<source media="media_query>

সম্ভাব্য কর্মকাণ্ড

কর্মকাণ্ড বর্ণনা
and বিলোপ কর্মকাণ্ডটি নির্দিষ্ট করে
not বিলোপ কর্মকাণ্ডটি নির্দিষ্ট করে
, বিলোপ কর্মকাণ্ডটি নির্দিষ্ট করে

ডিভাইস

মান বর্ণনা
all ডিফল্ট।সকল ডিভাইসের জন্য উপযুক্ত
aural আউডিয়াল সিন্থেসাইজার
braille ব্রাইল ফিডব্যাক ডিভাইস
handheld হ্যান্ডহেল্ড ডিভাইস (ছোট স্ক্রিন, সীমিত ব্যান্ডওয়াইড)
projection প্রোজেকশন
print প্রিন্ট প্রদর্শন মোড/প্রিন্ট পেজ
screen কম্পিউটার স্ক্রিন
tty টেলিটাইপ মেশিন এবং একই প্রস্থ চারিত্রিক গ্রিড ব্যবহারকারী সমস্ত মাধ্যম
tv টেলিভিশন ধরনের ডিভাইস (নিম্ন রেজলিউশন, সীমিত পেজিং ক্ষমতা)

মান

মান বর্ণনা
width

নির্দিষ্ট লক্ষ্য প্রদর্শক অঞ্চলের প্রস্থ নির্দিষ্ট করে

min-" এবং "max-" প্রিফিক্স ব্যবহার করা যেতে পারে

উদাহরণ: media="screen and (min-width:500px)"
height

নির্দিষ্ট লক্ষ্য প্রদর্শক অঞ্চলের উচ্চতা নির্দিষ্ট করে

min-" এবং "max-" প্রিফিক্স ব্যবহার করা যেতে পারে

উদাহরণ: media="screen and (max-height:700px)"
device-width

নির্দিষ্ট লক্ষ্য প্রদর্শক/কাগজের প্রস্থ নির্দিষ্ট করে

min-" এবং "max-" প্রিফিক্স ব্যবহার করা যেতে পারে

উদাহরণ: media="screen and (device-width:500px)"
device-height

নির্দিষ্ট লক্ষ্য প্রদর্শক/কাগজের উচ্চতা নির্দিষ্ট করে

min-" এবং "max-" প্রিফিক্স ব্যবহার করা যেতে পারে

উদাহরণ: media="screen and (device-height:500px)"
orientation

নির্দিষ্ট লক্ষ্য প্রদর্শক/কাগজের দিক নির্দিষ্ট করে

সম্ভাব্য মান: "portrait" বা "landscape"

উদাহরণ: media="all and (orientation: landscape)"
aspect-ratio

নির্দিষ্ট লক্ষ্য প্রদর্শক অঞ্চলের প্রস্থ/উচ্চতা অনুপাত নির্দিষ্ট করে

min-" এবং "max-" প্রিফিক্স ব্যবহার করা যেতে পারে

উদাহরণ: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

নির্দিষ্ট লক্ষ্য প্রদর্শক/কাগজের device-width/device-height অনুপাত নির্দিষ্ট করে

min-" এবং "max-" প্রিফিক্স ব্যবহার করা যেতে পারে

উদাহরণ: media="screen and (aspect-ratio:16/9)"
color

নির্দিষ্ট লক্ষ্য প্রদর্শকটির প্রত্যেক রঙের বিটের সংখ্যা নির্দিষ্ট করে

min-" এবং "max-" প্রিফিক্স ব্যবহার করা যেতে পারে

উদাহরণ: media="screen and (color:3)"
color-index

নির্দিষ্ট লক্ষ্য প্রদর্শকটি যে রঙগুলি প্রক্রিয়াজাত করতে পারে তা নির্দিষ্ট করে

min-" এবং "max-" প্রিফিক্স ব্যবহার করা যেতে পারে

উদাহরণ: media="screen and (min-color-index:256)"
monochrome

একবচনা ফ্রেম বাফারের প্রত্যেক পিক্সেলের বিট

min-" এবং "max-" প্রিফিক্স ব্যবহার করা যেতে পারে

উদাহরণ: media="screen and (monochrome:2)"
resolution

লক্ষ্য সম্প্রচারক/কাগজের পিক্সেল ঘনত্ব (dpi বা dpcm) নির্ধারণ

min-" এবং "max-" প্রিফিক্স ব্যবহার করা যেতে পারে

উদাহরণ: media="print and (resolution:300dpi)"
scan

tv সম্প্রচারকের স্ক্যান পদ্ধতি নির্ধারণ

সম্ভাব্য মান: "progressive" এবং "interlace"

উদাহরণ: media="tv and (scan:interlace)"
grid

প্রদত্ত আউটপুট ডিভাইসটি গ্রিড হবে বা বিটম্যাপ

সম্ভাব্য মান: "1" গ্রিড, "0" অন্যান্য

উদাহরণ: media="handheld and (grid:1)"

ব্রাউজার সমর্থন

সারণীতে সংখ্যা বলা হয় এই ব্রাউজারের প্রথম এই প্রক্রিয়াটি সম্পূর্ণরূপে সমর্থন করা হয়

চ্রোম এজ ফায়ারফক্স স্যাফারি ওপেরা
চ্রোম এজ ফায়ারফক্স স্যাফারি ওপেরা
38.0 9.0 15.0 9.1 25.0

HTML <source> ট্যাগ