html - tabindex 的 CSS 替代方案

Question

我想知道是否有 tabindex 的 CSS 替代方案。

<button tabindex="1">ONE</button>
<button tabindex="3">TWO</button>
<button tabindex="2">THREE</button>

备选方案nav-index早就放弃了。

The following features are at-risk, and may be dropped during the CR period:

Directional focus navigation: the nav-up, nav-right, nav-down, nav-left properties.

Answer 1

页面上元素的顺序是确定选项卡索引顺序的唯一其他方式。这是我多年前曾经做的事情，当时我不得不支持一个网站的非 JavaScript 版本。你可以用 css 做的是在视觉上重新定位元素，现在你有使用 flex 和 order 的优势。

<style type="text/css">
.myFlexWrapper{
   display:flex; 
   /* I advise using sass and autoprefixer to poly fill all the other browsers*/
}

.myFlexWrapper button:nth-child(1){
  order:30; /* will display this button visually last but retain the tabindex as 1 because it's the first item.*/
}
.myFlexWrapper button:nth-child(2){
  order:10;/* will display this button visually first but retain the tabindex as 2 because it's the second item.*/
}
.myFlexWrapper button:nth-child(3){
  order:20;/* will display this button visually second but retain the tabindex as 3 because it's the third item.*/
}
</style>

<div class="myFlexWrapper">
   <button>ONE</button>
   <button>TWO</button>
   <button>THREE</button>
</div>