nav-up у 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-*</code></h4>
<div class="grid dead">
    <button id="g1">1</button><button id="g2">2</button>
    <button id="g3">3</button><button id="g4">4</button>
</div>
<p class="note">Клацніть «3» і натисніть ↑ — нічого не станеться.</p>

<h4 class="cap">2. Та сама сітка на скрипті</h4>
<div class="grid live" id="live">
    <button tabindex="0">1</button><button tabindex="-1">2</button>
    <button tabindex="-1">3</button><button tabindex="-1">4</button>
</div>
<p class="note" id="stan">Клацніть «1» і ходіть стрілками в чотири боки.</p>

<pre id="log"></pre>

CSS

.grid {
    display: grid;
    grid-template-columns: 60px 60px;
    gap: 8px;
    width: fit-content;
    margin-bottom: 6px;
    padding: 10px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
}

.grid button {
    padding: 12px 0;
    border: 1px solid #b9c6d8;
    border-radius: 4px;
    background: #fff;
    font: inherit;
}

.grid button:focus {
    outline: 3px solid #3a9a4f;
    outline-offset: 2px;
}

/* повний набір — і жодного прийнятого оголошення */
.dead #g1 { nav-up: #g3; nav-down: #g3; nav-left: #g2; nav-right: #g2; }
.dead #g2 { nav-up: #g4; nav-down: #g4; nav-left: #g1; nav-right: #g1; }
.dead #g3 { nav-up: #g1; nav-down: #g1; nav-left: #g4; nav-right: #g4; }
.dead #g4 { nav-up: #g2; nav-down: #g2; nav-left: #g3; nav-right: #g3; }

.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 += t + '\n'; console.log(t); };

// що лишилося в правилі після розбору
const vsiPravyla = [...document.styleSheets].flatMap((s) => [...s.cssRules]);
for (const selektor of ['.dead #g1', '.dead #g4']) {
    const pravylo = vsiPravyla.find((r) => r.selectorText === selektor);
    pysaty('правило «' + selektor + '»: ' + JSON.stringify(pravylo.style.cssText)
        + ' (оголошень: ' + pravylo.style.length + ')'); // → "" (оголошень: 0)
}
pysaty('nav-up підтримується? ' + CSS.supports('nav-up', '#g3')); // → false
pysaty('spatial-navigation-action підтримується? ' + CSS.supports('spatial-navigation-action', 'focus')); // → false

// жива сітка: сусід рахується за координатами в сітці 2×2
const SUSIDY = {
    ArrowUp: [2, 3, 0, 1],
    ArrowDown: [2, 3, 0, 1],
    ArrowLeft: [1, 0, 3, 2],
    ArrowRight: [1, 0, 3, 2],
};

const grid = document.getElementById('live');
const knopky = [...grid.querySelectorAll('button')];
const stan = document.getElementById('stan');

grid.addEventListener('keydown', (e) => {
    const karta = SUSIDY[e.key];
    const zaraz = knopky.indexOf(document.activeElement);
    if (!karta || zaraz === -1) {
        return;
    }

    e.preventDefault(); // стрілка вгору типово гортає сторінку
    const nastupna = karta[zaraz];
    knopky.forEach((b, i) => { b.tabIndex = i === nastupna ? 0 : -1; });
    knopky[nastupna].focus();

    stan.textContent = 'Фокус на кнопці ' + knopky[nastupna].textContent;
    pysaty(e.key + ': ' + knopky[zaraz].textContent + ' -> ' + knopky[nastupna].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;
}