কোডপেন

ট্যাব অর্ডারে একটি উপাদান সন্নিবেশ করান

tabindex="0" ব্যবহার করে প্রাকৃতিক ট্যাব অর্ডারে একটি উপাদান সন্নিবেশ করান। উদাহরণ স্বরূপ:

<div tabindex="0">Focus me with the TAB key</div>

একটি উপাদান ফোকাস করতে, Tab কী টিপুন বা উপাদানটির focus() পদ্ধতিতে কল করুন।

ট্যাব অর্ডার থেকে একটি উপাদান সরান

tabindex="-1" ব্যবহার করে একটি উপাদান সরান। উদাহরণ স্বরূপ:

<button tabindex="-1">Can't reach me with the TAB key!</button>

এটি প্রাকৃতিক ট্যাব ক্রম থেকে একটি উপাদানকে সরিয়ে দেয়, তবে উপাদানটিকে এখনও focus() পদ্ধতিতে কল করে ফোকাস করা যেতে পারে।

মনে রাখবেন যে একটি উপাদানে tabindex="-1" প্রয়োগ করা তার শিশুদের প্রভাবিত করে না; যদি তারা স্বাভাবিকভাবে ট্যাব অর্ডারে থাকে বা tabindex মানের কারণে, তারা ট্যাব ক্রমেই থাকবে। ট্যাব ক্রম থেকে একটি উপাদান এবং তার সমস্ত বাচ্চাদের অপসারণ করতে, WICG এর inert পলিফিল ব্যবহার করার কথা বিবেচনা করুন। পলিফিল একটি প্রস্তাবিত inert বৈশিষ্ট্যের আচরণকে অনুকরণ করে, যা উপাদানগুলিকে সহায়ক প্রযুক্তি দ্বারা নির্বাচিত বা পড়তে বাধা দেয়।

জিনিস স্পিনিং পেতে!

.loader {
  animation: spin 0.75s infinite steps(var(--count));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

সঠিক প্রভাব পেতে steps(var(--count)) ব্যবহার নোট করুন ✨