CodePen

bookmark_border קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

הוספת רכיב לסדר הקלדת Tab

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