Stas Melnikov, autor del curso HTML HTML Layout, habló sobre los matices que pueden complicar el trabajo con propiedades CSS personalizadas.Reglas de sintaxis de nombre de propiedad personalizada
Estamos acostumbrados al hecho de que las propiedades CSS en línea no distinguen entre mayúsculas y minúsculas. Por lo tanto, los siguientes métodos para declarar una propiedad de
border darán el mismo resultado:
button { BORDER: 2px solid
Las propiedades personalizadas, en cambio, distinguen entre mayúsculas y minúsculas, por lo que el siguiente ejemplo crea dos propiedades personalizadas diferentes:
button { --NETOLOGY-BRAND-COLOR:
Ahora el marco se ha convertido en # 800080 (morado) y el texto se ha convertido en # 27ae60 (verde).
Valores válidos para propiedades personalizadas
Para una propiedad CSS normal, puede establecer solo los valores permitidos por el estándar. De acuerdo con el estándar de propiedad personalizada, cualquier valor CSS válido existente puede usarse como un valor. Por ejemplo, como con todas las siguientes propiedades personalizadas:
.element::before { --color: rgba(0, 0, 0, 1); --hex:
Por ejemplo, configuremos el marco con el color # 800080 para el botón:
button { --netologyBrandColor:
Además de los valores estándar, puede establecer una propiedad personalizada como valor para otra.
button { --netologyBrandColor:
El resultado no es diferente del anterior, y el botón todavía tiene un marco con el color # 800080.
Si la propiedad personalizada
--netologyBrandColor tiene un valor incorrecto para la propiedad de
border-color del
border-color , por ejemplo 18px, el marco se volverá negro.
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border-width: 2px; border-style: solid; border-color: var(--buttonBorderColor); }
El hecho es que antes de que el navegador aplique el valor de la propiedad del usuario para la propiedad incorporada, verificará que sea correcta. Si el valor está disponible para la propiedad en línea, el navegador lo aplicará. De lo contrario, establecerá el valor predeterminado para la propiedad integrada.
En nuestro caso, 18px es un valor incorrecto para la propiedad de
border-color incorporada y, por lo tanto, el navegador establecerá el valor predeterminado, es decir,
currentColor . Esto es muy fácil de verificar configurando la propiedad de
color en # 800080:
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border-width: 2px; border-style: solid; border-color: var(--buttonBorderColor); color:
Como puede ver, el navegador aplicó el valor # 800080 para el marco. En este ejemplo, utilicé la sintaxis completa para establecer el marco. Pero podemos usar uno corto, a saber, la propiedad de
border .
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border: 2px solid var(--buttonBorderColor); color:
Aquí estamos esperando otro matiz. Hay una sección separada en el estándar que describe el comportamiento de las propiedades personalizadas en tal situación. Según él, si una propiedad de usuario tiene un valor incorrecto para una propiedad en línea, entonces esta propiedad de usuario no es válida, por lo que el navegador ignorará la propiedad en línea.
En nuestro ejemplo, la propiedad de
border incorporada tiene uno de los valores establecidos en la propiedad personalizada
--buttonBorderColor con un valor no válido de 18px. Según el algoritmo descrito, el navegador simplemente ignoró la propiedad del
border , por lo que el elemento perdió el borde.
El valor predeterminado para propiedades personalizadas
Cuando miramos el ejemplo de la función
var , utilizamos solo un parámetro: el nombre de la propiedad personalizada.
button { --netologyBrandColor:
Pero además de eso, la función
var puede aceptar el segundo, el valor predeterminado. Para declarar un valor predeterminado, debe poner una coma después del nombre de la propiedad personalizada y escribir el valor en sí.
Cuando el navegador se da cuenta de que el desarrollador no ha declarado un valor para la propiedad personalizada, utiliza el valor predeterminado. Por ejemplo, el valor # 800080 (morado) para una propiedad personalizada es
--netologyBrandColor .
button { border: 2px solid var(--netologyBrandColor,
Vemos que el marco y el texto se vuelven morados. Pero si mueve el botón, se volverán verdes. Esto indica que el navegador aplicó el valor # 27ae60 a la propiedad del usuario, reemplazando así el valor predeterminado.
Pero estas no son todas las posibilidades de la función
var . En el ejemplo anterior, la propiedad personalizada
--netologyBrandColor usa dos veces, respectivamente, por lo que configuro el valor predeterminado dos veces.
Pero se puede hacer de manera diferente. La función
var permite pasar otra función
var , por lo que puede establecer otra propiedad personalizada como valor predeterminado. Reescribiré el ejemplo anterior usando la propiedad personalizada
--defaultButtonColor :
button { --defaultButtonColor:
Exteriormente, el resultado no cambiará. Pero ahora para cambiar el valor predeterminado, debe hacer esto solo en un lugar, y no en varios, como antes.
Herencia de propiedades personalizadas
CSS tiene un mecanismo de herencia que permite que los elementos hereden propiedades de elementos primarios. En este sentido, las propiedades personalizadas no son diferentes de ellas. Por ejemplo, escribiré el código en el que la propiedad personalizada
--netologyBrandColor hereda del elemento del
body principal.
body { --netologyBrandColor:
Al mirar al inspector, puede observar la inscripción "Heredado del cuerpo", que nos muestra que la propiedad personalizada se tomó del elemento
body . Pero si agregamos la propiedad personalizada
--netologyBrandColor para el elemento del
button , entonces ya anula la propiedad del elemento del
body .
body { --netologyBrandColor:
El inspector muestra que la propiedad personalizada
--netologyBrandColor elemento del
button anula la propiedad
--netologyBrandColor , que especificamos para el elemento del
body .
Valores globales
En el estándar CSS, las Propiedades personalizadas introdujeron una pseudoclase
root especial que le permite especificar propiedades personalizadas que se aplican al elemento raíz del documento. Por ejemplo, en un documento HTML para un elemento
html .
:root { --netologyBrandColor:
En el inspector, podemos ver que la propiedad personalizada declarada se aplica al elemento html. Pero, además del documento HTML, la pseudoclase
root funciona en documentos SVG. Por ejemplo, declararé propiedades personalizadas en la etiqueta de
style .
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 28" width="50" height="50"> <style> :root{ --iconColor:
Y aquí vemos que la pseudoclase raíz
root ha agregado al elemento raíz SVG. En consecuencia, esto prueba que la pseudoclase raíz se aplica no solo a la etiqueta
html , sino a cualquier elemento raíz.
Conclusión
En este artículo, nos encontramos con trampas de propiedades personalizadas que pueden ser confusas. Y en consecuencia, podemos comenzar a usarlos. Por lo tanto, en el próximo artículo hablaré sobre trucos prácticos que utilizo en mis proyectos.
De los editores
Cursos de Netología sobre el tema: