Con cada nueva versión de CSS, las posibilidades aumentan. Para quienes trabajamos con Drupal, aprovechar estas herramientas es clave para mantener la competitividad y ofrecer experiencias de usuario modernas. En este post, exploraremos algunas de las propiedades más recientes de CSS, cómo implementarlas en tus proyectos y qué navegadores las soportan.
1. aspect-ratio: Control preciso de proporciones
Esta propiedad permite definir la proporción de aspecto (alto y ancho) de un elemento sin tener que recurrir a trucos con padding o imágenes de tamaño fijo. Es ideal para manejar imágenes y videos, asegurando que mantengan sus proporciones en bloques y layouts responsivos.
Soporte en navegadores:
- Chrome: 88+
- Edge: 88+
- Firefox: 89+
- Safari: 15+
2. container queries: Adaptación del contenido al contenedor
Esta propiedad permite aplicar estilos CSS basados en el tamaño del contenedor, en lugar del tamaño de la ventana del navegador. Esto es especialmente útil cuando se trabajan con componentes reutilizables en Drupal que necesitan adaptarse a diferentes contextos y layouts.
Soporte en navegadores:
- Chrome: 105+
- Edge: 105+
- Firefox: 109+
- Safari: 16+
3. clamp(): Control dinámico del tamaño
clamp() establece valores dinámicos dentro de un rango definido. Es ideal para hacer que tipografías y otros elementos de diseño sean fluidos y se adapten según el tamaño de la pantalla sin necesidad de utilizar media queries.
Soporte en navegadores:
- Chrome: 79+
- Edge: 79+
- Firefox: 75+
- Safari: 13.4+
4. accent-color: Personalización de elementos interactivos
Esta propiedad permite cambiar el color de los elementos interactivos del formulario, como checkboxes y radios, para adaptarlos al estilo visual de tu sitio. Facilita la coherencia del diseño en formularios en Drupal.
Soporte en navegadores:
- Chrome: 93+
- Edge: 93+
- Firefox: 92+
- Safari: 15.4+
5. subgrid: Mejora la alineación en layouts complejos
subgrid permite que los elementos hijos hereden las filas o columnas del grid padre, mejorando la alineación de elementos internos en diseños complejos sin tener que redefinir estructuras adicionales.
Soporte en navegadores:
- Chrome: 117+
- Edge: 117+
- Firefox: 71+
- Safari: 16+
