nav-index у CSS — застарілий порядок обходу клавішею Tab

HTML

<div class="pad">
    <button id="b1">Кнопка 1</button>
    <button id="b2">Кнопка 2</button>
    <button id="b3">Кнопка 3</button>
    <button id="b4">Кнопка 4</button>
</div>

CSS

.pad {
    position: relative;
    height: 200px;
}

button {
    position: absolute;
}

button#b1 { top: 10%; left: 25%; nav-index: 1; nav-right: #b2; nav-left: #b4; nav-down: #b2; nav-up: #b4; }
button#b2 { top: 40%; left: 50%; nav-index: 2; nav-right: #b3; nav-left: #b1; nav-down: #b3; nav-up: #b1; }
button#b3 { top: 70%; left: 25%; nav-index: 3; nav-right: #b4; nav-left: #b2; nav-down: #b4; nav-up: #b2; }
button#b4 { top: 40%; left: 0;   nav-index: 4; nav-right: #b1; nav-left: #b3; nav-down: #b1; nav-up: #b3; }

HTML

<h4 class="cap">1. Порядок, заданий властивістю <code>nav-index</code></h4>
<div class="box dead">
    <input id="n1" value="написано першим"><input id="n2" value="написано другим"><input id="n3" value="написано третім">
</div>
<p class="note">Правила кажуть 3, 2, 1 — Tab усе одно піде 1, 2, 3.</p>

<h4 class="cap">2. Порядок, заданий атрибутом <code>tabindex</code></h4>
<div class="box live">
    <input tabindex="3" value="написано першим, обхід третій">
    <input tabindex="2" value="написано другим, обхід другий">
    <input tabindex="1" value="написано третім, обхід ПЕРШИЙ на всій сторінці">
</div>
<p class="note">⚠️ Останнє поле випереджає навіть верхню групу: додатне число
    підіймає елемент над усім документом.</p>

<table id="report">
    <thead><tr><th>група</th><th>порядок обходу</th></tr></thead>
    <tbody></tbody>
</table>

CSS

.box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 560px;
    margin-bottom: 6px;
    padding: 10px 14px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
}

.box input {
    flex: 1 1 160px;
    padding: 6px 8px;
    border: 1px solid #b9c6d8;
    border-radius: 4px;
    font: inherit;
}

.box input:focus {
    outline: 3px solid #3a9a4f;
    outline-offset: 2px;
}

/* експонат: жодне з цих оголошень не доживе до правила */
.dead #n1 { nav-index: 3; }
.dead #n2 { nav-index: 2; }
.dead #n3 { nav-index: 1; }

.dead {
    border-color: #d64545;
    background: #fdeeee;
}

.live {
    border-color: #3a9a4f;
    background: #edf9ef;
}

table {
    margin-top: 14px;
    border-collapse: collapse;
    font-size: .88rem;
}

th,
td {
    padding: 4px 9px;
    border: 1px solid #b9c6d8;
    text-align: left;
}

th {
    background: #eef4ff;
}

.cap {
    margin: 22px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

.note {
    max-width: 560px;
    color: #5a6472;
    font-size: .9em;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}

JS

// 1. Чи дожило хоч одне оголошення nav-index до правила
const vsiPravyla = [...document.styleSheets].flatMap((s) => [...s.cssRules]);
const pravylo = vsiPravyla.find((r) => r.selectorText === '.dead #n1');
console.log('правило «.dead #n1» після розбору:', JSON.stringify(pravylo.style.cssText)); // → ""
console.log('nav-index підтримується?', CSS.supports('nav-index', '1')); // → false

// 2. Рахуємо справжній порядок обходу: спершу додатні tabindex за зростанням,
//    потім усе решта в порядку розмітки
function poryadokObhodu(korin) {
    const vsi = [...korin.querySelectorAll('input')];
    const dodatni = vsi.filter((e) => e.tabIndex > 0).sort((a, b) => a.tabIndex - b.tabIndex);
    const reshta = vsi.filter((e) => e.tabIndex === 0);
    return [...dodatni, ...reshta].map((e) => e.value);
}

const tbody = document.querySelector('#report tbody');
for (const [nazva, selektor] of [['через nav-index', '.dead'], ['через tabindex', '.live']]) {
    const poryadok = poryadokObhodu(document.querySelector(selektor));
    const row = tbody.insertRow();
    row.insertCell().textContent = nazva;
    row.insertCell().textContent = poryadok.join('  →  ');
    console.log(nazva + ':', poryadok.join(' -> '));
}
// → через nav-index: написано першим -> написано другим -> написано третім
// → через tabindex: написано третім (обхід перший) -> написано другим -> написано першим

// 3. Найкорисніше значення — -1: фокус лише програмний
const prychovane = document.createElement('input');
prychovane.tabIndex = -1;
document.body.append(prychovane);
prychovane.focus();
console.log('елемент із tabindex="-1" дістав фокус скриптом?',
    document.activeElement === prychovane, '— а клавішею Tab до нього не дійти'); // → true
prychovane.remove();

HTML

<p>Увага! Ця властивість підтримується лише браузером Opera 11.5-12, в усіх інших браузерах (навіть пізніших версіях Opera) вона не працює!</p>

<hr>

<div class="wrapper">
  <button id="b1">Button 1</button>
  <button id="b2">Button 2</button>
  <button id="b3">Button 3</button>
  <button id="b4">Button 4</button>
</div>

CSS

body {
  line-height: 1.5;
  font-size: 18px;
  color: #444;
  font-family: sans-serif;
}

button {
    position: absolute;
}

button#b1 {
    top: 25%; left: 45%;
    nav-index: 1;
    nav-right: #b2; nav-left: #b4;
    nav-down: #b2; nav-up: #b4;
}

button#b2 {
    top: 45%; left: 75%;
    nav-index: 2;
    nav-right: #b3; nav-left: #b1;
    nav-down: #b3; nav-up: #b1;
}

button#b3 {
    top: 75%; left: 45%;
    nav-index: 3;
    nav-right: #b4; nav-left: #b2;
    nav-down: #b4; nav-up: #b2;
}

button#b4 {
    top: 45%; left: 15%;
    nav-index: 4;
    nav-right: #b1; nav-left: #b3;
    nav-down: #b1; nav-up: #b3;
}