Selectores Css: las nuevas pseudoclases aplicadas a la validación de campos 16.1.15
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
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
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
A mí me gusta mucho el 'a::local-link(n)' , que combinado con los filtros por atributo y valor, va a resolver el tema del menú tipo "árbol de navegación". Siempre hay alguien que pide que el botón de la página actual tenga otro formato y que los niveles superiores, pero del mismo ítem, también se destaquen. Cada hoja de estilos ahora podrá saber no sólo en qué documento está sino también a qué profundidad de carpeta en el servidor se encuentra.
ResponderEliminarBueno, supongo que lo hará el día que salga de Working Draft y los navegadores se dignen a implementarlo.
:-P
¿alguien conocerá un ejemplo que no sean formularios?
ResponderEliminarEs que me parece que el artículo es sobre elementos User Interface, que son tipicamente de formulario. Sí, bueno, yo me metí a comentar algo sobre enlaces, pero de última también actúa con el usuario.
EliminarEstuve mirando el enlace que dejó el autor, ahí tenés bastante para recorrer. La mayoría aún no funciona, pero quizá alguno te sirva aunque sea como idea.(:root es algo que quería estudiar...)
Me adelanto a pedirte que aclarés cómo y dónde pensás utilizar qué. Seguro con esa información Kseso podrá ayudarte mejor.
Hola Rowilson
EliminarHago mio el consejo final de Furoya: Si eres más preciso y añades datos o situaciones concretas a tu caso particular las respuestas serán más certeras y acertadas.
Cada pseudoclase aplica a aquellos elementos que por su naturaleza pueden adquirir el estado en que aplican.
Hay algunas (como las tradicionales :hover :focus...) que "afectan" a cualquier elementos.
Otros , casi todos los de una página, son por definición :read-only (el usuario sólo puede leerlos, no reescribirlos) excepto unos pocos como los textareas y algunos inputs que son :read-write (el visitante puede escribir en ellos).
Sin embargo, y centrados en estas dos pseudoclases, esto lo puede alterar el desarrollador declarando a cualquier contenedor el atributo contenteditable.
Otros no pueden declararse a cualquiera, como los referidos al tipo y rango de valores admitidos.
Sin embargo y además de lo anterior, la potencia de estas pseudoclases no está sólo en ellas mismas aplicadas a aquellos elementos que las admiten.
Tienen un puntito más: en combinación con los operadores de hermanos o hermanos adyacentes por ejempl (~/+) puedes declarar estilos a cualquier otro elemento (con la limitación de css de no poder afectar a los ascendentes en el DOM) en función de su estado:
:invalid + form {pointer-events: none;}
:valid + form {pointer-events: all;}
:checked + form textarea {/*tus declaraciones*/}
Y más aún, declarar varias pseudoclases conjuntamente al mismo tiempo en el selector: :required:not(:only-of-type) {}
Como ves, el límite no sólo lo marcan las especificaciones y las herramientas que facilitan, sino que dependen de la imaginación de cada uno.
Un saludo
Enlace roto "ejemplo en los inputs."
ResponderEliminarGracias por el aviso, Rubén.
EliminarArreglado