soy Kseso y esto EsCSS

Propiedades nav-up nav-right nav-down nav-left control del :focus por teclas de navegación

Propiedades nav-up nav-right nav-down nav-left control del :focus por teclas de navegación

·Por Kseso ✎ 0
Propiedades nav-up nav-right nav-down nav-left control del :focus por teclas de navegación

El documento CSS Basic User Interface Module Level 3 [estatus actual CR desde Julio de 2015] recoge propiedades y valores para controlar mediante Css aspectos de la interfaz de usuario. En EsCss le he dedicado, entre otros, artículos a ver en profundidad lo relacionado con:

Amén de múltiples demos para controlar aspectos de la interfaz, como las basadas en el scroll y su control y apariencia.

Un punto novedoso de este documento del W3c es el control del foco (:focus) y qué elemento lo recibe al usar las teclas de navegación para desplazarnos por el contenido de un documento.

No confundir con el uso de la tecla tabuladora [tab] y su funcionamiento. El control de qué elemento recibirá el foco al usarla no está encomendado a Css sino al atributo tabindex que admite como valores números enteros.

Y el elemento que recibe el :focus usando la tecla tab siempre es el consecutivo al que lo tiene según la numeración del atributo tabindex. Y en su ausencia por su aparición en el código.

Como curiosidad, el valor máximo de tabindex es 32767 [ref]

Control del focus por las cuatro flechas de navegación del teclado

Otra forma de desplazar el foco [:focus] de un elemento a otro es mediante el uso de las cuatro teclas de navegación [◂ ▴ ▾ ▸] o en aquellos dispositivos que no cuentan con teclado las que el mismo dispositivo o el usuario haya programado como tales.

Css en documento CSS Basic User Interface Module Level 3 define cuatro nuevas propiedades para controlar a qué elemento pasará el foco al usar una de estas teclas:

Característica Valor
Nombre: nav-up nav-right nav-down nav-left
Valor: auto | <id> [ current | root | <target-name> ]
Inicial: auto
Aplica a: todos los elementos habilitados
Se hereda: no
Porcentajes: n/a
Media types: interactivos
Valor computado: el especificado
Animable: no

Como se desprende del nombre de las cuatro nuevas propiedades nav-up nav-right nav-down nav-left cada una de ellas está asociada a una de las cuatro teclas de navegación y a su pulsación por el usuario.

Su forma de uso es la común en Css:

#el-2 { nav-right:#el-4; nav-left:#el-5; nav-down:#el-3; nav-up:#el-1; } [id^='el-']:focus { /*declaraciones al recibir el foco*/ }

Propiedades nav-up nav-right nav-down nav-left y sus valores posibles

Auto
Queda en manos del navegador a qué elemento le asigna el foco al ser pulsada la tecla de navegación correspondiente.
id
El valor id se corresponde con el valor del atributo ID de algún elemento presente en el documento.
En caso de encontrarse repetido ese valor (?!) enfocará siempre al primero que aparezca en el DOM.
Si es el elemento que ya tiene el foco se ignora, pues no puede ser re-enfocado
Si no existe dicho ID en el documento queda a discreción del navegador.
target-name
El parámetro target-name es una cadena de texto e indica el marco (frame) que recibirá el foco. No puede comenzar por el carácter guión bajo _
En caso de comenzar por el guión bajo buscará un frame con dicho nombre: _parent el frame padre de todo el documento. _root es tratado como la palabra clave root lo que puede suponer poner el foco en toda la ventana.
En caso de que no exista ningún marco con el nombre declarado el valor se trata como la palabra clave current, lo que significa el frame en el que se encuentra el elemento.

Navegación entre frames

#el { nav-left: #bar "sidebar"; }

La regla anterior significa que al estar el foco en el elemento con id el (#el:focus y pulsar la tecla de navegación izquierda (◂) el navegador pondrá el foco en el elemento con id='bar' que se encuentra en el frame cuyo atributo name tenga el valor de sidebar

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso