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

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

Thomas Steiner

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

বাস্তব জীবনে এবং ওয়েবে অত্যধিক গতিবিধি

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

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

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

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

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

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

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

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

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

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

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

ওয়েবে মোশন সরান

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

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

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

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

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

/*
  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 কীভাবে কাজ করতে হয় তা বোঝাতে, কল্পনা করুন আমি Web Animations 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 status cats-এর উপর ভিত্তি করে একটি ছোট ডেমো তৈরি করেছি। প্রথমে, রসিকতাটি উপভোগ করার জন্য একটু সময় নিন, এটি হাস্যকর এবং আমি অপেক্ষা করব। এখন আপনি ফিরে এসেছেন, আমাকে ডেমোটি পরিচয় করিয়ে দিন। আপনি যখন স্ক্রোল করবেন, তখন প্রতিটি HTTP status cat পর্যায়ক্রমে ডান বা বাম দিক থেকে প্রদর্শিত হবে। এটি একটি মসৃণ 60 FPS অ্যানিমেশন, কিন্তু যেমনটি আগে উল্লেখ করা হয়েছে, কিছু ব্যবহারকারী এটি অপছন্দ করতে পারেন বা এমনকি এটি দ্বারা গতি অসুস্থ হয়ে পড়তে পারেন, তাই ডেমোটি prefers-reduced-motion সম্মান করার জন্য প্রোগ্রাম করা হয়েছে। এটি এমনকি গতিশীলভাবে কাজ করে, তাই ব্যবহারকারীরা উড়ে যাওয়ার সময় তাদের পছন্দ পরিবর্তন করতে পারেন, কোনও রিলোডের প্রয়োজন নেই। যদি কোনও ব্যবহারকারী হ্রাসকৃত গতি পছন্দ করেন, তবে অপ্রয়োজনীয় প্রকাশ অ্যানিমেশনগুলি চলে যায় এবং কেবল নিয়মিত স্ক্রলিং গতি বাকি থাকে। নিম্নলিখিত স্ক্রিনকাস্টটি ডেমোটিকে কার্যকর দেখায়:

উপসংহার

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

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

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

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

@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 ব্যবহার করে শুরু করা গতি বন্ধ করতে পারে না), তাই ভাঙন লক্ষ্য করলে এটি নিষ্ক্রিয় করতে ভুলবেন না।

রিসোর্স

• সর্বশেষ সম্পাদকের মিডিয়া কোয়েরি খসড়া স্তর ৫ স্পেসিফিকেশন।
• ক্রোম প্ল্যাটফর্ম স্ট্যাটাসে prefers-reduced-motion ।
• prefers-reduced-motion Chromium বাগ ।
• পোস্টিং বাস্তবায়নের জন্য ব্লিঙ্ক ইন্টেন্ট ।

স্বীকৃতি

স্টিফেন ম্যাকগ্রুয়ারের প্রতি কৃতজ্ঞতা, যিনি ক্রোমে prefers-reduced-motion বাস্তবায়ন করেছেন এবং রব ডডসনের সাথে মিলে এই ডকুমেন্টটি পর্যালোচনা করেছেন।