La pseudoclase CSS :focus-within 28.4.17
Qué es y cómo aplica la pseudoclase CSS :focus-within. Demo incluída.
La pseudoclase CSS :focus-within
La "nueva" pseudoclase CSS :focus-within la engloba el documento Selectors Level 4 entre las relativas a las acciones del usuario (User Action Pseudo-classes
).
La primera parte de su nombre :focus- ya indica por donde va: la pseudoclase CSS aplicará a un determinado elemento al recibir el foco tras alguna acción del usuario. Pero para eso ya existe "desde siempre" la pseudoclase :focus a secas. Así que algo más debe aportar.
Y este "algo más" es que extiende "el recibir el foco un elemento" a que sea sobre él o sobre cualquier otro elemento contenido en él. Esto es, aplica los estilos si el elemento o alguno de sus hijos reciben el foco.
Veamos un ejemplo. Tengamos el siguiente código:
<fieldset class='user-datos' tabindex='1'> <legend>Datos personales</legend> <label for='nombre'>Nombre <input type='text' id='nombre' tabindex='2' /> </label> <label for='Apellido-1'>1º Apellido <input type='text' id='Apellido-1' tabindex='3' /> </label> <label for='Apellido-2'>2º Apellido <input type='text' id='Apellido-2' tabindex='4' /> </label> </fieldset>
Nota que tanto el fieldset como cada uno de los input's tienen su correspondiente atributo tabindex
Pero no así los label's
Al que aplicamos el siguiente CSS:
fieldset:focus-within { background: tomato; } label:focus-within, input:focus { background: #3f5771; color: #fff; }
El resultado de aplicar la pseudoclase CSS :focus-within será que el fieldset se mostrará con fondo de color tomate al recibir el foco sobre él y también lo mantendrá al pasar a cualquiera de los input's que contiene.
Y otro tanto ocurre con cada label al recibir el foco el input que tiene como hijo.
En estos momentos (Abril 2017) la pseudoclase CSS :focus-within es soportada por
Firefox 52
Safari 10.1
Chrome 60
Han anunciado su soporte Chrome en la versión 59 y en Opera 46 previa activación del flag de las novedades CSS. Y en caniuse puedes ver el soporte en cada momento.
Puedes ver la pseudoclase CSS :focus-within en acción en la siguiente demo:
See the Pen :focus-within by Kseso (@Kseso) on CodePen.
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
Mientras leía, pensé en las pestañas de "dos líneas", que al elegir alguna de la fila superior automaticamente se pasa abajo para asociarse a su contenido. En la práctica, esto nos resuelve el mecanismo.
ResponderEliminarGracias por traerlo. Seguro en la comunidad le van a encontrar más usos.
Un abrazo.
Si no fuera por su falta de soporte en todos los navegadores, le daría BASTANTE uso.
EliminarSí, Furoya, abre campo para muchas demos en "puro CSS" que ahora requieren marcado extra (técnica del :checked o :target) que podrían realizarse usando :focus-within.
EliminarY ya si añadimos a la marmita algo del Grid Layout... uf!
[code]
elemento:focus-within ~ * {
display: none;
}
elemento:focus-within > div {
grid-area: mi-area;
}
[/code]
por ejemplo ;-)
Hola JuniHH
¿Sabías que el soporte a algo tan "viejo" como box-shadow no es universal aún?
Pero bueno, ese (el soporte) es un detalle que nunca he tenido muy en cuenta en este blog ;-)
Ya sabes, las cuestiones "productivistas" las dejo para los "productores" xD
Un saludo
Estaba leyendo sobre este tema en el blog de Iand Devlin, por fortuna no tendremos que esperar mucho para que este disponible. En combinación con otras técnicas de marcado se podrán conseguir efectos realmente interesantes.
ResponderEliminar