soy Kseso y esto EsCSS

Selectores Css: las nuevas pseudoclases aplicadas a la validación de campos

Las nuevas pseudoclases CSS de estado y un ejemplo de uso aplicadas a la validación instantánea y simultanea de campos con :valid :invalid : required :read-only ...

Selectores Css: las nuevas pseudoclases aplicadas a la validación de campos

·Por Kseso ✎ 6
Selectores Css de estados: las nuevas pseudoclases aplicadas a la validación de campos

Como respuesta a todas la novedades habidas tanto por la ampliación que el lenguaje Html5 ha traído como por el propio desarrollo de los aparatos con los que se visualiza la web, el Css se ha ido haciendo cada vez más complejo y completo.

Uno de los aspectos en los que se nota este efecto es en el aumento de los conocidos como pseudoelementos y pseudoclases recogidos en los distintos documentos del consorcio.

Es tal ésta variedad de ellos que en algunos casos la clasificación como pseudoclase o pseudoelemento es un tanto sutil. Bien podría calificarse como uno y otro.

Pero lo que sí queda claro es que con tanta diversidad de ellos es fácil perder de vista a alguno.

Lejos quedan los días en que se podían enumerar de memoria las pocas pseudoclases que había. Y además, como no todas eran soportadas por algún navegador, pues menos las realmente utilizadas.

Vamos con una pequeña relación de las distintas pseudoclases relacionadas con el estado de los elementos recogidas en las especificaciones. Sabiendo que la mayoría de ellas ya pueden ser utilizadas sin mayores problemas por ser compatibles por una amplia mayoría de los navegadores actuales.

Pseudoclases de estado de la interfaz de usuario

Las pseudoclases clásicas

La especificación sobre los selectores definen varios selectores de la interfaz de usuario que representan estados de interfaz de usuario;

:active
En los sistemas con más de un botón en el ratón sólo se aplica al botón de activación primaria (normalmente el botón "izquierdo") o su equivalente.
:indeterminate
Se aplica a los elementos de la interfaz cuyo valor se encuentra en un estado indeterminado. Por ejemplo, los elementos radio y checkbox se pueden conmutar entre los estados 'cheked' y 'uncheked', pero a veces se encuentran en un estado indeterminado: ni han sido marcados ni desmarcados por el usuario. Lo mismo ocurre con los indicadores de progreso, se encuentran en un estado indeterminado hasta no alcanzar su 100%.

Las pseudoclases de los inputs

Además de las anteriores pseudoclases, el nuevo documento selectors level 4 introduce varias pseudoclases nuevas para controlar los estados de los inputs.

  • :default
  • :valid
  • :invalid
  • :in-range
  • :out-of-range
  • :required
  • :optional
  • :read-only
  • :read-write
  • :user-error
  • :placeholder-shown

En concreto, estos nuevos estados (a excepción de :default) se proporcionan como una forma de aplicar estilos a los elementos que se encuentran en los respectivos estados definidos por el documento XForms

Recuerda que estos estados no sólo son adquiridos por el elemento tras una acción del usuario. También pueden ser indicados por el desarrolador en el código del documento, como por ejemplo en los inputs.

Uso práctico de las pseudoclases de estado

¿Necesitas un ejemplo de uso de estas nuevas pseudoclases?

Ponte en situación. Unos campos de formulario. La validación hasta ahora depende como poco de js, algo excesivo, creo.

Juguemos con css y tenemos la ventaja que supone que el usuario verifica de forma simultánea según va actuando:

Dado el siguiente css y html

input:required { border: 3px solid red; background: yellow; } input:valid { border: 3px solid green; background: #fff; } input:invalid { border: 3px solid red; background: #000; box-shadow: 0 0 10px 2px red; color: #888; } <h4>:required</h4> <p>Name: <input type="text" value="" required /></p> <h42>:valid</h4> <p>Email:> <input type="email" value="correo@dominio.com" /></p> <h4>:invalid + :required</h4> <p>Teléfono: <input type="number" value="texto" required /></p>

:required

Name:

:valid

Correo

:invalid + :required

Teléfono:

Prueba a introducir o no información en los inputs

En este ejemplo sólo se modifican los bordes o el fondo. Pero puedes ir un paso más allá y jugando con los pseudoelementos :before/:after mostrar texto e imágenes

Y aquí un ejemplo algo más elaborado que vi en codepen:

See the Pen Cozy Inputs by Jeffrey Jorgensen (@jayjo) on CodePen

Adenda por serendipia

En lo que estaba preparando este artículo, el mismo día de su publicación pero unas horas antes, David Walsh publica en su blog ":valid, :invalid, and :required CSS Pseudo Classes"

Artículo publicado originalmente el 07/08/13 Actualizado el 16 de Enero de 2015 con alguna novedad del documento Selectors Level 4

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