CSS nav-down
La proprietà CSS3 nav-down controlla la navigazione verticale verso il basso
La proprietà nav-down
in CSS3 viene usata per personalizzare la navigazione tra elementi tramite tastiera o controller direzionali. È utile in ambienti come interfacce TV, console e applicazioni accessibili. Indica quale elemento riceverà il focus premendo la freccia giù.
Sintassi
Significato dei valori principali:
-
auto: (valore predefinito) Il browser decide il comportamento in base al flusso del documento.
-
none: Disattiva la navigazione verso il basso da questo elemento.
-
selector ID o nome: Indica esplicitamente l’ID o il nome dell’elemento da focalizzare. Esempio:
nav-down: #elemento2;
-
inherit: L’elemento eredita il valore dal genitore.
⚠️ Nota sul supporto:
Anche se è specificata in CSS3, il supporto di nav-down nei browser è molto limitato e generalmente non supportato nei principali browser desktop. È pensata per dispositivi con ambienti utente personalizzati (smart TV, WebKit per TV, ecc.).
In pratica, il comportamento di nav-down è simile a quello di altre proprietà come tabindex, ma è pensato per specificare come il focus deve essere spostato quando si preme la freccia giù (freccia verso il basso) sulla tastiera o con un controller direzionale.
Esempio proprietà: nav-down
Codice Esempio: nav-down

.nav-example {
width: 300px;
height: 60px;
margin: 20px auto;
text-align: center;
line-height: 60px;
background-color: #c5cae9;
border: 2px solid #3f51b5;
border-radius: 8px;
font-size: 18px;
}
#box1 {
nav-down: #box2;
}
#box2 {
nav-down: #box3;
}
#box3 {
nav-down: none;
}
Contenuto Esempio: nav-down
Esempio di utilizzo di nav-down
In questo esempio, la pressione del tasto 'giù' sulla tastiera sposta il focus da un box all'altro:
CSS e HTML per la navigazione direzionale:
<style>
.nav-example {
width: 300px;
height: 60px;
margin: 20px auto;
text-align: center;
line-height: 60px;
background-color: #c5cae9;
border: 2px solid #3f51b5;
border-radius: 8px;
font-size: 18px;
}
#box1 {
nav-down: #box2;
}
#box2 {
nav-down: #box3;
}
#box3 {
nav-down: none;
}
</style>
<div id="box1" class="nav-example" tabindex="0">Box 1 (Premi ↓)</div>
<div id="box2" class="nav-example" tabindex="0">Box 2 (Premi ↓)</div>
<div id="box3" class="nav-example" tabindex="0">Box 3 (fine)</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.