CodePen

Chèn một phần tử vào thứ tự thẻ

Chèn một phần tử vào thứ tự thẻ tự nhiên bằng cách sử dụng tabindex="0". Ví dụ:

<div tabindex="0">Focus me with the TAB key</div>

Để lấy tiêu điểm một phần tử, hãy nhấn phím Tab hoặc gọi phương thức focus() của phần tử đó.

Xoá một phần tử khỏi thứ tự thẻ

Xoá một phần tử bằng tabindex="-1". Ví dụ:

<button tabindex="-1">Can't reach me with the TAB key!</button>

Thao tác này sẽ xoá một phần tử khỏi thứ tự thẻ thông thường, nhưng bạn vẫn có thể lấy tiêu điểm phần tử đó bằng cách gọi phương thức focus().

Lưu ý rằng việc áp dụng tabindex="-1" cho một phần tử không ảnh hưởng đến các phần tử con; nếu chúng được sắp xếp theo thứ tự thẻ một cách tự nhiên hoặc do giá trị tabindex thì các phần tử này sẽ vẫn ở thứ tự thẻ. Để xoá một phần tử và tất cả các phần tử con khỏi thứ tự thẻ, hãy cân nhắc sử dụng polyfill inert của WICG. Tệp polyfill mô phỏng hành vi của một thuộc tính inert được đề xuất, thuộc tính này ngăn công nghệ hỗ trợ chọn hoặc đọc các phần tử.

Xoay vòng mọi thứ!

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

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

Lưu ý việc sử dụng steps(var(--count)) để tạo được hiệu ứng phù hợp ✨