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>

این یک عنصر را از ترتیب برگه طبیعی حذف می کند، اما همچنان می توان با فراخوانی متد 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)) برای به دست آوردن افکت مناسب توجه کنید ✨