Uso de propiedades personalizadas de CSS para una mejor experiencia de usuario
Publicado: 2019-11-29
Última actualización - 8 de julio de 2021
CSS3 trajo consigo una de las mayores adiciones que ha tenido la especificación CSS durante mucho tiempo. Generaba mucho revuelo porque abordaba un problema clave que había afectado a los desarrolladores durante años y era la razón principal que tenían las personas para preferir el uso de preprocesadores como SASS: la capacidad de usar variables.
Con la adición de variables CSS, gran parte del código que tenía que escribirse para admitir funciones básicas como la creación de temas ya no es necesario. Es una función útil que se puede usar para evitar repeticiones y permitir aún más casos de uso, como tamaños de fuente dinámicos y simplicidad en la adición de capacidad de respuesta en una aplicación web.
Deshacerse del desorden con variables CSS
Una característica común de la mayoría de las aplicaciones son los colores de la marca que deben permanecer iguales y consistentes en toda la aplicación. A nadie se le ocurre almacenar diez valores hexadecimales diferentes en la cabeza para futuras referencias, y pasar de un archivo a otro para copiar valores no solo es engorroso, sino que también es perjudicial para la productividad. Ahora, imagine la cantidad de trabajo que debe hacerse si esos colores necesitan cambiar.
El uso de preprocesadores CSS con WordPress es la forma más común de abordar el problema. Estos ofrecen soporte para una gran cantidad de características como mixins, declaraciones anidadas y, por supuesto, variables, que son un gran impulso para la productividad.
Todo lo que necesita hacer es escribir su código una vez y se compila en CSS, al que puede acceder y cambiar libremente si así lo desea. Sin embargo, la incapacidad de encontrar y cambiar estos valores en tiempo de ejecución para, por ejemplo, agregar un tema oscuro a su aplicación web es su mayor inconveniente. Es un problema importante no solo porque SASS no lo admite, sino que probablemente nunca lo hará.
La adición de variables integradas personalizadas a las aperturas de CSS ha tenido un efecto importante en la forma en que escribimos aplicaciones, especialmente en lo que respecta a la temática y el diseño receptivo.
¿Cómo es la compatibilidad del navegador con las variables CSS?
Esta es la pregunta más común que surge cuando se discuten las variables CSS. Según Caniuse , el soporte del navegador para las variables CSS se sitúa en el 93,16%. Es compatible con todos los navegadores modernos (Chrome 49+, Firefox 31+, Safari 9.3+, Opera 36+ y Edge 16+). Como siempre, IE no aparece en la feria y tiene una sorprendente cuota de mercado del 6,47 % . Para los desarrolladores pobres que tienen que admitir navegadores antiguos, no se preocupen. Polyfills , o más correctamente, ponyfills, están aquí para salvar el día.
Una introducción formal a las variables CSS
Si está familiarizado con las variables CSS, no debería tener ningún problema con las variables CSS.
Las variables SASS se declaran así:
<antes>
$facebook-azul: #4267B2;
</pre>
Mientras que las variables CSS se declaran un poco diferente:
<antes>
:raíz {
–marca-color: #4267B2;
}
.marca-barra de navegación {
fondo: var(- -marca-color);
}
</pre>
Observe algunas diferencias entre las dos sintaxis:
- Las variables CSS deben estar precedidas por dos guiones
- Las variables CSS normalmente se declaran dentro de ':root', pero se pueden volver a declarar en cualquier momento.
- Las propiedades CSS se recuperan mediante la función 'var()'.
Las variables CSS también ofrecen acceso a varias características adicionales.
Valores en cascada
Las propiedades CSS se conectan en cascada siguiendo las reglas de cascada normales. En otras palabras, las redeclaraciones a continuación no afectan a las anteriores.
<antes>
:raíz { –color: amarillo; }
div { –color: azul; }
#genial { –color: verde; }
* { color: var(–color); }
<p>¡Seré amarillo, heredado de root!</p>
<div>¡Soy azul!</div>
<div id=”genial”>
¡Funcionó! ¡Soy verde!
<p>¡Yo también soy verde! ¡Heredado de arriba!</p>
</div>
</pre>
Valores alternativos
La función 'var()' acepta varios parámetros. El segundo se puede utilizar como valor alternativo en caso de que la propiedad CSS personalizada no esté definida. Esta es una función útil para cualquier persona que necesite acceder a las variables CSS a través de JavaScript.
Su firma se parece a 'var(<nombre-de-propiedad-personalizado> [, <valor-declaración> ]?)' y se puede usar de la siguiente manera
<antes>
.marca-barra de navegación {
fondo: var(–marca-color, “#4267B2”);
}
</pre>
Si no se define '–brand-color', se usará "#4267B2" en su lugar,
Acceso a través de JavaScript
Una de las mejores razones para usar variables CSS sobre un preprocesador es la capacidad de acceder a variables personalizadas a través de JavaScript. Las variables del preprocesador no viven en el navegador. Se evalúan cuando se compila el código. De esta forma, no se puede acceder a las variables del preprocesador en el navegador. Con las variables CSS, la propiedad vive en el navegador, lo que otorga la capacidad de editar valores sobre la marcha.
Considere un tablero que le permita al usuario seleccionar colores personalizados a través de una ventana emergente o algo similar.
<antes>
.marca-barra de navegación {
fondo: var(–marca-color, “#4267B2”);
}
//Para obtener el valor actual
getComputedStyle(document.documentElement).getPropertyValue('–brand-color');
//Para establecer el valor
document.documentElement.style.setProperty('–brand-color', 'red');
// Incluso puedes asignar una propiedad CSS a otra
document.documentElement.style.setProperty('–marca-color','var(–secundario-color)');
</pre>
Alcance global y local
Si está familiarizado con JavaScript (o cualquier lenguaje de programación, en realidad), probablemente comprenda el concepto de alcance. Normalmente, las variables se pueden definir de modo que solo sean accesibles para ciertas partes del código, lo que se denomina ámbito local, o que estén disponibles para su uso en toda la aplicación, lo que se denomina ámbito global.
Las variables CSS funcionan de manera similar. Algunas variables deben tener un alcance global para una referencia más sencilla, por ejemplo, los colores de la marca y el espaciado vertical. Por lo general, siguen siendo los mismos en toda la aplicación y, en caso de que se produzca un cambio, debería reflejarse en todas partes. Por el contrario, las variables que pueden requerir un alcance local incluyen botones con diferentes variantes grandes y pequeñas. Si desea cambiar el relleno de un botón en particular, no querrá que los cambios atraviesen todo el DOM. Debe cambiarse en un solo punto de la aplicación.
De forma predeterminada, las propiedades de CSS tienen un alcance local. Y si ha trabajado con JavaScript o cualquier otro lenguaje de programación, el alcance tiene sus propios problemas. Dado que se pueden heredar, también actúan como variables locales, lo que puede tener algunas repercusiones interesantes si no se tiene cuidado con la forma en que se usan. Dado que los valores caen en cascada, debe tener en cuenta cómo los cambia, especialmente cuando se trata de JavaScript.
Uso de propiedades personalizadas con consultas de medios
Al igual que con los preprocesadores, una desventaja importante de usar propiedades CSS es que no se pueden usar en consultas de medios. Por ejemplo, esto no funcionará.
<antes>
@media (ancho mínimo: var(–punto de interrupción)){
relleno: 1 rem;
}
</pre>
Lo que puede hacer en su lugar es redefinir las propiedades personalizadas dentro de las consultas de medios. Si necesita cambiar el tamaño de fuente cuando el navegador se reduce, está de suerte. Con las variables CSS, puede escuchar los cambios del navegador usando JavaScript y cambiar los tamaños que necesiten reducirse solo una vez.
¿Cuáles son algunas aplicaciones prácticas de las propiedades CSS personalizadas?
“Hoy, además de utilizar los servicios de CDN para mejorar el rendimiento del sitio , el uso de propiedades personalizadas de CSS es una de las formas más rápidas de mejorar la productividad”, aconseja Colby Stuart, un diseñador web de servicios de redacción de documentos personalizados .
Además de los beneficios bien destacados, se suma a la productividad, ¿hay algún ejemplo real de cómo se pueden usar en una aplicación web?
Agregar modo oscuro
Una nueva tendencia que ha capturado el mercado de consumo es la demanda de modo oscuro en todo el software moderno, incluidas las aplicaciones web. Puede ser un poco más complicado que agregar un color de fondo oscuro. Otras cosas que deben tenerse en cuenta incluyen cómo cambiarán los colores del texto y cómo se verán afectadas las imágenes con fondos blancos.
Todo esto es posible al declarar primero las variables a lo largo de su aplicación. Cuando el usuario activa el interruptor para oscurecer el tema del sitio web, activa una función de JavaScript que cambia las variables CSS. Si su aplicación web es más complicada, esto también podría incluir la sustitución de las imágenes actuales por otras compatibles con el modo oscuro.
Agregar modo oscuro en WordPress
Las variables CSS han sido tan influyentes que han llegado al mundo de WordPress. Hoy en día, crear un modo oscuro (o, más generalmente, tematizar) una aplicación de WordPress es bastante trivial.
La mayoría de los desarrolladores de WordPress confían en el Personalizador para cambiar la apariencia y la funcionalidad de sus sitios. Brinda acceso a cosas como colores, fuentes, imágenes de fondo, etc. al acceder al CSS de su sitio. El mayor problema con esto es que al cambiar el CSS de esta manera obliga a PHP a volver a procesar su HTML y, al hacerlo, hace que el servidor vuelva a enviar el archivo completo al navegador. Tu aplicación hace una solicitud innecesaria y consume más datos de los que necesita.
“Si una aplicación de este tipo estuviera orientada al consumidor, probablemente recibirías muchas quejas. Si no tiene archivos CSS dedicados para las variables que desea cambiar, las cosas empeoran mucho”. Helena Newman, desarrolladora sénior de papersowl review y editora de servicios de redacción de currículums, lo considera una adición necesaria a la especificación CSS.
Usando variables CSS, todos los colores se cambian en el navegador usando JavaScript. La única solicitud que se hará es persistir el tema actual en el servidor si es necesario. E incluso entonces, dicha variable se puede guardar en el navegador.
Agregar diseño receptivo a un sitio web
Con más teléfonos móviles en Internet que nunca, la necesidad de sitios web receptivos nunca ha sido más evidente. El aspecto más crucial del diseño receptivo que sorprende a los desarrolladores es cambiar el tamaño de las fuentes. Para una aplicación que usa múltiples fuentes o fuentes dinámicas, hacer un seguimiento de ellas y cambiarlas para diferentes navegadores es una tarea ardua.
En cambio, las propiedades CSS personalizadas le permiten definir un tamaño de fuente universal que se puede usar y reutilizar en todo su sitio web. En caso de que necesite cambiar, todo lo que necesita hacer es llamar a una función de JavaScript y todo funciona.
Si no necesita admitir navegadores antiguos, las variables CSS personalizadas se pueden usar junto con el (relativamente) nuevo sistema CSS de cuadrícula para eliminar por completo la necesidad de consultas de medios.
Por otra parte, las consultas de medios aún pueden ser necesarias si necesita escuchar los cambios de ancho dentro del propio CSS. Esta es la única forma en que puede admitir navegadores que no permiten la ejecución de JavaScript.
Conclusión
Las variables CSS personalizadas son algunas de las adiciones más significativas a la especificación en bastante tiempo. Pueden simplificar su proceso de diseño eliminando el desorden de sus archivos CSS y eliminando la necesidad de realizar solicitudes adicionales innecesarias.