Propiedades nav-up nav-right nav-down nav-left control del :focus por teclas de navegación 8.5.16
La nuevas propiedades Css para el control del elemento que recibirá el foco al utilizar el teclado y las cuatro flechas de navegación.
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:
- Las pseudoclases de estado y la nueva propiedades de Outline
- Validación de campos de formularios con pseudoclases de Css
- Cursores por defecto
- Cursores Css personalizados con imágenes (data-uri)
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
idse 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 serre-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ácterguión bajo
_
En caso de comenzar por el guión bajo buscará un frame con dicho nombre:_parentel frame padre de todo el documento._rootes tratado como la palabra claverootlo 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 clavecurrent, 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
Kseso
the obCSServer ᛯ 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 Kseso