El índice de navegación CSS define el orden de navegación secuencial para cada elemento. Igual que otras propiedades de navegación, no contiene el atributo de nombre de destino. El índice de navegación CSS solo es compatible con Opera 12.0.
Sintaxis:
nav-index: auto | number | initial | inherit;
Atributo:
- auto: Es el valor por defecto aquí los navegadores definen el orden.
- número: Define el orden de tabulación del elemento.
- inicial: Es el valor por defecto.
- heredar: hereda de su elemento padre.
El siguiente ejemplo ilustra la propiedad nav-index:
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>CSS nav-index Property</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
button {
position: absolute;
}
h1 {
color: green;
}
button {
background-color: #80ff80;
nav-right: auto;
nav-left: auto;
nav-down: auto;
nav-up: auto;
border-radius: 25px;
font-size: 20px;
}
#Geeks1 {
top: 35%;
left: 43%;
nav-index: 1;
}
#Geeks2 {
top: 50%;
left: 65%;
nav-index: 2;
}
#Geeks3 {
top: 65%;
left: 43%;
nav-index: 3;
}
#Geeks4 {
top: 50%;
left: 20%;
nav-index: 4;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>CSS nav-index Property</h4>
<p>
Press the <samp>Shift</samp>
key while navigating with the arrow keys.
</p>
</center>
<button id="Geeks1">Button
<i class="fa fa-arrow-circle-up"></i>
</button>
<button id="Geeks2">Button
<i class="fa fa-arrow-circle-right"></i>
</button>
<button id="Geeks3">Button
<i class="fa fa-arrow-circle-down"></i>
</button>
<button id="Geeks4">Button
<i class="fa fa-arrow-circle-left"></i>
</button>
<div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los principales navegadores no son compatibles con la propiedad CSS nav-index
Extensión específica de los navegadores: la propiedad css nav-index tiene una extensión específica de los navegadores.
- Google Chrome -webkit-
- Internet Explorer -ms-
- Firefox -moz-
- Safari -webkit-
- Ópera -webkit-
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA