prefers-reduced-motion: কখনও কখনও কম নড়াচড়া বেশি হয়

প্রিফারস-রিডুড-মোশন মিডিয়া ক্যোয়ারী শনাক্ত করে যে ব্যবহারকারী অপারেটিং সিস্টেমকে অ্যানিমেশন বা গতির পরিমাণ কমানোর জন্য অনুরোধ করেছে কিনা।

Thomas Steiner

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

বাস্তব জীবনে এবং ওয়েবে খুব বেশি গতি

অন্য দিন, আমি আমার বাচ্চাদের সাথে আইস স্কেটিং করছিলাম। এটি একটি সুন্দর দিন ছিল, সূর্য জ্বলছিল, এবং বরফের রিঙ্কটি লোকেদের সাথে ঠাসা ছিল ⛸। এর সাথে একমাত্র সমস্যা: আমি ভিড়ের সাথে ভালভাবে মানিয়ে নিতে পারি না। অনেক গতিশীল লক্ষ্যের সাথে, আমি কোন কিছুতে ফোকাস করতে ব্যর্থ হই, এবং শেষ পর্যন্ত হারিয়ে যাই এবং সম্পূর্ণ ভিজ্যুয়াল ওভারলোডের অনুভূতি সহ, প্রায় একটি অ্যান্টিলের দিকে তাকানোর মতন 🐜।

মাঝে মাঝে, ওয়েবে একই ঘটনা ঘটতে পারে: ফ্ল্যাশিং বিজ্ঞাপন, অভিনব প্যারালাক্স ইফেক্ট, বিস্ময়কর প্রকাশ অ্যানিমেশন, অটোপ্লেয়িং ভিডিও এবং আরও অনেক কিছু সহ, ওয়েব কখনও কখনও বেশ অপ্রতিরোধ্য হতে পারে … সুখের বিষয়, বাস্তব জীবনের বিপরীতে, এর একটি সমাধান রয়েছে৷ CSS মিডিয়া ক্যোয়ারী prefers-reduced-motion ডেভেলপারদের এমন ব্যবহারকারীদের জন্য একটি পৃষ্ঠার একটি বৈকল্পিক তৈরি করতে দেয় যারা, ভাল, কম গতি পছন্দ করে। এতে ভিডিও অটোপ্লে করা থেকে বিরত থাকা থেকে শুরু করে কিছু নির্দিষ্ট আলংকারিক প্রভাব অক্ষম করা থেকে শুরু করে নির্দিষ্ট ব্যবহারকারীদের জন্য একটি পৃষ্ঠাকে সম্পূর্ণরূপে পুনরায় ডিজাইন করা হতে পারে।

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

ওয়েবে অ্যানিমেশন

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

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

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

মোশন-ট্রিগারড ভেস্টিবুলার স্পেকট্রাম ডিসঅর্ডার

কিছু ব্যবহারকারী অ্যানিমেটেড বিষয়বস্তু থেকে বিভ্রান্তি বা বমি বমি ভাব অনুভব করেন। উদাহরণস্বরূপ, স্ক্রলিং অ্যানিমেশনগুলি ভেস্টিবুলার ডিসঅর্ডার সৃষ্টি করতে পারে যখন স্ক্রলিং এর সাথে যুক্ত প্রধান উপাদান ব্যতীত অন্যান্য উপাদানগুলি অনেক বেশি ঘোরাফেরা করে। উদাহরণস্বরূপ, প্যারালাক্স স্ক্রলিং অ্যানিমেশনগুলি ভেস্টিবুলার ডিসঅর্ডার সৃষ্টি করতে পারে কারণ পটভূমি উপাদানগুলি অগ্রভাগের উপাদানগুলির চেয়ে ভিন্ন গতিতে চলে। ভেস্টিবুলার (অভ্যন্তরীণ কানের) ব্যাধির প্রতিক্রিয়াগুলির মধ্যে মাথা ঘোরা, বমি বমি ভাব এবং মাইগ্রেনের মাথাব্যথা রয়েছে এবং কখনও কখনও পুনরুদ্ধারের জন্য বিছানা বিশ্রামের প্রয়োজন হয়।

অপারেটিং সিস্টেমে গতি সরান

অনেক অপারেটিং সিস্টেমে দীর্ঘ সময়ের জন্য কম গতির জন্য একটি পছন্দ নির্দিষ্ট করার জন্য অ্যাক্সেসযোগ্যতা সেটিংস রয়েছে। নিম্নলিখিত স্ক্রিনশটগুলি macOS Mojave-এর Reduce motion preference এবং Android Pie-এর রিমুভ অ্যানিমেশন পছন্দ দেখায়৷ চেক করা হলে, এই পছন্দগুলি অপারেটিং সিস্টেমকে অ্যাপ্লিকেশান লঞ্চিং অ্যানিমেশনের মতো আলংকারিক প্রভাবগুলি ব্যবহার না করার কারণ করে৷ অ্যাপ্লিকেশনগুলি নিজেরাও এই সেটিংটিকে সম্মান করতে পারে এবং করা উচিত এবং সমস্ত অপ্রয়োজনীয় অ্যানিমেশনগুলি সরিয়ে ফেলতে পারে৷

ওয়েবে গতি সরান

মিডিয়া ক্যোয়ারি লেভেল 5 ওয়েবে কম গতি ব্যবহারকারী পছন্দ নিয়ে আসে। মিডিয়া ক্যোয়ারীগুলি লেখকদের ব্যবহারকারী এজেন্টের মান বা বৈশিষ্ট্যগুলি পরীক্ষা এবং অনুসন্ধান করার অনুমতি দেয় বা নথিটি রেন্ডার করা থেকে স্বাধীন ডিভাইস প্রদর্শন করে৷ মিডিয়া ক্যোয়ারী prefers-reduced-motion শনাক্ত করতে ব্যবহৃত হয় যে ব্যবহারকারী এটি ব্যবহার করে অ্যানিমেশন বা গতির পরিমাণ কমানোর জন্য একটি অপারেটিং সিস্টেম পছন্দ সেট করেছে কিনা। এটি দুটি সম্ভাব্য মান নিতে পারে:

• no-preference : নির্দেশ করে যে ব্যবহারকারী অন্তর্নিহিত অপারেটিং সিস্টেমে কোন পছন্দ করেননি। এই কীওয়ার্ড মানটি বুলিয়ান প্রসঙ্গে false হিসাবে মূল্যায়ন করে।
• reduce : ইঙ্গিত করে যে ব্যবহারকারী একটি অপারেটিং সিস্টেম পছন্দ সেট করেছেন যা নির্দেশ করে যে ইন্টারফেসগুলি চলাচল বা অ্যানিমেশনকে কমিয়ে আনতে হবে, বিশেষত সেই বিন্দুতে যেখানে সমস্ত অপ্রয়োজনীয় আন্দোলন সরানো হয়।

CSS এবং JavaScript প্রসঙ্গ থেকে মিডিয়া ক্যোয়ারী নিয়ে কাজ করা

সমস্ত মিডিয়া কোয়েরির মতো, একটি CSS প্রসঙ্গ এবং একটি জাভাস্ক্রিপ্ট প্রসঙ্গ থেকে prefers-reduced-motion চেক করা যেতে পারে।

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

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}

জাভাস্ক্রিপ্টের সাথে prefers-reduced-motion এর সাথে কিভাবে কাজ করতে হয় তা বোঝাতে, কল্পনা করুন আমি ওয়েব অ্যানিমেশন API এর সাথে একটি জটিল অ্যানিমেশন সংজ্ঞায়িত করেছি। যখন ব্যবহারকারীর পছন্দ পরিবর্তন হয় তখন ব্রাউজার দ্বারা CSS নিয়মগুলি গতিশীলভাবে ট্রিগার করা হবে, জাভাস্ক্রিপ্ট অ্যানিমেশনগুলির জন্য আমাকে পরিবর্তনগুলি শুনতে হবে এবং তারপর ম্যানুয়ালি আমার সম্ভাব্য ইন-ফ্লাইট অ্যানিমেশনগুলি বন্ধ করতে হবে (অথবা ব্যবহারকারী আমাকে অনুমতি দিলে সেগুলি পুনরায় চালু করুন):

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

মনে রাখবেন যে প্রকৃত মিডিয়া কোয়েরির চারপাশে বন্ধনীগুলি বাধ্যতামূলক:

window.matchMedia('prefers-reduced-motion: reduce');

window.matchMedia('(prefers-reduced-motion: reduce)');

<picture> প্রসঙ্গ থেকে মিডিয়া ক্যোয়ারী নিয়ে কাজ করা

একটি আকর্ষণীয় ব্যবহারের ক্ষেত্রে একটি অ্যানিমেটেড AVIF, WebP, বা GIF চালানো media বৈশিষ্ট্যের উপর নির্ভরশীল করা। যদি (prefers-reduced-motion: no-preference) true মূল্যায়ন করে, তবে অ্যানিমেটেড সংস্করণ প্রদর্শন করা নিরাপদ, অন্যথায় স্ট্যাটিক সংস্করণ:

<picture>
  <!-- Animated versions. -->
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <source
    srcset="nyancat.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <!-- Static versions. -->
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

আপনি নিম্নলিখিত উদাহরণ দেখতে পারেন. পার্থক্য দেখতে আপনার ডিভাইসের গতি পছন্দ টগল করার চেষ্টা করুন।

অনুরোধের সময় ব্যবহারকারীর পছন্দগুলি আবিষ্কার করুন

Sec-CH-Prefers-Reduced-Motion ক্লায়েন্ট ইঙ্গিত শিরোনাম সাইটগুলিকে অনুরোধের সময় ঐচ্ছিকভাবে ব্যবহারকারীর গতি পছন্দগুলি প্রাপ্ত করার অনুমতি দেয়, সার্ভারগুলিকে পারফরম্যান্সের কারণে সঠিক CSS ইনলাইন করতে দেয়৷

ডেমো

আমি Rogério Vicente এর আশ্চর্যজনক 🐈 HTTP স্ট্যাটাস বিড়ালের উপর ভিত্তি করে একটি ছোট ডেমো তৈরি করেছি। প্রথমে, কৌতুকটির প্রশংসা করার জন্য একটু সময় নিন, এটি হাস্যকর এবং আমি অপেক্ষা করব। এখন আপনি ফিরে এসেছেন, আমাকে ডেমো পরিচয় করিয়ে দিন। যখন আপনি স্ক্রোল করেন, প্রতিটি HTTP স্থিতি বিড়াল পর্যায়ক্রমে ডান বা বাম দিক থেকে প্রদর্শিত হয়। এটি একটি বাটারি মসৃণ 60 FPS অ্যানিমেশন, কিন্তু পূর্বে বর্ণিত হিসাবে, কিছু ব্যবহারকারী এটিকে অপছন্দ করতে পারে বা এমনকি এটির দ্বারা মোশন সিক হতে পারে, তাই ডেমোটি prefers-reduced-motion সম্মান করার জন্য প্রোগ্রাম করা হয়েছে। এটি এমনকি গতিশীলভাবে কাজ করে, যাতে ব্যবহারকারীরা তাদের পছন্দ পরিবর্তন করতে পারেন উড়তে, কোন পুনরায় লোড প্রয়োজন হয় না। যদি একজন ব্যবহারকারী হ্রাস গতি পছন্দ করে, অপ্রয়োজনীয় প্রকাশ অ্যানিমেশন চলে গেছে, এবং শুধুমাত্র নিয়মিত স্ক্রোলিং গতি বাকি আছে। নিম্নলিখিত স্ক্রিনকাস্টটি কর্মে ডেমো দেখায়:

উপসংহার

আধুনিক ওয়েবসাইটগুলির জন্য ব্যবহারকারীর পছন্দগুলিকে সম্মান করা গুরুত্বপূর্ণ, এবং ওয়েব ডেভেলপারদের এটি করতে সক্ষম করার জন্য ব্রাউজারগুলি আরও বেশি বেশি বৈশিষ্ট্য প্রকাশ করছে। আর একটি লঞ্চ করা উদাহরণ হল prefers-color-scheme , যা সনাক্ত করে যে ব্যবহারকারী একটি হালকা বা গাঢ় রঙের স্কিম পছন্দ করে কিনা। হ্যালো ডার্কনেস, মাই ওল্ড ফ্রেন্ড 🌒 আমার নিবন্ধে আপনি prefers-color-scheme সম্পর্কে সবকিছু পড়তে পারেন।

সিএসএস ওয়ার্কিং গ্রুপ আরও ব্যবহারকারীর পছন্দের মিডিয়া কোয়েরি যেমন prefers-reduced-transparency (ব্যবহারকারী কম স্বচ্ছতা পছন্দ করে কিনা তা শনাক্ত করে), prefers-contrast (শনাক্ত করে যদি ব্যবহারকারী সিস্টেমকে সংলগ্ন রঙের মধ্যে বৈসাদৃশ্যের পরিমাণ বাড়াতে বা কমাতে অনুরোধ করে থাকে তা সনাক্ত করে। ), এবং inverted-colors (ব্যবহারকারী উল্টানো রং পছন্দ করে কিনা তা সনাক্ত করে)।

(বোনাস) সমস্ত ওয়েবসাইটে জোরপূর্বক গতি হ্রাস করা

প্রতিটি সাইট prefers-reduced-motion ব্যবহার করবে না, বা আপনার স্বাদের জন্য উল্লেখযোগ্যভাবে যথেষ্ট নয়। আপনি যদি, যে কারণেই হোক, সমস্ত ওয়েবসাইটে গতি বন্ধ করতে চান, আপনি আসলে করতে পারেন। এটি ঘটানোর একটি উপায় হল নিম্নলিখিত সিএসএস সহ একটি স্টাইল শীট আপনার পরিদর্শন করা প্রতিটি ওয়েব পৃষ্ঠায় ইনজেক্ট করা। সেখানে বেশ কয়েকটি ব্রাউজার এক্সটেনশন রয়েছে (আপনার নিজের ঝুঁকিতে ব্যবহার করুন!) যা এটির অনুমতি দেয়।

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
  }
}

এটি যেভাবে কাজ করে তা হল যে পূর্ববর্তী CSS সমস্ত অ্যানিমেশনের সময়কালকে ওভাররাইড করে এবং এত অল্প সময়ে পরিবর্তন করে যে সেগুলি আর লক্ষ্য করা যায় না। যেহেতু কিছু ওয়েবসাইট সঠিকভাবে কাজ করার জন্য চালানোর জন্য একটি অ্যানিমেশনের উপর নির্ভর করে (হয়ত কারণ একটি নির্দিষ্ট পদক্ষেপ animationend ইভেন্টের ফায়ারিংয়ের উপর নির্ভর করে), তত বেশি আমূল animation: none !important; পদ্ধতি কাজ করবে না। এমনকি পূর্ববর্তী হ্যাকটিও সমস্ত ওয়েবসাইটে সফল হওয়ার গ্যারান্টি দেওয়া হয় না (উদাহরণস্বরূপ, এটি ওয়েব অ্যানিমেশন API ব্যবহার করে শুরু করা গতিকে থামাতে পারে না), তাই আপনি ভাঙার লক্ষ্য করলে এটি নিষ্ক্রিয় করতে ভুলবেন না।

সম্পর্কিত লিঙ্ক

• মিডিয়া প্রশ্নের লেভেল 5 স্পেকের সর্বশেষ সম্পাদকের খসড়া।
• Chrome প্ল্যাটফর্ম স্থিতিতে prefers-reduced-motion
• prefers-reduced-motion Chromium বাগ ।
• পোস্টিং বাস্তবায়ন করার অভিপ্রায় ব্লিঙ্ক করুন।

স্বীকৃতি

স্টিফেন ম্যাকগ্রুরের কাছে ব্যাপক চিৎকার-আউট যিনি Chrome-এ prefers-reduced-motion প্রয়োগ করেছেন এবং— রব ডডসনের সাথে-একসাথে এই নথিটি পর্যালোচনা করেছেন। আনস্প্ল্যাশে হান্না কাহেপের হিরো ছবি ।