CodePen

הוספת רכיב לסדר הכרטיסיות

הוספת רכיב לסדר הכרטיסיות הטבעי באמצעות 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>

הפעולה הזו מסירה רכיב מסדר הכרטיסיות הטבעי, אבל עדיין אפשר להתמקד בו על ידי קריאה ל-method של focus().

שימו לב שהחלת tabindex="-1" על רכיב מסוים לא משפיעה על הצאצאים שלו. אם הם נמצאים בסדר הכרטיסיות באופן טבעי או בגלל ערך tabindex, הם יישארו בסדר הכרטיסיות. כדי להסיר רכיב ואת כל הצאצאים שלו מסדר הכרטיסיות, אפשר להשתמש בפוליפיל inert של WICG. ה-polyfill מדמה את ההתנהגות של מאפיין inert מוצע, ומונע בחירה או קריאה של רכיבים על ידי טכנולוגיות מסייעות.

קדימה, מתחילים!

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

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

חשוב לשים לב לשימוש ב-steps(var(--count)) כדי לקבל את האפקט הנכון ✨