Hola Habr! Les presento la traducción del artículo
"Mis 5 razones principales por las que me gustan las propiedades personalizadas de CSS" de Stas Melnikov
La especificación de propiedad personalizada CSS ha cambiado para siempre mi visión del desarrollo web. Es por eso que quiero escribir por qué me gustan las propiedades CSS personalizadas.
¿Qué son las propiedades CSS personalizadas?
En resumen, las propiedades personalizadas de CSS son propiedades que fueron creadas por el desarrollador. El navegador no sabe nada sobre ellos hasta que el desarrollador los determine.
La declaración de cualquier propiedad personalizada comienza con dos guiones, después de lo cual debe agregar el nombre de la propiedad. Luego agrega color y establece el valor de la propiedad.
Por ejemplo, creé la propiedad melnik909BrandColor, con un valor
morado para el elemento del
botón :
button { --melnik909BrandColor: purple; }
Función Var
La primera característica de las propiedades CSS personalizadas es la función
var . Con esta función, puedo decirle al navegador que tome el valor de la propiedad personalizada y lo agregue a cualquier propiedad CSS.
Para hacer esto, debo definir la propiedad CSS y agregar el valor de esta propiedad, en el mismo lugar establezca la función
var con una propiedad personalizada como argumento.
Por ejemplo, agregué la propiedad --melnik909BrandColor para las propiedades de borde y color.
button { --melnik909BrandColor: purple; color: var(--melnik909BrandColor); border: 2px solid var(--melnik909BrandColor); }
Las propiedades personalizadas se pueden cambiar directamente en el navegador
Un lector experimentado que conoce herramientas como Sass o LESS podría decir:
"Stas, ¿por qué debería estudiar las propiedades personalizadas de CSS? Conozco las variables Sass y eso es suficiente para mí " .
Atencion Las variables Sass y LESS ayudan a organizar CSS para que sea más fácil para los desarrolladores mantener el código. Por ejemplo, creé una variable $ melnik909BrandColor en la que guardé el color:
$melnik909BrandColor: purple; button { color: $melnik909BrandColor; border: 2px solid $melnik909BrandColor; }
Después de la compilación, veré el siguiente código en el navegador:
button { color: purple; border: 2px solid purple; }
Este ejemplo muestra que las variables Sass y LESS no están en el navegador.
La segunda característica de las propiedades CSS personalizadas es que están en el navegador. De esa manera, puedo cambiar los valores allí mismo. Por ejemplo, puedo cambiar el valor de la propiedad —melnik909BrandColor para el estado de selección del elemento del
botón :
button { --melnik909BrandColor: purple; color: var(--melnik909BrandColor); border: 2px solid var(--melnik909BrandColor); } button:hover { --melnik909BrandColor: #27ae60; }
Puede usar propiedades CSS personalizadas y consultas multimedia juntas
La tercera característica de las propiedades de CSS personalizadas es que sus valores se pueden cambiar mediante consultas de medios. Por ejemplo, defino la propiedad melnik909BrandColor para cambiar el color del texto del elemento del
cuerpo en diferentes dispositivos.
body { color: var(--melnik909BrandColor); } @media (max-width: 768px) { body { --melnik909BrandColor: purple; } } @media (min-width: 769px) { body { --melnik909BrandColor: tomato; } }
Función Calc y propiedades personalizadas CSS
Hay momentos en que necesitamos usar la función
calc . Por ejemplo, me gusta usar esta función cuando necesito contar el número de elementos en una fila:
.child { width: calc(100% / 4); } .child { width: calc(100% / 3); }
Sin embargo, este código es difícil de reutilizar, y aquí las propiedades CSS personalizadas nos ayudarán. Podemos crear una variable que lea la cantidad de elementos. Por ejemplo, agregaré la propiedad –-itemsNumber al ejemplo anterior:
.child { width: calc(100% / var(--itemsNumber)); }
Y definiré los valores en el elemento
padre :
.parent { --itemsNumber: 5; } .parent { --itemsNumber: 7; }
Personalización de gráficos vectoriales
Hay 2 formas de personalizar gráficos vectoriales usando propiedades CSS personalizadas.
En el primer método, definimos los atributos
relleno, trazo y ancho de trazo , y les agregamos propiedades CSS personalizadas como sus valores.
Además, podemos agregar valores de atributos estableciendo los valores de las propiedades personalizadas:
<svg class="svg-with-attr" viewBox="0 0 55.867 55.867"> <path stroke="var(--iconStroke)" stroke-width="var(--iconStrokeWidth)" fill="var(--iconFill)" d="..."> </svg>
Ahora podemos agregar valores de atributos estableciendo el valor de las propiedades personalizadas:
.svg-with-attr { --iconFill: #eeeeee; --iconStroke: #000000; --iconStrokeWidth: 1px; }
A la izquierda está el icono predeterminado sin estilos, y a la derecha está el icono con estilos.
En el segundo método, definimos propiedades CSS personalizadas para
trazo, ancho de trazo y propiedades de
relleno mediante reglas CSS.
body { --iconFill: #ffcc00; --iconStroke: #000000; --iconStrokeWidth: 2px; } .svg-with-props { stroke: var(--iconStroke); stroke-width: var(--iconStrokeWidth); fill: var(--iconFill); }