মিডিয়া বৈশিষ্ট্য

প্রতিক্রিয়াশীল নকশা মিডিয়া প্রশ্ন ছাড়া সম্ভব হবে না. মিডিয়া প্রশ্ন করার আগে লোকেরা আপনার ওয়েবসাইট দেখার জন্য কি ধরনের ডিভাইস ব্যবহার করছে তা জানার কোন উপায় ছিল না। ডিজাইনারদের অনুমান করতে হয়েছিল। এই অনুমানগুলি নির্দিষ্ট-প্রস্থ ডিজাইন বা তরল লেআউটগুলিতে এনকোড করা হয়েছিল।

মিডিয়া প্রশ্নের প্রবর্তনের সাথে সাথে সবই বদলে গেছে। প্রথমবারের মতো ডিজাইনাররা অর্ধেক লোকেদের সাথে দেখা করতে পারে। ডিজাইনাররা মানুষের ডিভাইসে সাড়া দিতে তাদের লেআউট সামঞ্জস্য করতে পারে।

মনে রাখবেন, একটি মিডিয়া কোয়েরিতে একটি ঐচ্ছিক মিডিয়া প্রকার এবং একটি বাধ্যতামূলক মিডিয়া বৈশিষ্ট্য রয়েছে। কয়েক বছর ধরে মিডিয়ার ধরণে খুব বেশি পরিবর্তন হয়নি। এখনও মাত্র চারটি সম্ভাব্য মান আছে:

@media all
@media screen
@media print
@media speech

অন্যদিকে মিডিয়া বৈশিষ্ট্যগুলি ব্যাপকভাবে প্রসারিত হয়েছে। ডিজাইনাররা এখন অর্ধেক পথ অতিক্রম করে ব্যবহারকারীদের সাথে দেখা করতে পারে, স্ক্রিনের আকারের চেয়ে অনেক বেশি মানানসই ডিজাইনগুলিকে মানিয়ে নিতে পারে৷

ভিউপোর্টের মাত্রা

এখন পর্যন্ত ওয়েবে সবচেয়ে জনপ্রিয় মিডিয়া প্রশ্ন হল ভিউপোর্ট প্রস্থ নিয়ে কাজ করা। কিন্তু এমনকি এখানে, আপনি একটি পছন্দ সঙ্গে উপস্থাপন করছি. আপনি একটি নির্দিষ্ট প্রস্থের নীচে শৈলী প্রয়োগ করতে max-width মিডিয়া বৈশিষ্ট্যটি ব্যবহার করতে পারেন, অথবা আপনি একটি নির্দিষ্ট প্রস্থের উপরে শৈলী প্রয়োগ করতে min-width মিডিয়া বৈশিষ্ট্যটি ব্যবহার করতে পারেন।

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 45em) {
  main {
    display: block;
  }
}

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

ব্যক্তিগতভাবে, আমি min-width ব্যবহার করতে পছন্দ করি। আমি একটি সংযোজন উপায়ে লেআউট শৈলী প্রয়োগ করি। আমি পূর্ববর্তী নিয়মগুলি পূর্বাবস্থায় ফেরানোর পরিবর্তে প্রতিটি ব্রেকপয়েন্টে নতুন লেআউট নিয়ম চালু করি।

এই সংযোজন পদ্ধতি উচ্চতার জন্যও কাজ করে। min-height ব্যবহার করে আপনি আরও নিয়ম প্রবর্তন করতে পারেন কারণ আরও ভিউপোর্ট উচ্চতা পাওয়া যায়। উদাহরণস্বরূপ, আপনার কাছে একটি শিরোনাম উপাদান থাকতে পারে যা আপনি ব্রাউজার উইন্ডোর শীর্ষে নোঙ্গর করতে চান যদি পর্যাপ্ত উল্লম্ব স্থান থাকে।

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

তবে আপনি চাইলে max-height মিডিয়া বৈশিষ্ট্যটি ব্যবহার করতে পারেন। এখানে, হেডারটি ডিফল্টরূপে নোঙ্গর করা হয়, কিন্তু পর্যাপ্ত উল্লম্ব স্থান না থাকলে আঠালোতা সরানো হয়।

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

min- এবং max- উপসর্গের মধ্যে নির্বাচন করা শুধুমাত্র width এবং height প্রযোজ্য নয়। aspect-ratio মিডিয়া বৈশিষ্ট্য একই পছন্দ অফার করে. আপনি যদি প্রস্থ থেকে উচ্চতার সঠিক অনুপাতে শৈলী প্রয়োগ করতে চান তবে এটি একটি উপসর্গবিহীন সংস্করণও অফার করে।

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

বিভিন্ন আকৃতির অনুপাতের জন্য বিভিন্ন শৈলী প্রদান করা দ্রুত হাত থেকে বেরিয়ে যেতে পারে। আপনার যদি সেই সূক্ষ্ম মাত্রার নিয়ন্ত্রণের প্রয়োজন না হয়, তাহলে orientation মিডিয়া বৈশিষ্ট্যটি আপনার প্রয়োজনের সাথে আরও ভালভাবে মানানসই হতে পারে। এর দুটি সম্ভাব্য মান রয়েছে: portrait বা landscape ।

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

যদিও "পোর্ট্রেট" এবং "ল্যান্ডস্কেপ" শব্দগুলি প্রায়শই মোবাইল ডিভাইসের ওরিয়েন্টেশন বোঝাতে ব্যবহৃত হয়, তবে orientation মিডিয়া বৈশিষ্ট্যটি ডিভাইস-নির্দিষ্ট নয়। একটি সাধারণ ল্যাপটপে একটি পূর্ণ-স্ক্রীন ব্রাউজার উইন্ডোতে landscape একটি orientation মান থাকবে।

প্রদর্শন করে

বিভিন্ন ডিসপ্লেতে বিভিন্ন পিক্সেল ঘনত্ব থাকে, যা dpi ​​, ডট প্রতি ইঞ্চিতে পরিমাপ করা হয়। আপনি resolution মিডিয়া বৈশিষ্ট্য ব্যবহার করে বিভিন্ন পিক্সেল ঘনত্বের জন্য আপনার শৈলী সামঞ্জস্য করতে পারেন। aspect-ratio মতো, resolution তিনটি প্রকারে আসে: সর্বনিম্ন, সর্বোচ্চ এবং সঠিক।

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

আপনি কোনো resolution মিডিয়া প্রশ্ন ব্যবহার করার প্রয়োজন হতে পারে. পিক্সেল ঘনত্ব সাধারণত চিত্রগুলির জন্য একটি সমস্যা, এবং প্রতিক্রিয়াশীল চিত্রগুলি সরাসরি HTML এ পিক্সেল ঘনত্বের সাথে মোকাবিলা করার একটি উপায়।

অন্যদিকে, CSS হল যেখানে আপনি আপনার অ্যানিমেশন এবং ট্রানজিশন সংজ্ঞায়িত করেন। update মিডিয়া বৈশিষ্ট্য ব্যবহার করে বিভিন্ন রিফ্রেশ হারে প্রতিক্রিয়া জানাতে আপনি সেই অ্যানিমেশনগুলি এবং রূপান্তরগুলি সামঞ্জস্য করতে পারেন। এই মিডিয়া বৈশিষ্ট্যটি তিনটি মানগুলির মধ্যে একটির রিপোর্ট করে: none , slow এবং fast ৷

none update মান মানে কোন রিফ্রেশ রেট নেই। একটি মুদ্রিত পৃষ্ঠা, উদাহরণস্বরূপ, আপডেট করা যাবে না।

slow একটি update মান মানে ডিসপ্লে দ্রুত রিফ্রেশ করতে পারে না। একটি ই-কালি প্রদর্শন একটি ধীর রিফ্রেশ হার সহ একটি স্ক্রিনের একটি উদাহরণ।

fast একটি update মান মানে অ্যানিমেশন এবং ট্রানজিশন পরিচালনা করার জন্য ডিসপ্লে যথেষ্ট দ্রুত রিফ্রেশ করে।

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

প্রদর্শনের সমস্ত দিক হার্ডওয়্যার ক্ষমতার সাথে সম্পর্কিত নয়। থিমিং-এর মডিউলে , আপনি দেখেছেন কিভাবে একটি ওয়েব অ্যাপ ম্যানিফেস্ট ফাইলে বৈশিষ্ট্য সংজ্ঞায়িত করতে হয়। এই বৈশিষ্ট্যগুলির মধ্যে একটিকে display বলা হয়, এবং আপনি এটিকে fullscreen , standalone , minimum-ui বা browser মান দিতে পারেন। সংশ্লিষ্ট display-mode মিডিয়া বৈশিষ্ট্য আপনাকে এই বিভিন্ন বিকল্পের জন্য আপনার শৈলীগুলিকে টেইলার করতে দেয়।

বলুন আপনি আপনার ওয়েব অ্যাপ ম্যানিফেস্টে standalone একটি display মান প্রদান করেছেন। কেউ যদি আপনার সাইটটি তাদের হোম স্ক্রিনে যোগ করে, তবে সাইটটি কোনো ব্রাউজার ইন্টারফেস ছাড়াই চালু হবে। আপনি সেই ব্যবহারকারীদের জন্য একটি ব্যাক বোতাম প্রদর্শন করার সিদ্ধান্ত নিতে পারেন।

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

রঙ

একটি ডিভাইসের রঙ ক্ষমতা জিজ্ঞাসা করার জন্য অনেক মিডিয়া বৈশিষ্ট্য আছে. আপনি যদি কোনো ডিসপ্লেতে আপনার স্টাইল সামঞ্জস্য করতে চান যা শুধুমাত্র ধূসর শেডের আউটপুট দেয়, আপনি কোনো মান ছাড়াই monochrome মিডিয়া বৈশিষ্ট্য ব্যবহার করতে পারেন।

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

একটি সংশ্লিষ্ট color মিডিয়া বৈশিষ্ট্য আছে.

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

রঙিন পর্দার জন্য, আপনি মিডিয়া বৈশিষ্ট্যগুলির সাথে ক্যোয়ারী লিখতে পারেন color-gamut , color-index , or dynamic-range . তাদের সব পর্দার রঙ ক্ষমতা সম্পর্কে নির্দিষ্ট বিবরণ রিপোর্ট.

এই উদাহরণে, রঙের মানগুলি dynamic-range মিডিয়া বৈশিষ্ট্যের প্রতিক্রিয়া হিসাবে আপডেট হয়, যা প্রদর্শনের সর্বাধিক উজ্জ্বলতা, রঙের গভীরতা এবং বৈপরীত্য অনুপাতের সমন্বয় রিপোর্ট করে। সম্ভাব্য মানগুলি standard বা high । একটি হাই-ডেফিনিশন স্ক্রিন যা high -এর একটি dynamic-range মান রিপোর্ট করে নতুন CSS color() ফাংশন ব্যবহার করে একটি ভিন্ন রঙের স্থান দেওয়া হয়।

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

মিথস্ক্রিয়া

মিডিয়া বৈশিষ্ট্যগুলি আপনার সাইটের সাথে ইন্টারঅ্যাক্ট করতে ব্যবহৃত ইনপুট প্রক্রিয়ার ধরনের রিপোর্ট করতে পারে: hover , any-hover , pointer , এবং any-pointer । আরো বিস্তারিত জানার জন্য মিথস্ক্রিয়া মডিউল দেখুন.

ব্যবহারকারীর পছন্দের প্রশ্ন

CSS ব্যবহার করে, আপনি আপনার ব্যবহারকারীদের সাথে সহযোগিতা করতে পারেন তা নিশ্চিত করতে যে তারা তাদের জন্য কাজ করে এমনভাবে আপনার সামগ্রী অ্যাক্সেস করতে পারে। এই পাঠে, আপনি শিখেছেন কিভাবে ব্যবহারকারীর ডিভাইসের মাত্রা এবং বৈশিষ্ট্যের উপর ভিত্তি করে বিভিন্ন CSS প্রয়োগ করতে হয়। কিন্তু আপনি ব্যবহারকারীর সেটিংসের উপর ভিত্তি করে বিভিন্ন CSS প্রয়োগ করতে পারেন।

অন্ধকার এবং হালকা মোড

আপনি হালকা বা গাঢ় থিমের জন্য আপনার ব্যবহারকারীর পছন্দের প্রতিক্রিয়া জানাতে পারেন। অনেক ব্যবহারকারী এটি একটি সিস্টেম পছন্দ হিসাবে সেট করে।

UI উপাদানের জন্য রঙের স্কিম সেট করা হচ্ছে

ব্রাউজারটি স্ক্রলবার এবং ফর্ম উপাদানগুলির মতো জিনিসগুলির জন্য ডিফল্ট রঙ সরবরাহ করে। যাদের color-scheme: light , বা color-scheme: dark । আপনি এটিও নির্দিষ্ট করতে পারেন যে পৃষ্ঠাটি উভয়কেই সমর্থন করে, color-scheme: light dark । আপনি পুরো পৃষ্ঠার জন্য স্কিম সেট করতে :root বা html উপাদানে এটি সেট করতে পারেন, অথবা আপনি নির্দিষ্ট উপাদানগুলির জন্য এটিকে ওভাররাইড করতে পারেন।

আপনার শৈলী লোড হওয়ার আগে একটি পৃষ্ঠার স্কিম সেট করতে আপনি color-scheme জন্য একটি meta ট্যাগও সেট করতে পারেন। আপনি যদি পৃষ্ঠার একটি উপাদানে color-scheme: normal সেট করেন, তাহলে এটি এই মেটা ট্যাগে আপনার সেট করা color-scheme মান ব্যবহার করবে।

<meta name="color-scheme" content="dark light">

prefers-color-scheme media বৈশিষ্ট্য

আপনি prefers-color-scheme জন্য একটি মিডিয়া ক্যোয়ারী সহ ব্যবহারকারীর পছন্দের রঙের থিমের প্রতিক্রিয়া হিসাবে কাস্টম শৈলীও সংজ্ঞায়িত করতে পারেন।

light-dark

আপনি যদি আপনার ব্যবহারকারীদের একটি হালকা এবং একটি গাঢ় থিম উভয়ের মধ্যে পছন্দ প্রদান করেন, তাহলে আপনি মিডিয়া কোয়েরির ভিতরে প্রতিটি রঙ সেট করার জন্য এটি ভার্বস খুঁজে পেতে পারেন। light-dark() আপনাকে একটি একক সম্পত্তিতে উভয়ই নির্দিষ্ট করতে দেয়।

এটি সক্ষম করতে, আপনাকে color-scheme: light dark । আপনি প্রথমে হালকা মোডে ব্যবহার করার জন্য একটি রঙ সেট করুন এবং তারপরে অন্ধকার মোডে ব্যবহার করার জন্য একটি রঙ সেট করুন।

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

যদি কোনও ব্যবহারকারীর সিস্টেম পছন্দগুলি হালকা মোডের অনুরোধ করার জন্য সেট করে থাকে, তাহলে শিরোনামটি কালো হবে। যদি তাদের পছন্দ ডার্ক মোড হয়, শিরোনাম সাদা হবে।

বৈসাদৃশ্য পছন্দ

আপনার ব্যবহারকারীরা উচ্চ বা নিম্ন বৈসাদৃশ্য সহ বিষয়বস্তু পড়া সহজ মনে করতে পারে এবং আপনার থিমকে ওভাররাইড করতে তাদের সিস্টেম সেট আপ করতে পারে যা তাদের জন্য সবচেয়ে ভাল কাজ করে। আপনার ভূমিকা হল নিশ্চিত করা যে আপনার সাইট এখনও তাদের পছন্দগুলির সাথে ভালভাবে কাজ করে৷

আপনি ক্যাসকেড মডিউলে মনে রাখতে পারেন যে !important স্থানীয় ব্যবহারকারী শৈলীগুলি একটি ওয়েব পৃষ্ঠা প্রদান করা লেখক শৈলীগুলিকে ওভাররাইড করতে পারে৷ এটি ব্যবহারকারীদের শৈলী ব্যবহার করতে দেয় যা তাদের জন্য আরও ভাল কাজ করে।

জোরপূর্বক রং

উইন্ডোজ "কনট্রাস্ট থিম" সরবরাহ করে যা ব্যবহারকারীরা একটি ওয়েবসাইটে থিমগুলিকে ওভাররাইড করে নির্বাচন করতে পারে। এগুলি প্রায়শই উচ্চ কনট্রাস্ট থিম এবং হালকা বা অন্ধকার মোডে হতে পারে। CSS-এ, একে বলা হয় জোরপূর্বক রং, এবং বেশিরভাগ ক্ষেত্রে, আপনার সাইট এই মোডে প্রত্যাশিত আচরণ করবে। বোতাম, লিঙ্ক, ইনপুট এবং অন্যান্য বিষয়বস্তু থিমের রঙ ব্যবহার করবে।

মাঝে মাঝে, আপনাকে আপনার শৈলী সামঞ্জস্য করতে হতে পারে, উদাহরণস্বরূপ যদি আপনি অ-মানক উপায়ে উপাদান ব্যবহার করেন। যখন কোনো ব্যবহারকারী জোরপূর্বক রং সক্রিয় করে তখন শৈলী প্রয়োগ করতে আপনি @media (forced-colors: active) মিডিয়া ক্যোয়ারী ব্যবহার করতে পারেন।

কিছু ক্ষেত্রে, একটি সাইটের শৈলী বিষয়বস্তু বোঝার জন্য অবিচ্ছেদ্য, উদাহরণস্বরূপ একটি রঙ চয়নকারী বা একটি রঙ কী সহ একটি গ্রাফ। আপনি forced-color-adjust: none; জোরপূর্বক রং মোড থেকে অপ্ট আউট করার জন্য একটি উপাদানে। নিশ্চিত করুন যে শুধুমাত্র নির্দিষ্ট উপাদানের উপর অপ্ট আউট করুন, এবং বিষয়বস্তু এখনও জোরপূর্বক রঙ মোডে অ্যাক্সেসযোগ্য কিনা তা পরীক্ষা করুন।

উচ্চ বৈসাদৃশ্য

কিছু ব্যবহারকারী বর্ধিত বৈসাদৃশ্যের জন্য তাদের সিস্টেম সেট করতে পারে। আপনি prefers-contrast: more মিডিয়া ক্যোয়ারী।

গতি কমানো

আপনি prefers-reduced-motion media ক্যোয়ারী দিয়ে হ্রাস গতির জন্য ব্যবহারকারীর পছন্দের প্রতিক্রিয়া জানাতে পারেন। এটি প্রায়শই বিকল্প অ্যানিমেশন সরবরাহ করতে ব্যবহৃত হয় যা বড় নড়াচড়া এড়ায় যা মৃগীরোগ, ভেস্টিবুলার মোশন ডিসঅর্ডার বা মাইগ্রেনের সংবেদনশীলতার জন্য ট্রিগার হতে পারে। অ্যানিমেশন নিয়ে কাজ করার সময় বিবেচনায় আরও পড়ুন।

স্ক্রিপ্টিং

আপনার ব্যবহারকারীরা JavaScript অক্ষম করে আপনার সাইটে যেতে পারে, এবং আপনি আপনার CSS সামঞ্জস্য করতে পারেন যাতে তারা এখনও scripting মিডিয়া ক্যোয়ারী ব্যবহার করে আপনার সামগ্রী অ্যাক্সেস করতে পারে।

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

আপনার উপলব্ধি পরীক্ষা করুন

মিডিয়া বৈশিষ্ট্য আপনার জ্ঞান পরীক্ষা