¿Puede obtener valores de propiedad CSS válidos desde el navegador?
Alguien me escribió con esta pregunta muy legítima. Lea acaba de escribir en su blog sobre cómo obtener propiedades CSS válidas desde el navegador. Eso es así.
Eso te da, por ejemplo, el hecho de que cursor
es una cosa. Pero entonces, ¿cómo saber para qué sirven los valores válidos cursor
? Sabemos por la documentación que existen valores como auto
, none
, help
, context-menu
, pointer
, progress
, wait
y muchos más.
¿Pero de dónde viene esa lista? Bueno, hay una lista justo en la especificación, así que es útil. Pero eso no garantiza la lista completa de valores que cualquier navegador realmente admite. ¡Podría haberlo cursor: skull-and-crossbones
y ni siquiera lo sabríamos!
Podemos probar aplicándolo a un elemento y buscando en DevTools:
Pero a menos que lancemos un gran ataque de diccionario contra ese valor, en realidad no sabemos qué valor tiene directamente en el navegador. ¿Quizás Houdini ayude de alguna manera a que los navegadores mejoren en la introspección de CSS?
También puedes usar el CSS
objeto para ejecutar pruebas como CSS.supports(property, value)
:
Uno pensaría que podríamos tener me gusta CSS.validValues("text-decoration-thickness")
y obtener me gusta ["length", "percentage", "auto", "from-font"]
o algo parecido, pero, por desgracia, nada.
Deja un comentario