تمرکز سبک

Rob Dodson

نشانگر فوکوس، که اغلب با یک «حلقه فوکوس» نشان داده می‌شود، عنصری را که در صفحه شما در فوکوس است، مشخص می‌کند. برای کاربرانی که نمی‌توانند یا نمی‌خواهند از ماوس استفاده کنند، این نشانگر بسیار مهم است، زیرا به عنوان جایگزینی برای نشانگر ماوس عمل می‌کند.

اگر نشانگر فوکوس پیش‌فرض مرورگر با طراحی شما تداخل دارد، می‌توانید از CSS برای تغییر استایل آن استفاده کنید. به یاد داشته باشید که کاربران خود را در نظر داشته باشید.

برای نمایش همیشگی نشانگر فوکوس، از :focus استفاده کنید.

کلاس کاذب :focus صرف نظر از روش ورودی یا دستگاه مورد استفاده (مانند ماوس، صفحه کلید یا قلم) روی عناصری که در فوکوس هستند اعمال می‌شود.

برای مثال، <div> زیر دارای یک tabindex است که آن را قابل فوکوس می‌کند و یک استایل سفارشی برای حالت :focus آن دارد:

div[tabindex="0"]:focus {
  outline: 4px dashed orange;
}

فرقی نمی‌کند از چه دستگاهی استفاده می‌کنید، <div> در حالت فوکوس یکسان به نظر می‌رسد.

متأسفانه، مرورگرها می‌توانند در نحوه اعمال فوکوس (focus) ناهماهنگ باشند. اینکه آیا یک عنصر فوکوس (focus) دریافت می‌کند یا خیر، ممکن است به مرورگر و سیستم عامل بستگی داشته باشد.

برای مثال، <button> زیر دارای CSS سفارشی برای حالت :focus خود است.

button:focus {
  outline: 4px dashed orange;
}

اگر در کروم روی macOS با ماوس روی <button> کلیک کنید، باید سبک فوکوس سفارشی آن را ببینید. با این حال، اگر در سافاری روی macOS روی <button> کلیک کنید، سبک فوکوس سفارشی را نخواهید دید. دلیل این امر این است که در سافاری وقتی روی عنصر کلیک می‌کنید، فوکوس دریافت نمی‌کند.

رفتار فوکوس (Focus) متناقض است. صفحه خود را در دستگاه‌های مختلف و با ورودی‌های مختلف آزمایش کنید تا مطمئن شوید که سبک‌های فوکوس شما برای کاربران قابل قبول است.

برای نمایش انتخابی یک نشانگر فوکوس، از :focus-visible استفاده کنید.

شبه کلاس :focus-visible زمانی اعمال می‌شود که یک عنصر فوکوس دریافت می‌کند و مرورگر (با استفاده از روش‌های اکتشافی) تشخیص می‌دهد که نمایش نشانگر فوکوس برای کاربر مفید خواهد بود. به طور خاص، اگر آخرین تعامل کاربر با صفحه کلید بوده و فشردن کلید شامل کلیدهای متا، ALT ، OPTION یا CONTROL نبوده باشد، آنگاه :focus-visible مطابقت خواهد داشت.

دکمه در مثال زیر به صورت انتخابی یک نشانگر فوکوس را نشان می‌دهد. اگر از ماوس برای کلیک استفاده کنید، نتایج متفاوت از حالتی است که ابتدا از صفحه کلید برای حرکت به سمت آن استفاده کنید.

button:focus-visible {
  outline: 4px dashed orange;
}

از :focus-within برای استایل‌دهی به والد یک عنصر focus شده استفاده کنید.

شبه کلاس :focus-within زمانی روی یک عنصر اعمال می‌شود که خود عنصر یا یک عنصر فرزند فوکوس دریافت کند. می‌توان از آن برای هایلایت کردن یک ناحیه از صفحه برای جلب توجه کاربر به آن ناحیه استفاده کرد.

برای مثال، یک فرم هم زمانی که خود فرم انتخاب شده باشد و هم زمانی که هر یک از دکمه‌های رادیویی آن انتخاب شده باشند، فوکوس را دریافت می‌کند.

form:focus-within {
  background: #ffecb3;
}

چه زمانی نشانگر فوکوس نمایش داده شود

یک سوال خوب این است که از خودتان بپرسید: «اگر هنگام استفاده از دستگاه تلفن همراه روی این کنترل کلیک کنید، آیا انتظار دارید که یک صفحه کلید نمایش داده شود؟»

• اگر بله : کنترل باید همیشه یک نشانگر فوکوس را نشان دهد، صرف نظر از دستگاه ورودی. برای مثال، این تقریباً همیشه در مورد عنصر <input type="text"> صادق است. کاربر باید ورودی را با صفحه کلید به عنصر ارسال کند، صرف نظر از اینکه عنصر ورودی چگونه در فوکوس قرار می‌گیرد.
• اگر خیر : کنترل ممکن است به صورت انتخابی یک نشانگر فوکوس را نشان دهد. برای مثال، وقتی کاربر با ماوس یا صفحه لمسی روی یک <button> کلیک می‌کند، عمل تکمیل می‌شود. نشانگر فوکوس ممکن است غیرضروری باشد. با این حال، اگر کاربر با صفحه کلید پیمایش می‌کند، نمایش یک نشانگر فوکوس مفید است تا کاربر بتواند تصمیم بگیرد که آیا می‌خواهد کنترل را با ENTER یا SPACE فعال کند یا خیر.

از outline: none

راستش را بخواهید، نحوه‌ی تصمیم‌گیری مرورگرها برای رسم نشانگر فوکوس بسیار گیج‌کننده است. تغییر ظاهر یک عنصر <button> با CSS یا دادن tabindex به یک عنصر باعث می‌شود که رفتار پیش‌فرض حلقه‌ی فوکوس مرورگر فعال شود.

گاهی اوقات، توسعه‌دهندگان با استفاده از CSS نشانگر فوکوس را حذف می‌کنند:

/* Don't do this!!! */
:focus {
  outline: none;
}

یک راه بهتر برای حل این مشکل، ترکیب :focus و :focus-visible polyfill است. اولین بلوک کد نحوه عملکرد polyfill را نشان می‌دهد و برنامه نمونه زیر آن، مثالی از استفاده از polyfill برای تغییر نشانگر فوکوس روی یک دکمه ارائه می‌دهد.

/*
  This hides the focus indicator if the element receives focus with a
  mouse, but it still shows up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

/*
  Optionally: Define a strong focus indicator for keyboard focus.
  If you choose to skip this step, then the browser's default focus
  indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
  ...
}