"El diseño es el embajador silencioso de tu marca"
- Paul Brand

El selector :focus-within de CSS4

Uno de los nuesvos selectores de CSS4 es :focus-within, en este link este link puedes consultar la documentación oficial.

Que cobertura tiene en nuestros navegadores?

A Noviembre de 2017 podemos afirmar que la cobertura no está nada mal, los navegadores importantes implementan ya esta nuevo selector, podemos verlo.

Si tenemos nuestro navegador actualizado, tanto Chrome, Firefox y Safari entre otros ya lo tienen implementado, nos falta todavía que los navegadores de Microsoft como Explorer y Edge lo hagan, pero siempre suelen tardar más que el resto.

Esto quiere decir que en caso de tener que garantizar la cobertura de Explorer o el navagador nativo de Android tendremos que recurrir a otro tipo de soluciones como usar Javascript o algún Polyfill.

Para qué sirve?

Pues como su nombre indica para aplicar estilos a cierto selector cuando el foco este en algún elemento dentro de él.

Si no nos ha quedado claro con la explicación de arriba piensa en este ejemplo, tenemos varios inputs dentro de un wrapper, el código podría ser este:

Cuando aplicas :focus dentro de un input estas definiendo los estilos que tendrá cuando el reciba el foco. Voy a declarar que cada uno de los inputs cambie su color de fondo cuando esto suceda:

El resultado es este.

Ahora vamos a jugar con el otro selector, que es de el que estamos hablando, el :focus-within.
Con él como decíamos cuando algún elemento hijo reciba el foco se aplicaran los estilos que definamos.
En nuestro caso se lo aplicamos al wrapper de manera que cuando alguno de los inputs que hay dentro reciban el foco, el wrapper que es su padre cambiará.

Para seguir con la linea del ejemplo vamos a hacer que cambie de color…

Este es el resultado ahora.

Como vemos su funcionamiento no tiene ningún misterio y nos ahorra mucho trabajo haciendo historias con javascript como escuchar eventos del foco para añadir y eliminar clases o estilos.

Sin duda CCS4 va a mejorar mucho nuestros desarrollos!

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)