প্রকাশিত: ১৯ মে, ২০২৬
এটি মডার্ন ওয়েব গাইডেন্সে বর্তমানে উপলব্ধ সমস্ত ইউজ কেসের একটি জেনারেটেড তালিকা।
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
এমন কালানুক্রমিক তথ্য রেকর্ড করুন যা ব্যবহারকারীর অবস্থানের উপর ভিত্তি করে পরিবর্তিত হওয়া উচিত নয়, যেমন জন্মতারিখ, পুনরাবৃত্তিমূলক অ্যালার্ম বা জাতীয় ছুটির দিন।
ব্যবহৃত বৈশিষ্ট্য:
গিটহাবে ব্যবহারের উদাহরণ দেখুন
carousel-slide-effects
ছবি বা অন্যান্য ভিজ্যুয়াল উপাদান দিয়ে একটি স্লাইড ক্যারোসেল তৈরি করুন, যেখানে প্রতিটি স্লাইড স্ক্রলারে প্রবেশ, কেন্দ্রে আসা বা স্ক্রলার থেকে বের হওয়ার সময় অ্যানিমেট করবে। উদাহরণস্বরূপ, স্লাইডগুলো ধীরে ধীরে শুরু বা শেষ হতে পারে, ঘুরতে পারে, বড় বা ছোট হতে পারে ইত্যাদি।
ব্যবহৃত বৈশিষ্ট্য:
গিটহাবে ব্যবহারের উদাহরণ দেখুন
carousel-snap-highlights
স্ক্রল-স্ন্যাপিং ক্যারোসেল, গ্যালারি বা সম্পূর্ণ পৃষ্ঠা সোয়াইপ করার অভিজ্ঞতায়, বর্তমানে স্ন্যাপ করা অ-ইন্টারেক্টিভ আইটেমটিকে দৃশ্যত হাইলাইট করুন। উদাহরণস্বরূপ, স্ন্যাপ করার সময় একটি কার্ড প্রসারিত করা, বা লুকানো বিষয়বস্তু প্রকাশ করা।
ব্যবহৃত বৈশিষ্ট্য:
গিটহাবে ব্যবহারের উদাহরণ দেখুন
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 এলিমেন্টকে সরান বা এর অবস্থান পরিবর্তন করুন।
ব্যবহৃত বৈশিষ্ট্য:
গিটহাবে ব্যবহারের উদাহরণ দেখুন
navigation-drawer
একটি নেভিগেশন ড্রয়ার কম্পোনেন্ট তৈরি করুন যা একটি মেনু বাটন থেকে ট্রিগার করা হলে, পেজের বিদ্যমান কন্টেন্টের উপরে পাশ থেকে স্লাইড করে চলে আসে এবং ডিসমিস করা হলে (সোয়াইপ করে দূরে গেলে, বাইরে ট্যাপ করলে বা এস্কেপ চাপলে) স্লাইড করে বেরিয়ে যায়।
ব্যবহৃত বৈশিষ্ট্য:
-
inert -
intersection-observer -
popover -
registered-custom-properties -
scroll-driven-animations -
scroll-initial-target -
scroll-snap
গিটহাবে ব্যবহারের উদাহরণ দেখুন
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
ব্যবহারকারীদের একটি তালিকার আইটেমগুলোর ওপর হরাইজন্টাল সোয়াইপ জেসচারের মাধ্যমে অ্যাকশন (যেমন: সরানো, আর্কাইভ করা, পঠিত হিসেবে চিহ্নিত করা ইত্যাদি) নিতে দিন, যাতে তারা আলাদা কোনো কন্ট্রোল ট্যাপ না করেই দ্রুত এন্ট্রিগুলো প্রসেস করতে পারে।
ব্যবহৃত বৈশিষ্ট্য:
-
scroll-snap -
scroll-initial-target -
overscroll-behavior -
scrollbar-width -
intersection-observer -
mutationobserver -
resize-observer -
web-animations
গিটহাবে ব্যবহারের উদাহরণ দেখুন
visually-stable-font-fallbacks
ফন্ট স্টাইল এমনভাবে নির্ধারণ করুন, যাতে পছন্দের ফন্টের সাথে বিকল্প ফন্টগুলোর (বা এর বিপরীত) অদলবদল হলেও লেখাটি পাঠযোগ্য এবং দেখতে একই রকম থাকে।
ব্যবহৃত বৈশিষ্ট্য:
গিটহাবে ব্যবহারের উদাহরণ দেখুন
visually-stable-mixed-fonts
ফন্ট স্টাইল এমনভাবে নির্ধারণ করুন, যাতে একটিমাত্র টেক্সট ব্লক প্রদর্শনের জন্য একাধিক ফন্ট ব্যবহার করা হলেও লেখাটি পাঠযোগ্য এবং দেখতে সামঞ্জস্যপূর্ণ থাকে।
ব্যবহৃত বৈশিষ্ট্য:
গিটহাবে ব্যবহারের উদাহরণ দেখুন
visually-texture-content
উপাদানগুলিতে বাস্তবসম্মত ক্ষয় ও টেক্সচারের নকশা প্রয়োগ করে সেগুলিকে জৈব, পুরোনো বা ভৌত বস্তুর রূপ দিন।
ব্যবহৃত বৈশিষ্ট্য:
গিটহাবে ব্যবহারের উদাহরণ দেখুন
webmcp
agentic-forms
স্ট্যান্ডার্ড HTML ফর্মগুলিতে WebMCP অ্যাট্রিবিউট যুক্ত করার মাধ্যমে ক্লায়েন্ট-সাইড কার্যকারিতাকে AI এজেন্টদের কাছে টুল হিসেবে তুলে ধরুন।
ব্যবহৃত বৈশিষ্ট্য:
গিটহাবে ব্যবহারের উদাহরণ দেখুন
agentic-javascript-tools
WebMCP Imperative API ব্যবহার করে প্রোগ্রাম্যাটিকভাবে ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট ফাংশনগুলোকে এআই এজেন্টের টুল হিসেবে রেজিস্টার করুন।
ব্যবহৃত বৈশিষ্ট্য: