css - ফোকাস এবং: সক্রিয় মধ্যে পার্থক্য কি?



css-selectors pseudo-class (5)

"ফোকাস" ব্যবহার করে কীবোর্ড ব্যবহারকারীরা একই মাউস ব্যবহার করে মাউস ব্যবহারকারীরা একই প্রভাব ফেলবে। Internet Explorer এ একই প্রভাব পেতে "সক্রিয়" প্রয়োজন।

বাস্তবিকই হল, এইসব রাজ্যের সমস্ত ব্যবহারকারীর জন্য কাজ করা উচিত নয়। সমস্ত তিনটি নির্বাচক ব্যবহার করে না এমন অনেক কীবোর্ডের জন্য অ্যাক্সেসিবিলিটি সমস্যা তৈরি করে যা শুধুমাত্র মাউস ব্যবহার করতে অক্ষম। আমি আপনাকে # নমুনা চ্যালেঞ্জ নেওয়ার জন্য আমন্ত্রণ জানাচ্ছি (nomouse dot org)।

মধ্যে পার্থক্য কি :focus এবং :active ছদ্ম-ক্লাস?


Answer #1

: ফোকাস যখন একটি উপাদান ইনপুট গ্রহণ করতে সক্ষম হয় - একটি ইনপুট বাক্সে কার্সার বা ট্যাবযুক্ত করা একটি লিঙ্ক।

: একটি ব্যবহারকারী দ্বারা একটি উপাদান অ্যাক্টিভেট করা হয় - সক্রিয় যখন একটি ব্যবহারকারী একটি মাউস বাটন টিপুন এবং তারপর এটি মুক্তি।


Answer #2

চার ক্ষেত্রে আছে।

  1. ডিফল্টরূপে, সক্রিয় এবং ফোকাস বন্ধ উভয়।
  2. যখন আপনি ফোকাসযোগ্য উপাদানের মাধ্যমে চক্রটি ট্যাব করেন, তখন তারা প্রবেশ করবে :focus (সক্রিয় না করে)।
  3. যখন আপনি একটি অ-ফোকাসযোগ্য উপাদানতে ক্লিক করেন, এটি প্রবেশ করে :active (ফোকাস ছাড়া)।
  4. যখন আপনি একটি ফোকাসযোগ্য উপাদানতে ক্লিক করেন তখন এটি প্রবেশ করে :active:focus (সক্রিয় এবং একযোগে ফোকাস)।

উদাহরণ:

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>
div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

যখন পৃষ্ঠা লোড হয় উভয়ই ক্ষেত্রে 1. যখন আপনি ট্যাব টিপবেন তখন আপনি দ্বিতীয় ডিভিকে ফোকাস করবেন এবং এটি প্রদর্শনের ক্ষেত্রে দেখতে পাবেন 2. যখন আপনি প্রথম বিভাগে ক্লিক করেন তখন আপনি কেসটি দেখতে পাবেন 3. যখন আপনি দ্বিতীয় ডিভিকে ক্লিক করেন, তখন আপনি কেস 4 দেখতে পাবেন ।

একটি উপাদান ফোকাসযোগ্য কিনা না অন্য প্রশ্ন । অধিকাংশ ডিফল্ট দ্বারা হয় না। তবে, <a> , <input> <textarea> অনুমান করা নিরাপদ, ডিফল্টরূপে ফোকাসযোগ্য।


Answer #3

ফোকাস শুধুমাত্র কীবোর্ড ইনপুট দ্বারা দেওয়া যেতে পারে, কিন্তু একটি উপাদান উভয়, একটি মাউস বা একটি কীবোর্ড দ্বারা সক্রিয় করা যেতে পারে।

যদি কেউ ব্যবহার করবে: কোনও লিঙ্কটিতে ফোকাস করবে, স্টাইলের নিয়ম শুধুমাত্র কীবোর্ডে একটি বোনা টিপে প্রয়োগ করবে।


Answer #4
:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

উত্স: সিএসএস ছদ্ম-ক্লাস





pseudo-class