nav-down у CSS — застарілий перехід фокуса стрілкою вниз

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-down</code></h4>
<ul class="menu dead">
    <li><a href="#" id="m1">Головна</a></li>
    <li><a href="#" id="m2">Довідник</a></li>
    <li><a href="#" id="m3">Статті</a></li>
    <li><a href="#" id="m4">Контакти</a></li>
</ul>
<p class="note">Клацніть «Головна» і натисніть ↓ — фокус лишиться на місці,
    зате прогорнеться сторінка.</p>

<h4 class="cap">2. Те саме, що справді працює</h4>
<ul class="menu live" id="live">
    <li><a href="#" tabindex="0">Головна</a></li>
    <li><a href="#" tabindex="-1">Довідник</a></li>
    <li><a href="#" tabindex="-1">Статті</a></li>
    <li><a href="#" tabindex="-1">Контакти</a></li>
</ul>
<p class="note" id="stan">Клацніть «Головна» і тисніть ↓ ↑ Home End.</p>

<pre id="log">Тут з'являться кроки.</pre>

CSS

.menu {
    max-width: 260px;
    margin: 0 0 6px;
    padding: 6px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    list-style: none;
}

.menu a {
    display: block;
    padding: 6px 10px;
    border-radius: 4px;
    color: #1d3a6b;
    text-decoration: none;
}

.menu a:focus {
    outline: 3px solid #3a9a4f;
    outline-offset: -1px;
    background: #fff;
}

/* експонат: жодного з цих оголошень переглядач не прийме */
.dead #m1 { nav-down: #m2; nav-up: #m4; }
.dead #m2 { nav-down: #m3; nav-up: #m1; }
.dead #m3 { nav-down: #m4; nav-up: #m2; }
.dead #m4 { nav-down: #m1; nav-up: #m3; }

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

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

pre {
    max-width: 560px;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
    font-size: .85rem;
    white-space: pre-wrap;
}

.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

const log = document.getElementById('log');
const pysaty = (t) => { log.textContent += '\n' + t; console.log(t); };

log.textContent = 'Що переглядач думає про правила з першого меню:';
for (const zapys of ['nav-down: #m2', 'nav-up: #m4', 'nav-left: #m1', 'nav-right: #m3']) {
    const [vlas, znach] = zapys.split(': ');
    pysaty('  ' + zapys + ' -> ' + (CSS.supports(vlas, znach) ? 'прийнято' : 'ВИКИНУТО')); // → ВИКИНУТО
}

// перевіряємо ще й через таблицю стилів: чи лишилося оголошення в правилі
const vsiPravyla = [...document.styleSheets].flatMap((s) => [...s.cssRules]);
const pravylo = vsiPravyla.find((r) => r.selectorText === '.dead #m1');
pysaty('текст правила «.dead #m1» після розбору: ' + JSON.stringify(pravylo.style.cssText)); // → ""

// робоча заміна: рухомий tabindex
const menu = document.getElementById('live');
const punkty = [...menu.querySelectorAll('a')];
const stan = document.getElementById('stan');

menu.addEventListener('keydown', (e) => {
    const zaraz = punkty.indexOf(document.activeElement);
    if (zaraz === -1) {
        return;
    }

    let nastupnyj = null;
    if (e.key === 'ArrowDown') { nastupnyj = (zaraz + 1) % punkty.length; }
    if (e.key === 'ArrowUp') { nastupnyj = (zaraz - 1 + punkty.length) % punkty.length; }
    if (e.key === 'Home') { nastupnyj = 0; }
    if (e.key === 'End') { nastupnyj = punkty.length - 1; }
    if (nastupnyj === null) {
        return;
    }

    e.preventDefault(); // ⚠️ без цього стрілка ще й гортатиме сторінку
    punkty.forEach((a, i) => { a.tabIndex = i === nastupnyj ? 0 : -1; });
    punkty[nastupnyj].focus();

    stan.textContent = 'Фокус на пункті «' + punkty[nastupnyj].textContent + '»';
    pysaty(e.key + ' -> ' + punkty[nastupnyj].textContent);
});

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;
}