Acabamos de lanzar Vanilla v3.0, una actualización importante de nuestro marco CSS. Incluye algunas actualizaciones y mejoras importantes en torno a las variables de espaciado, puntos de interrupción receptivos, un nuevo cuadro de búsqueda ampliado y varias actualizaciones de los componentes existentes. Los aspectos importantes de esta versión incluyen la eliminación de una serie de estilos y componentes obsoletos y la eliminación de la compatibilidad con IE.
En esta publicación de blog, cubriremos los cambios más importantes introducidos por Vanilla v3.0:
Variable de espaciado reconstruida
Nos hemos esforzado mucho para garantizar que los componentes en Vanilla tengan un espaciado constante y que todos los elementos de texto y bloque se alineen correctamente con nuestra cuadrícula de referencia. Para hacer esto posible manteniendo el marco flexible, hemos usado muchas variables de espaciado en nuestro código SCSS en el pasado. Estos se utilizan para agregar cantidades variables de espaciado horizontal o vertical a los elementos.
También tenemos variables separadas para el espaciado «interior» y «exterior». Estos resultados son confusos porque para componentes más complejos no siempre está claro si un espacio determinado debe considerarse «interior» o «exterior». Otro aspecto que complica el espaciado de vainilla es el multiplicador de densidad que se puede cambiar a nivel de cuadro. Afecta a algunas variables de espaciado (llamémoslas «escalables»), pero no a otras. No se usa mucho y es una fuente de confusión y errores.
Para Vanilla 3.0, decidimos refactorizar las variables de espaciado y reducir su número. Hacemos esto eliminando la separación del espacio «interior» y «externo», fusionando diferentes variables con el mismo valor y eliminando todas las variables que tienen multiplicadores de densidad y sus efectos. Todavía mantenemos variables separadas para el espaciado horizontal y vertical (para aclarar qué valores deben usarse en una dirección dada), pero todas siguen la misma convención de nomenclatura. Por lo tanto, el espacio horizontal «pequeño» tiene el mismo valor que el espacio vertical «pequeño».
Además de este trabajo, también limpiamos y refactorizamos algunas asignaciones relacionadas con el espaciado.
Esto nos permitió reducir el número de variables de espaciado primarias de 20 a alrededor de 10 y nombrarlas de manera más clara y consistente.
Puedes aprender más sobre espaciado de vainilla en nuestra documentación o ver nuestra Guía de migración sobre cómo actualizar las variables de espaciado en su proyecto Vanilla v3.0.
Ordene los puntos de interrupción receptivos
Durante la actualización para Vanilla v3.0, notamos algunas inconsistencias en cómo las diferentes partes del marco usan puntos de interrupción de consulta de medios. Parece que diferentes componentes y utilidades cambian su comportamiento de respuesta o estilos en diferentes puntos de interrupción, lo que dificulta comprender cómo el tamaño de la pantalla afecta los estilos o diseños.
Hicimos una revisión exhaustiva de todos los componentes y utilidades que usan consultas de medios. Luego simplificamos cómo Vanilla maneja los cambios reactivos y solucionamos las inconsistencias que encontramos.
El mayor cambio es la eliminación del punto de interrupción «medio», que era una fuente importante de inconsistencia. Algunos componentes lo usan como el valor de ancho máximo, otros como el ancho mínimo.
Al eliminarlo, ahora solo tenemos 2 puntos de interrupción importantes en Vanilla 3.0: $breakpoint-large y $breakpoint-small, que dividen los posibles anchos de pantalla en 3 rangos:
- Pantalla pequeña (menos de
$breakpoint-small) - Pantalla mediana (desde
$breakpoint-smally menos que$breakpoint-large) - pantalla grande (desde
$breakpoint-largey más grande)
Además, aún se pueden usar algunos componentes que requieren una capacidad de respuesta más granular $breakpoint-x-small (posicionando la pantalla del móvil en modo retrato) o $breakpoint-x-large (para monitores de pantalla ancha grandes).
Puedes aprender más sobre Puntos de interrupción de consulta de medios en Vanilla documentar o leer Cómo migrar puntos de interrupción a Vanilla 3.0 en nuestra guía.
eliminar el soporte para IE
Una de nuestras principales prioridades en Vanilla es asegurarnos de que nuestros estilos funcionen en todos los navegadores. Mantener la compatibilidad de Vanilla con Internet Explorer requiere trabajo y código adicionales a medida que evoluciona la funcionalidad de CSS. A medida que Microsoft centra su atención en el nuevo navegador Edge, la cantidad de usuarios que aún usan Internet Explorer se ha reducido significativamente.
En 2021, todos nuestros sitios de Canonical tendrán casi 50 millones de visitas, con menos de 5500 visitas desde Internet Explorer, o menos del 0,01 %.
La pequeña cantidad de usuarios de Internet Explorer en nuestro sitio nos llevó a decidir eliminar Internet Explorer de los navegadores compatibles con Vanilla a partir de la versión v3.0. Esto nos permitió eliminar una gran cantidad de estilos personalizados y respaldos que teníamos que mantener, sobre todo una implementación completamente separada de la cuadrícula (usando flexbox en lugar de la cuadrícula CSS).
Nuevo cuadro de búsqueda ampliado
Vanilla v3.0 no contiene muchas funciones o componentes nuevos, ya que los hemos agregado periódicamente durante el desarrollo de la versión Vanilla v2. Una de las pocas características nuevas introducidas exclusivamente en esta versión es el nuevo cuadro de búsqueda ampliado.
En Vanilla v3.0, eliminamos algunos estilos obsoletos del componente principal de navegación, lo que nos permitió implementar una nueva funcionalidad para él.
El cuadro de búsqueda extendida se introdujo por primera vez en el sitio web ubuntu.com. Gracias a los esfuerzos de los desarrolladores invitados que se unieron al equipo de Vanilla (¡gracias Min y Fran!), se refactorizó al estándar de Vanilla y se cargó como parte del marco, y ahora se lanza en v3.0.
Resumen de estilos y componentes eliminados
Una de las principales razones por las que comenzamos a planificar Vanilla v3.0 fue eliminar una gran cantidad de estilos y componentes obsoletos. La introducción de una actualización de versión principal nos permitió finalmente deshacernos de algunos códigos heredados. Esto significa que podemos limpiar nuestra base de código y reducir el tamaño de nuestros archivos Vanilla CSS.
En la versión v3.0, se eliminaron casi 20 características, variantes y componentes diferentes de Vanilla. La mayoría de ellos han implementado nuevos equivalentes recomendados en v2.0.
Los más destacados incluirán:
Usted puede Obtenga más información sobre todos los estilos antiguos eliminados de Vanilla 3.0 en nuestra documentación.
Así que lo tenemos, en resumen, Vanilla v3.0.ve a nuestro Documentación empezando desde hoy.aprender acerca Nuevo en vainilla 3.0 o ver Guía de migración.
