CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS nav-index

La proprietà CSS3 nav-index controlla l’ordine di navigazione tramite tastiera

La proprietà nav-index definisce la priorità di focus tra elementi quando si naviga con tastiera o controller. È utile nei layout per smart TV o in ambienti dove il focus deve essere controllato in modo preciso, anche se l’elemento appare più in basso nel DOM. Valori più bassi vengono selezionati prima.

Sintassi

nav-index: numero | auto | inherit;

Significato dei valori principali:

  • numero: Imposta un valore intero per l'ordine di navigazione. Numeri più bassi ricevono focus prima.

  • auto: (default) L’ordine è determinato dal browser in base alla struttura DOM.

  • inherit: L’elemento eredita il valore dal suo elemento padre.


⚠️ Nota sul supporto:
nav-index è parte della specifica CSS3 Basic User Interface Module, ma non è supportata dalla maggior parte dei browser moderni, dove per il controllo del focus, si usa generalmente tabindex (standard HTML) al posto di nav-index.

Anche se non è ampiamente supportata nei browser moderni, è pensata per contesti come dispositivi TV, console, o applicazioni che usano telecomandi e tastiere direzionali.


Esempio proprietà: nav-index


Codice Esempio: nav-index

CODE: CSSpreleva codice
  1. .nav-index-example {
  2.   width: 250px;
  3.   height: 60px;
  4.   margin: 10px auto;
  5.   text-align: center;
  6.   line-height: 60px;
  7.   background-color: #ffe082;
  8.   border: 2px solid #ff6f00;
  9.   border-radius: 8px;
  10.   font-size: 18px;
  11. }
  12.  
  13. #a { nav-index: 3; }
  14. #b { nav-index: 1; }
  15. #c { nav-index: 2; }

Contenuto Esempio: nav-index

Esempio di utilizzo di nav-index

In questo esempio, gli elementi riceveranno focus in base al valore nav-index (non secondo l’ordine DOM):



CSS e HTML per l'ordine con nav-index:

  
  <style>
    .nav-index-example {
      width: 250px;
      height: 60px;
      margin: 10px auto;
      text-align: center;
      line-height: 60px;
      background-color: #ffe082;
      border: 2px solid #ff6f00;
      border-radius: 8px;
      font-size: 18px;
    }

    #a { nav-index: 3; }
    #b { nav-index: 1; }
    #c { nav-index: 2; }
  </style>

  <div id="a" class="nav-index-example" tabindex="0">Elemento A (nav-index: 3)</div>
  <div id="b" class="nav-index-example" tabindex="0">Elemento B (nav-index: 1)</div>
  <div id="c" class="nav-index-example" tabindex="0">Elemento C (nav-index: 2)</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.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies