أنماط التركيز على لوحة المفاتيح فقط في المتصفحات الحديثة

في المتصفحات الحديثة، يمكن استخدام الفئة الزائفة : Focus-visible لتحقيق لوحة المفاتيح- أنماط التركيز فقط. تتطابق هذه الفئة الزائفة مع العناصر المركزة عندما يتفاعل المستخدم مع الصفحة عبر لوحة المفاتيح أو أي جهاز آخر لا يشير إلى التركيز، مما يشير إلى التركيز عندما يساعد المستخدم. ونتيجة لذلك، يتم منع حلقات التركيز عندما يتفاعل المستخدم عن طريق النقر أو النقر.

تصميم التركيز المخصص مع:focus-visible

لتنفيذ أنماط التركيز المخصصة مع الحفاظ على التوافق مع المتصفحات الأقدم، اتبع هذا الأسلوب:

button:focus {
  /* Default focus styles */
}

button:focus:not(:focus-visible) {
  /* Undo default focus styles */
}

المتصفحات التي تدعم :focus-visible، تتجاوز القاعدة الثانية أنماط التركيز المحددة في القاعدة الأولى عندما يكون :focus-visible غير نشط. وهذا يضمن أن أنماط التركيز يتم تطبيقها فقط عندما يكون :focus-visible نشطًا.

الحل الأصلي للمتصفحات الأقدم

بالنسبة للمتصفحات التي لا تدعم :focus-visible، يتضمن النهج البديل استخدام عنصر إضافي داخل كل عنصر قابل للتركيز، كما هو مقترح في مقالة رومان كوماروف:

/* Root button styling */
.btn {
  all: initial;
  display: inline-block;
}

/* Inner content element */
.btn__content {
  background: orange;
  cursor: pointer;
  display: inline-block;
}

/* Custom focus styles on inner element */
.btn:focus > .btn__content {
  box-shadow: 0 0 2px 2px #51a7e8;
  color: lime;
}

من خلال وضع أنماط التركيز على عنصر داخلي، مع إزالة الخطوط العريضة الافتراضية على كل من العنصر الأصلي والداخلي بعد إضافة نمط التركيز المخصص، فإن تفاعلات لوحة المفاتيح فقط هي التي تطبق أنماط التركيز على العنصر المرئي الأساسي.