আধুনিক ওয়েব নির্দেশিকা ব্যবহারের ক্ষেত্রসমূহ

প্রকাশিত: ১৯ মে, ২০২৬

এটি মডার্ন ওয়েব গাইডেন্সে বর্তমানে উপলব্ধ সমস্ত ইউজ কেসের একটি জেনারেটেড তালিকা।

accessibility

accessible-error-announcement

প্রোগ্রাম্যাটিক অ্যাক্সেসিবিলিটি স্টেট (যেমন aria-invalid) এবং ভিজ্যুয়াল :user-invalid স্টেটকে সিঙ্ক্রোনাইজ করুন, যাতে স্ক্রিন রিডার ব্যবহারকারীরা ভিজ্যুয়াল অভিজ্ঞতার অনুরূপভাবে শুধুমাত্র ইন্টারঅ্যাকশনের পরেই ত্রুটির ফিডব্যাক পান।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

built-in-ai

language-detection

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

language-model

প্রম্পট এপিআই ব্যবহার করে ব্রাউজারে ডিভাইসেই স্বাভাবিক ভাষা অনুমান (ন্যাচারাল ল্যাঙ্গুয়েজ ইনফারেন্স) চালান, সাথে থাকছে স্ট্রিমিং আউটপুট, স্ট্রাকচার্ড JSON রেসপন্স এবং মাল্টি-টার্ন সেশন ম্যানেজমেন্ট।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

summarizer

ডিভাইসে থাকা সামারাইজার এপিআই (Summarizer API) ব্যবহার করে টেক্সট কন্টেন্টের সারসংক্ষেপ তৈরি করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

translator

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

css

highlight-text-ranges

পৃষ্ঠার যেকোনো অংশ, যেমন অনুসন্ধানের ফলাফল, বানান ভুল বা যৌথ সম্পাদনার কার্সার, হাইলাইট করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

forms

animated-select-picker

একটি কাস্টম সিলেক্ট কম্পোনেন্ট তৈরি করুন যার ড্রপ-ডাউনটি অ্যানিমেটেড হবে। উদাহরণস্বরূপ, মেনুটি ধীরে ধীরে বা স্লাইড করে প্রদর্শিত হবে, অথবা নির্বাচনের পর অপশনগুলো অ্যানিমেট হবে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

autofill-address-form

সঠিক অটোকমপ্লিট অ্যাট্রিবিউট এবং অটোফিল সাপোর্ট সহ একটি ঠিকানা ফর্ম তৈরি করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

autofill-highlight-inputs

CSS ব্যবহার করে ফর্মের সেই ফিল্ডগুলো হাইলাইট করুন যেগুলো ব্রাউজার দ্বারা স্বয়ংক্রিয়ভাবে পূরণ করা হয়েছে এবং ব্যবহারকারী দ্বারা সম্পাদিত হয়নি।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

autofill-payment-form

এমন একটি পেমেন্ট ফর্ম তৈরি করুন যা সঠিক অটোকমপ্লিট ভ্যালু এবং অটোফিল সাপোর্টের মাধ্যমে কার্ডের বিবরণ সংগ্রহ করে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

autofill-sign-in-form

সঠিক অটোকমপ্লিট ভ্যালু এবং অটোফিল সাপোর্ট সহ একটি সাইন-ইন ফর্ম তৈরি করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

autofill-sign-up-form

সঠিক অটোকমপ্লিট ভ্যালু এবং অটোফিল সাপোর্ট সহ একটি সাইন-আপ ফর্ম তৈরি করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

brand-consistent-forms

চেকবক্স, রেডিও বাটন, রেঞ্জ স্লাইডার এবং প্রোগ্রেস বারগুলোকে কাস্টম কম্পোনেন্ট দিয়ে প্রতিস্থাপন না করেই আপনার সাইটের কালার প্যালেটের সাথে মেলান।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

branded-select-styling

এমন কাস্টম সিলেক্ট এলিমেন্ট তৈরি করুন, যার বাটন, পিকার, অ্যারো আইকন এবং চেকমার্ক—সবকিছুই আপনার ব্র্যান্ড বা ডিজাইন সিস্টেমের টাইপোগ্রাফি, রঙ, স্পেসিং এবং বর্ডার ট্রিটমেন্টের সাথে নিখুঁতভাবে মিলে যায়।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

custom-select-picker-layouts

প্রচলিত স্ট্যাকড লিস্টের পরিবর্তে, এমন কাস্টম সিলেক্ট পিকার তৈরি করুন যার অপশনগুলো অনন্য বা আকর্ষণীয় উপায়ে সাজানো থাকবে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

form-fields-automatically-fit-contents

ব্যবহারকারীর ইনপুট অনুযায়ী ফর্ম ফিল্ডগুলোকে বড় বা ছোট হওয়ার সুযোগ দিন, যেমন—ব্যবহারকারী যখন টাইপ করেন বা অন্য কোনো অপশন বেছে নেন। পেজের ডিজাইনের সাথে সামঞ্জস্যপূর্ণ ডাইনামিক ও রেসপন্সিভ ফর্ম ফিল্ড তৈরি করতে সর্বোচ্চ ও সর্বনিম্ন আকারের সীমা প্রয়োগ করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

required-field-feedback

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

rich-media-picker

একটি কাস্টম সিলেক্ট কম্পোনেন্ট তৈরি করুন যার অপশনগুলোতে শুধু সাধারণ টেক্সটের পরিবর্তে জটিল HTML ফরম্যাটিং (যেমন ছবি, আইকন এবং অন্যান্য সমৃদ্ধ ফরম্যাটিং) থাকতে পারে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

select-menu-interaction

ব্যবহারকারী কন্ট্রোলটির সাথে ইন্টারঅ্যাক্ট করার পরেই কেবল সিলেক্ট মেনুতে কোনো নন-ডিফল্ট অপশন বেছে নেওয়া হয়েছে কিনা তা যাচাই করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

validate-input-after-interaction

ব্যবহারকারীর প্রাথমিক কার্যকলাপ শেষ হওয়ার পরেই ফর্ম ফিল্ড ভ্যালিডেশনের ফিডব্যাক (যেমন পাসওয়ার্ডের জটিলতা বা ইমেল ফরম্যাটের আবশ্যকতা) দেখান, যার ফলে পেজ লোড হওয়ার সময় বা ব্যবহারকারী টাইপ করার সময় অকাল ত্রুটি এড়ানো যায়।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

passkeys

passkey-authentication

প্রাথমিক সাইন-ইনের জন্য একজন পুরনো ব্যবহারকারীকে পাসকি দিয়ে প্রমাণীকরণ করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

passkey-conditional-create

সফলভাবে পাসওয়ার্ড দিয়ে লগইন করার পর বিদ্যমান ব্যবহারকারীর জন্য নীরবে একটি পাসকি নিবন্ধন করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

passkey-management

ব্যবহারকারীদের তাদের অ্যাকাউন্টে নিবন্ধিত পাসকিগুলো দেখার ও পরিচালনা করার সুযোগ দিন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

passkey-reauthentication

কোনো সংবেদনশীল কাজ করার আগে, সাইন-ইন করা ব্যবহারকারীর বিদ্যমান পাসকি ব্যবহার করে তার পরিচয় যাচাই করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

passkey-registration

বিদ্যমান ব্যবহারকারী অ্যাকাউন্টের জন্য একটি পাসকি নিবন্ধন করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

performance

batch-analytics-events

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

break-up-long-tasks

ভারী সিঙ্ক্রোনাস প্রসেসিং (জটিল গণনা এবং/অথবা দীর্ঘ লুপ) বা DOM আপডেটগুলিকে ভেঙে দিন, যাতে ব্রাউজার ব্যবহারকারীর ইনপুট পরিচালনা করতে এবং স্ক্রিন পুনরায় আঁকতে পারে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

calculate-total-foreground-time

ট্যাবটি ব্যাকগ্রাউন্ডে থাকার সময়কাল বাদ দিয়ে, একজন ব্যবহারকারী একটি পৃষ্ঠা দেখতে প্রকৃতপক্ষে মোট কত সময় ব্যয় করেছেন তা গণনা করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

conditional-async-dependencies

একটি পেজের সমস্ত স্ক্রিপ্ট ডিপেন্ডেন্সি জুড়ে জটিল সমন্বয়ের প্রয়োজন ছাড়াই শর্তসাপেক্ষে অ্যাসিঙ্ক ডিপেন্ডেন্সি লোড বা ইনিশিয়ালাইজ করুন (যেমন অনুপস্থিত ওয়েব ফিচারের জন্য পলিফিল ইম্পোর্ট করা)।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

defer-rendering-heavy-content

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

defer-work-until-scroll-ends

মসৃণ স্ক্রল পারফরম্যান্স বজায় রাখতে, DOM আপডেট, ডেটা ফেচিং, অ্যানালিটিক্স ট্র্যাকিং বা লেআউট পুনঃগণনার মতো ব্যয়বহুল অপারেশনগুলো স্ক্রলিং সম্পন্ন হওয়ার পর পর্যন্ত স্থগিত রাখুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

deprioritize-background-fetches

ব্যবহারকারীর অনুরোধের সাথে নেটওয়ার্কের সংঘাত এড়াতে Fetch API দিয়ে করা ব্যাকগ্রাউন্ড ডেটা ফেচগুলোর অগ্রাধিকার কমিয়ে দিন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

detect-initial-visibility-state

ব্যবহারকারী পৃষ্ঠাটিকে ফোরগ্রাউন্ডে আনার পর স্ক্রিপ্টটি অ্যাসিঙ্ক্রোনাসভাবে লোড হলেও, পৃষ্ঠাটি প্রাথমিকভাবে ব্যাকগ্রাউন্ডে লোড হয়েছিল কিনা তা নির্ভরযোগ্যভাবে নির্ধারণ করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

efficient-background-processing

কম্পোনেন্টটি স্ক্রিনের বাইরে চলে গেলে ব্যাকগ্রাউন্ডে চলা জাভাস্ক্রিপ্ট এক্সিকিউশন (যেমন <canvas> অ্যানিমেশন, WebGL রেন্ডারিং, বা ঘন ঘন WebSocket ডেটা পোলিং) থামিয়ে দিয়ে এবং সেটি স্ক্রল করে আবার দৃশ্যে ফিরে আসার সাথে সাথেই সেগুলোকে পুনরায় চালু করে সিস্টেম রিসোর্স ও ব্যাটারির আয়ু বাঁচান।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

faster-spa-view-transitions

প্রতিটি নেভিগেশনের সময় ভিউগুলোর স্ট্রাকচারাল DOM স্টেট ধ্বংস ও পুনর্নির্মাণ না করে, সেগুলোকে সংরক্ষণ করার মাধ্যমে একটি সিঙ্গেল-পেজ অ্যাপ্লিকেশন (SPA)-এ পূর্বে পরিদর্শিত ভিউগুলোতে দ্রুততর প্রত্যাবর্তন সক্ষম করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

full-session-analytics

ব্যবহারকারীর সম্পূর্ণ পেজ পরিদর্শনের সময় জুড়ে নির্ভরযোগ্যভাবে অ্যানালিটিক্স, ত্রুটি এবং টেলিমেট্রি ডেটা ট্র্যাক করুন, এবং ব্যবহারকারী পেজটি ছেড়ে না যাওয়া পর্যন্ত ডেটা পাঠানো স্থগিত রাখুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

identify-heavy-scripts

দীর্ঘ অ্যানিমেশন ফ্রেমের জন্য সবচেয়ে বেশি দায়ী স্ক্রিপ্টগুলো শনাক্ত করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

identify-inp-causes

ধীরগতির জাভাস্ক্রিপ্ট শনাক্ত করুন যা INP মেট্রিককে প্রভাবিত করছে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

improve-next-page-load-performance

ব্যবহারকারীর পরবর্তীতে ভিজিট করার সম্ভাবনা রয়েছে এমন পেজগুলো প্রিফেচ বা প্রি-রেন্ডার করার মাধ্যমে পেজ লোড পারফরম্যান্স উন্নত করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

interactions-in-complex-layouts

ডেটা-বহুল ড্যাশবোর্ড বা স্প্রেডশীট-শৈলীর গ্রিডের মতো জটিল লেআউটে লেআউট পুনঃগণনা এড়িয়ে ইন্টারঅ্যাকশনকে আরও দ্রুত এবং প্রতিক্রিয়াশীল করুন (এর ফলে ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) স্কোর হ্রাস পাবে)।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

optimize-image-priority

গুরুত্বপূর্ণ রিসোর্স লোডের বিলম্ব কমাতে লার্জেস্ট কনটেন্টফুল পেইন্ট (LCP) ক্যান্ডিডেট ইমেজগুলোর লোডিং অগ্রাধিকার অপ্টিমাইজ করুন এবং অ-গুরুত্বপূর্ণ ইমেজগুলোকে অগ্রাধিকারের তালিকা থেকে বাদ দিন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

optimize-preload-priority

গুরুত্বপূর্ণ রিসোর্স লোডের বিলম্ব কমাতে প্রি-লোডেড কন্টেন্টের আপেক্ষিক অগ্রাধিকার অপ্টিমাইজ করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

optimize-script-priority

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

resolution-optimized-pseudo-elements

DOM নোডের সংখ্যা কমাতে CSS সিউডো-এলিমেন্ট (যেমন ::before এবং ::after )-এ রেজোলিউশন-অপ্টিমাইজড ছবি ব্যবহার করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

schedule-tasks-by-priority

গুরুত্বপূর্ণ কাজগুলো প্রথমে সম্পন্ন করা এবং আনুষঙ্গিক কাজগুলো স্থগিত রাখা নিশ্চিত করতে বিভিন্ন অগ্রাধিকার অনুযায়ী কাজগুলোর সময়সূচী নির্ধারণ করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

sequence-distributed-events

ন্যানোসেকেন্ড রেজোলিউশনে টাইমস্ট্যাম্প রেকর্ড করার মাধ্যমে ডিস্ট্রিবিউটেড মাইক্রোসার্ভিস বা হাই-থ্রুপুট ট্রেসিং পরিবেশে অপারেশনগুলো লগ ও সিকোয়েন্স করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

user-experience

adapt-scrollbar-to-contrast-preferences

যেসব ব্যবহারকারী উচ্চ-কন্ট্রাস্ট ইন্টারফেস পছন্দ করেন, তাদের জন্য স্ক্রলবারের দৃশ্যমানতা উন্নত করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

anchor-positioning-tab-underline

দুটি নির্দিষ্ট এলিমেন্টের অবস্থানের মধ্যে একটি এলিমেন্টকে নির্বিঘ্নে স্থানান্তর করুন। উদাহরণস্বরূপ, একটি নির্বাচিত ট্যাবের আন্ডারলাইনকে তার পূর্ববর্তী এবং বর্তমান নির্বাচিত ট্যাবের মধ্যে সরানো।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

animate-element-entry-exit

DOM-এ এলিমেন্ট যোগ বা অপসারণ করার সময় অথবা তাদের ডিসপ্লে ভ্যালু টগল করার সময় সেগুলোকে মসৃণভাবে লুকান বা দেখান।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

animate-to-from-top-layer

ডায়ালগ, পপওভার এবং টুলটিপের মতো উপাদানগুলো যখন উপরের স্তরে প্রবেশ করে বা বের হয়, তখন সেগুলোকে অ্যানিমেট করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

animate-to-intrinsic-sizes

ইন্টারেক্টিভ উপাদানগুলোকে (যেমন অ্যাকর্ডিয়ন, মেনু এবং প্রসারিত কার্ড) তাদের স্বাভাবিক আকারে মসৃণভাবে আনা-নেওয়া করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

apply-webgl-shaders

WebGL শেডার ব্যবহার করে HTML কন্টেন্টে নিজস্ব ভিজ্যুয়াল এফেক্ট প্রয়োগ করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

calculate-event-differentials

তারিখ ও সময়ের মধ্যবর্তী সময়কাল এবং অবশিষ্ট সময় গণনা করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

calculate-with-intrinsic-sizes

কোনো উপাদানের অন্তর্নিহিত আকারের উপর ভিত্তি করে তার আকার গণনা করুন এবং নিশ্চিত করুন যে এটি প্রদত্ত নকশার সীমাবদ্ধতার মধ্যে থাকে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

capture-location-agnostic-data

এমন কালানুক্রমিক তথ্য রেকর্ড করুন যা ব্যবহারকারীর অবস্থানের উপর ভিত্তি করে পরিবর্তিত হওয়া উচিত নয়, যেমন জন্মতারিখ, পুনরাবৃত্তিমূলক অ্যালার্ম বা জাতীয় ছুটির দিন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

child-state-based-styling

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

complex-shapes

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

component-specific-light-dark-theme

পেজের কালার-স্কিম নির্বিশেষে নির্দিষ্ট কিছু এলিমেন্টকে (যেমন কোড ব্লক, মিডিয়া প্লেয়ার ইত্যাদি) লাইট মোড বা ডার্ক মোডে রাখতে বাধ্য করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

consistent-cross-document-transitions

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

content-based-styling

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

coordinate-global-events

ভবিষ্যতের মিটিং বা ইভেন্টগুলোকে একটি ভৌগোলিক IANA টাইম জোনের সাথে স্পষ্টভাবে সংযুক্ত করে সেগুলোর সময় নির্ধারণ করুন, যাতে ডেলাইট সেভিং টাইম (DST) পরিবর্তন, বা ঘড়ি পরিবর্তনের সময় ঘণ্টা "বাদ পড়া" বা "পুনরাবৃত্তি" হওয়া সত্ত্বেও ইভেন্টের সময় সঠিক থাকে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

cross-document-transitions

সম্পূর্ণ পৃষ্ঠার নেভিগেশনের মধ্যে মসৃণ ও নির্বিঘ্ন রূপান্তর তৈরি করুন, যেমন ক্রস-ফেড, কাস্টম রিভিল এফেক্ট, বা এক পৃষ্ঠা থেকে অন্য পৃষ্ঠায় কন্টেন্টের মর্ফিং।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

customize-scrollbar-color-and-thickness

স্ক্রলবারের রঙ বা পুরুত্ব কাস্টমাইজ করুন

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

dark-mode

ব্যবহারকারীর লাইট/ডার্ক থিমের পছন্দকে সম্মান করে এবং ব্রাউজারের UI (যেমন স্ক্রলবার, ফর্ম কন্ট্রোল ইত্যাদি) সেই অনুযায়ী ডার্ক মোড সাপোর্ট বাস্তবায়ন করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

declarative-button-actions

ডিক্লারেটিভ বাটন কমান্ড, ইনভোকার কমান্ড, বাটন কমান্ড, কাস্টম কমান্ড, বা ডিক্লারেটিভ টগল অ্যাকশন ব্যবহার করে যেকোনো এলিমেন্টের সাথে একটি বাটনকে ডিক্লারেটিভভাবে সংযুক্ত করুন, যা কাস্টম ও অ্যাপ্লিকেশন-নির্দিষ্ট অ্যাকশন ট্রিগার করতে পারে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

declarative-dialog-popover-control

জাভাস্ক্রিপ্ট না লিখে একটি বাটন থেকে ডায়ালগ বা পপওভারের দৃশ্যমানতা পরিবর্তন করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

deliver-optimized-decorative-images

পরবর্তী প্রজন্মের ইমেজ ফরম্যাট (যেমন AVIF বা WebP) এবং একাধিক পিক্সেল ডেনসিটি (যেমন 1x এবং 2x) একই সাথে প্রদান করে অপ্টিমাইজ করা আলংকারিক ছবি (যেমন ব্যাকগ্রাউন্ড, UI আইকন বা জটিল মাস্ক) সরবরাহ করুন, যাতে ব্রাউজার ব্যবহারকারীর ডিভাইসের সক্ষমতা অনুযায়ী ফাইলের আকার এবং ভিজ্যুয়াল কোয়ালিটির সেরা সমন্বয়টি গতিশীলভাবে নির্ধারণ করতে পারে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

design-token-reactivity

উচ্চ-স্তরের ডিজাইন টোকেন, যেমন ডেনসিটি মোড (কমপ্যাক্ট, কমফোর্টেবল, স্পেসিয়াস) বা থিম সংজ্ঞায়িত করুন এবং অধীনস্থ কম্পোনেন্টগুলোকে সরাসরি ও কম্পোনেন্ট-উপযোগী উপায়ে পরিবর্তনগুলোতে প্রতিক্রিয়া জানাতে দিন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

directional-navigation-transitions

ব্যবহারকারীর নেভিগেশন প্রবাহের দিক প্রতিফলিত করতে ভিজ্যুয়াল অবস্থার পরিবর্তনগুলিকে অ্যানিমেট করুন, যেমন সামনে এগিয়ে যাওয়ার সময় ডান দিক থেকে নতুন কন্টেন্ট স্লাইড করে আনা অথবা আগের স্ক্রিনে ফিরে যাওয়ার সময় বাম দিক থেকে কন্টেন্ট নিয়ে আসা।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

dynamic-sibling-animations

একই সারির উপাদানগুলোর মধ্যে অ্যানিমেশন বা ট্রানজিশনের সময় এমনভাবে সাজান, যাতে প্রতিটি তার তালিকার অবস্থানের উপর ভিত্তি করে একটি নির্দিষ্ট বিলম্বের পর শুরু হয়।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

dynamic-sibling-styling

গতিশীল ভিজ্যুয়াল স্পেকট্রাম বা লেআউট বিন্যাস তৈরি করুন যা একটি গ্রুপের উপাদানের সংখ্যার সাথে স্বয়ংক্রিয়ভাবে খাপ খাইয়ে নেয়।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

export-html-media-from-canvas

ক্যানভাসের ভেতর থেকে ডাইনামিক HTML কন্টেন্টকে ছবি বা ভিডিও ফ্রেম হিসেবে ক্যাপচার ও এক্সপোর্ট করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

expose-canvas-content-to-browser-features

ক্যানভাসে রেন্ডার করা বিষয়বস্তুকে ব্রাউজারের সহায়ক প্রযুক্তি, অনুবাদ বা রিডিং মোডের মতো বৈশিষ্ট্যগুলোর কাছে উন্মুক্ত করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

flicker-free-client-side-ab-testing

ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট ব্যবহার করে A/B টেস্ট, মাল্টি-ভ্যারিয়েট টেস্ট বা অন্যান্য এক্সপেরিমেন্ট ডেলিভার ও রেন্ডার করুন, যেখানে মূল কন্টেন্ট দেখানোর আগে ফ্লিকার বা ফ্ল্যাশ করার মাধ্যমে HTML, CSS, এবং জাভাস্ক্রিপ্ট পরিবর্তন বা ইনজেক্ট করা হয়।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

fluid-scaling

নির্দিষ্ট ব্রেকপয়েন্ট ব্যবহার না করে, প্যারেন্ট কন্টেইনারের আকারের উপর ভিত্তি করে ফন্ট সাইজ, স্পেসিং এবং মিডিয়া সাইজের মতো আইটেমগুলিকে মসৃণভাবে স্কেল করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

format-human-readable-durations

ব্যবহারকারীদের কাছে অতিবাহিত সময় বা সময়কাল একটি পাঠযোগ্য ও স্থানীয়করণযোগ্য বিন্যাসে উপস্থাপন করুন, যেখানে প্রসঙ্গের উপর নির্ভর করে বিস্তারিত একক বিভাজন (যেমন, "১ ঘন্টা এবং ৩০ মিনিট") অথবা মোট একক সংখ্যা (যেমন, "৯০ মিনিট") দেখানোর সুবিধা থাকবে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

group-element-transitions

একই ট্রানজিশন লজিক ব্যবহার করে একই ধরনের একাধিক উপাদানকে একযোগে পরিবর্তন করুন, যেমন শপিং কার্ট থেকে একটি পণ্য সরিয়ে ফেলার পর বাকি সব পণ্যকে অ্যানিমেট করে তাদের নতুন অবস্থানে নিয়ে যাওয়া।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

improve-text-layout-and-legibility

টেক্সট র‍্যাপ করার সময় ব্রাউজারকে সুষমভাবে লাইন ব্রেক প্রয়োগ করার সুবিধা দিয়ে, কয়েক লাইনের বেশি নয় এমন শিরোনামের মতো ছোট স্বতন্ত্র টেক্সট কন্টেন্টের লেআউট এবং পাঠযোগ্যতা উন্নত করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

individual-transform-properties

একটিমাত্র এলিমেন্টের অন্যান্য ট্রান্সফর্ম প্রোপার্টি থেকে স্বাধীনভাবে স্বতন্ত্র CSS ট্রান্সফর্ম প্রোপার্টিগুলোকে (যেমন translate, rotate, scale) অ্যানিমেট বা ওভাররাইড করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

interactive-content-in-3d-scenes

একটি 3D দৃশ্যে ইন্টারেক্টিভ HTML উপাদান যুক্ত করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

interactive-content-reveal

ইন্টারেক্টিভ রিভিল ইফেক্ট তৈরি করুন, যেমন একটি স্পটলাইট যা ব্যবহারকারীর পয়েন্টারকে অনুসরণ করে কোনো ছবি বা UI অংশের ভেতরের বিবরণ উন্মোচন করে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

interest-triggered-action-previews

যখন কোনো ব্যবহারকারী আগ্রহ প্রকাশ করেন (যেমন হোভার করা, ফোকাস করা বা লং-প্রেস করা), কিন্তু ক্লিক করার আগে, বাটনটির প্রভাবের একটি লাইভ প্রিভিউ দেখান।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

interest-triggered-tooltips

ব্যবহারকারী যখন কোনো ইন্টারেক্টিভ এলিমেন্টের উপর মাউস হোভার করেন, ফোকাস করেন বা লং-প্রেস করেন, তখন ক্লিক করার প্রয়োজন ছাড়াই একটি টুলটিপ বা সম্পূরক তথ্য দেখান।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

light-dismiss-a-dialog

এমন একটি মোডাল ডায়ালগ তৈরি করুন যা লাইট ডিসমিস (অর্থাৎ ডায়ালগের বাইরে ক্লিক বা ট্যাপ করে) ব্যবহার করে বন্ধ করা যায়।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

manage-recurring-intervals

সঠিক সময়কাল গণনা নিশ্চিত করতে, সাবস্ক্রিপশন বিলিং বা বেতন চক্রের জন্য পুনরাবৃত্তির ব্যবধান গণনা করুন এবং মাস শেষের পরিবর্তনের (যেমন, ৩১শে জানুয়ারিতে এক মাস যোগ করা) মতো ব্যতিক্রমী পরিস্থিতিগুলো স্বয়ংক্রিয়ভাবে সমন্বয় করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

model-partial-time-concepts

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

move-dom-element-without-losing-state

গুরুত্বপূর্ণ এলিমেন্ট স্টেট, যেমন ইন্টারঅ্যাকটিভিটি স্টেট (:focus/:active), <iframe> লোডিং স্টেট, অ্যানিমেশন/ট্রানজিশন স্টেট ইত্যাদি না হারিয়ে একটি DOM এলিমেন্টকে সরান বা এর অবস্থান পরিবর্তন করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

একটি নেভিগেশন ড্রয়ার কম্পোনেন্ট তৈরি করুন যা একটি মেনু বাটন থেকে ট্রিগার করা হলে, পেজের বিদ্যমান কন্টেন্টের উপরে পাশ থেকে স্লাইড করে চলে আসে এবং ডিসমিস করা হলে (সোয়াইপ করে দূরে গেলে, বাইরে ট্যাপ করলে বা এস্কেপ চাপলে) স্লাইড করে বেরিয়ে যায়।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

overflow-clipping-control

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

parallax-scroll-effects

স্ক্রল-ভিত্তিক এফেক্ট (যেমন প্যারালাক্স) তৈরি করুন, যেখানে ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ড লেয়ারগুলো ভিন্ন গতিতে সরে যায়, যা ব্যবহারকারীর স্ক্রল করার সাথে সাথে গভীরতার অনুভূতি তৈরি করে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

persistent-app-tours

টিথারড নেটিভ ওভারলে ব্যবহার করে স্থায়ী অনবোর্ডিং ওয়াকথ্রু তৈরি করুন, যা ব্যবহারকারীর ইন্টারঅ্যাকশনের সময় খোলা থাকে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

persistent-toast-notifications

স্থায়ী, স্তরে স্তরে সাজানো যায় এমন বার্তা প্রেরণ এবং অবস্থা জানানোর জন্য অনাক্রমণাত্মক টোস্ট ও ওভারলে নোটিফিকেশন তৈরি করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

persistent-top-layer-ui

যখন কোনো মোডাল ডায়ালগ, ফুলস্ক্রিন এলিমেন্ট বা নেটিভ পপওভারের অন্তর্নিহিত নোডটি DOM-এ সরানো বা তার প্যারেন্ট পরিবর্তন করা হয়, তখনও সেটিকে দৃশ্যমানভাবে খোলা এবং কার্যকরীভাবে সক্রিয় রাখুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

physics-based-easing

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

platform-controls-dismiss-dialog

এমন একটি মোডাল ডায়ালগ তৈরি করুন যা প্ল্যাটফর্ম-নির্দিষ্ট সাধারণ ব্যবহারকারী ক্রিয়াকলাপ ব্যবহার করে বন্ধ করা যাবে, যেমন ডেস্কটপ প্ল্যাটফর্মে Esc কী টিপে, অথবা মোবাইল প্ল্যাটফর্মে "back" বা "dismiss" অঙ্গভঙ্গি ব্যবহার করে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

position-aware-tooltips

দিকনির্দেশক তীরচিহ্ন (বা অন্য কোনো ভিজ্যুয়াল স্টাইলিং) ব্যবহার করে টুলটিপ এবং পপওভার তৈরি করুন, যা এলিমেন্টটি ফলব্যাক অবস্থানে ফ্লিপ করার সময় স্বয়ংক্রিয়ভাবে সঠিক দিকে নির্দেশ করে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

precise-text-alignment

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

prevent-text-wrapping

এটি নিশ্চিত করে যে ব্রাউজার টেক্সটে লাইন ব্রেক যোগ করবে না এবং টেক্সটকে তার কন্টেইনারের বাইরে চলে যেতে দেবে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

pull-to-reveal

একটি পুল-টু-রিভিল ফিচার তৈরি করুন যা ব্যবহারকারীকে স্ক্রিনে নিচের দিকে টেনে আরও কন্টেন্ট দেখার সুযোগ দেবে, যেমন একটি সার্চ বার।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

reduce-style-repetition

জটিল বা ডাইনামিক স্টাইলিং লজিককে পুনঃব্যবহারযোগ্য ফাংশনের (যেমন, এক সেট ইনপুট প্যারামিটারের উপর ভিত্তি করে গ্রেডিয়েন্ট গণনা করে এমন একটি ফাংশন) মধ্যে আবদ্ধ করে স্টাইলের অত্যধিক পুনরাবৃত্তি হ্রাস করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

resilient-context-menus-and-nested-dropdowns

অ্যাক্সেসযোগ্য ও রেসপন্সিভ মেনু, টুলটিপ, ড্রপডাউন বা কনটেক্সচুয়াল ওভারলে তৈরি করুন, যা অবশ্যই নির্দিষ্ট UI এলিমেন্টের সাথে সংযুক্ত থাকবে। এটি নিশ্চিত করবে যে, ভিউপোর্টের প্রান্তে পৌঁছালে ওভারলেটি স্বয়ংক্রিয়ভাবে নিজের অবস্থান পরিবর্তন করে (যেমন, অক্ষ উল্টে দিয়ে), ফলে এটি কখনোই কেটে যাবে না।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

same-document-transitions

একটি সিঙ্গেল পেজ অ্যাপ্লিকেশন (SPA)-এর বিভিন্ন পেজ স্টেট বা নেভিগেশনে বিদ্যমান এলিমেন্টগুলোকে তাদের আকার, অবস্থান বা অন্যান্য স্টাইলিং বৈশিষ্ট্য মসৃণভাবে পরিবর্তন করার মাধ্যমে দৃশ্যত সংযুক্ত করুন (যেমন, একটি প্রোডাক্ট থাম্বনেইলকে ফুল-ব্লিড হিরো ইমেজে প্রসারিত করা)।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

scroll-entry-exit-effects

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

scroll-position-aware-elements

এমন ভাসমান বাটন বা উইজেট (যেমন—উপরে ফিরে যান, নিচে স্ক্রল করুন, চ্যাট লঞ্চার ইত্যাদি) তৈরি করুন, যা ব্যবহারকারী স্ক্রল করেছেন কি না তার ওপর ভিত্তি করে প্রদর্শিত বা অদৃশ্য হবে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

scroll-progress-indicator

একটি স্ক্রল প্রোগ্রেস বার, স্টেপড প্রোগ্রেস ট্র্যাকার বা এমন কোনো ভিজ্যুয়াল অ্যাফোর্ডেন্স তৈরি করুন যা ব্যবহারকারীকে জানিয়ে দেয় যে তিনি কোনো পৃষ্ঠা বা বিভাগের কতটা স্ক্রল করেছেন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

scroll-snap-realtime-feedback

ব্যবহারকারী যখন স্ন্যাপ-অ্যালাইনড কন্টেন্ট স্ক্রল করেন, তখন স্ক্রল জেসচারটি সম্পূর্ণ হওয়ার আগে, লিঙ্ক করা UI এলিমেন্টগুলিতে রিয়েল-টাইম ভিজ্যুয়াল ফিডব্যাক প্রদান করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

scroll-snap-state-sync

একটি স্ক্রোলযোগ্য কন্টেইনারে সক্রিয়ভাবে স্ন্যাপ করা আইটেমের সাথে নেভিগেশন ইন্ডিকেটর, লিঙ্ক করা কন্টেন্ট প্যানেল এবং অ্যানালিটিক্স ট্র্যাকিং সিঙ্ক্রোনাইজ করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

scroll-target-on-load

উপাদানগুলির একটি স্ক্রোলযোগ্য তালিকা (যেমন ছবির ক্যারোসেল বা চ্যাট কথোপকথনের থ্রেড) তৈরি করুন, যা প্রাথমিক রেন্ডারের সময় একটি নির্দিষ্ট উপাদানকে স্ক্রোল করে দৃশ্যমান করে দেখানো যাবে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

scrollability-affordance-hints

স্ক্রল-শ্যাডো ওভারলে, গ্রেডিয়েন্ট ফেড, বা দিকনির্দেশক তীর চিহ্ন তৈরি করুন, যেগুলো কেবল তখনই প্রদর্শিত হবে যখন সেই দিকে স্ক্রল করার মতো আরও কন্টেন্ট থাকবে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

scrollytelling

সম্পূর্ণ ভিন্ন একটি এলিমেন্টের স্ক্রলপোর্ট পজিশন দ্বারা চালিত হয়ে কোনো টার্গেট এলিমেন্টের ভিজ্যুয়াল প্রোপার্টিগুলোকে অ্যানিমেট করুন — যেমন ব্যাকড্রপ ফেড করা, ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করা, বা স্ক্রলিটেলিং অভিজ্ঞতা তৈরি করা।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

search-hidden-content

অ্যাকর্ডিয়ন, ট্যাব এবং "আরও পড়ুন" বিভাগের মতো প্যাটার্ন ব্যবহার করে বিষয়বস্তু আড়াল করুন, এবং একই সাথে এটিও নিশ্চিত করুন যে লুকানো লেখাটি নেটিভ "পৃষ্ঠায় খুঁজুন" অনুসন্ধানের সময় দৃশ্যমান হয়, সার্চ ইঞ্জিন ইন্ডেক্সিংয়ের সুযোগ দেয়, ইউআরএল ফ্র্যাগমেন্ট ডিপ লিঙ্ক সমর্থন করে এবং ARIA অ্যাক্সেসিবিলিটি বজায় রাখে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

shaped-cutouts

কোনো উপাদানে জটিল কাটআউট বা 'নকআউট' এফেক্ট তৈরি করতে একাধিক আকৃতি একত্রিত করুন, যেমন কোনো উপাদানে একটি খাঁজ যোগ করা।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

shrinking-header-on-scroll

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

size-aware-styling

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

soft-edge-content-fade

আরও স্ক্রলযোগ্য এলাকা নির্দেশ করতে অথবা পেমেন্ট-সংক্রান্ত লেখা আড়াল করতে কন্টেন্টের প্রান্তগুলিতে একটি স্বচ্ছতার গ্রেডিয়েন্ট প্রয়োগ করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

stabilize-reactive-state

শেয়ার করা পরিবর্তনযোগ্য স্টেটের অপ্রত্যাশিত পার্শ্বপ্রতিক্রিয়া ছাড়াই ডেটা-চালিত ভিউতে টাস্কের ডেডলাইন বা শিডিউল পরিচালনা করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

stack-drill-down

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

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

style-parent-with-has

যখন কোনো ফর্ম ফিল্ড অবৈধ হয়, তখন সেই ফিল্ডের প্যারেন্ট এলিমেন্টগুলোকে (যেমন লেবেল বা ফিল্ডসেট) স্টাইল করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

support-global-calendar-systems

আন্তর্জাতিক ব্যবহারকারীদের জন্য গ্রেগরিয়ান ক্যালেন্ডার ছাড়া অন্য ক্যালেন্ডার পদ্ধতির (যেমন, ইসলামিক, হিব্রু বা চীনা) তারিখ নির্ভুলভাবে প্রদর্শন ও গণনা করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

swipe-to-remove

ব্যবহারকারীদের একটি তালিকার আইটেমগুলোর ওপর হরাইজন্টাল সোয়াইপ জেসচারের মাধ্যমে অ্যাকশন (যেমন: সরানো, আর্কাইভ করা, পঠিত হিসেবে চিহ্নিত করা ইত্যাদি) নিতে দিন, যাতে তারা আলাদা কোনো কন্ট্রোল ট্যাপ না করেই দ্রুত এন্ট্রিগুলো প্রসেস করতে পারে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

visually-stable-font-fallbacks

ফন্ট স্টাইল এমনভাবে নির্ধারণ করুন, যাতে পছন্দের ফন্টের সাথে বিকল্প ফন্টগুলোর (বা এর বিপরীত) অদলবদল হলেও লেখাটি পাঠযোগ্য এবং দেখতে একই রকম থাকে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

visually-stable-mixed-fonts

ফন্ট স্টাইল এমনভাবে নির্ধারণ করুন, যাতে একটিমাত্র টেক্সট ব্লক প্রদর্শনের জন্য একাধিক ফন্ট ব্যবহার করা হলেও লেখাটি পাঠযোগ্য এবং দেখতে সামঞ্জস্যপূর্ণ থাকে।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

visually-texture-content

উপাদানগুলিতে বাস্তবসম্মত ক্ষয় ও টেক্সচারের নকশা প্রয়োগ করে সেগুলিকে জৈব, পুরোনো বা ভৌত বস্তুর রূপ দিন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

webmcp

agentic-forms

স্ট্যান্ডার্ড HTML ফর্মগুলিতে WebMCP অ্যাট্রিবিউট যুক্ত করার মাধ্যমে ক্লায়েন্ট-সাইড কার্যকারিতাকে AI এজেন্টদের কাছে টুল হিসেবে তুলে ধরুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন

agentic-javascript-tools

WebMCP Imperative API ব্যবহার করে প্রোগ্রাম্যাটিকভাবে ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট ফাংশনগুলোকে এআই এজেন্টের টুল হিসেবে রেজিস্টার করুন।

ব্যবহৃত বৈশিষ্ট্য:

গিটহাবে ব্যবহারের উদাহরণ দেখুন