La torta sin JavaScript: ¿puede la CSS ser suficiente? 🚀
¡Empecemos con un salto audaz!\n\nCuando Juan Diego Rodríguez propuso hacer un gráfico de pastel con solo CSS, la comunidad de front‑end chilló. ¿Un pastel sin JavaScript? Eso suena a fantasía, pero también a un reto de
Artículo
Una lectura sobre tecnología y sistemas digitales, escrita para ir al punto y dejar claras las ideas principales.
Tema principal
arquitectura de software
Fuente
dev.to
Puntos clave
- ¡Empecemos con un salto audaz!\n\nCuando Juan Diego Rodríguez propuso hacer un gráfico de pastel con solo CSS, la comunidad de front‑end chilló. ¿Un pastel sin JavaScript? Eso suena a fantasía, pero también a un reto de
- CSS no permite que un elemento conozca el estado de sus hermanos; la lógica quedó en manos de JavaScript.
- La accesibilidad requiere que los lectores de pantalla entiendan los valores, imposible sin datos renombrados.\n\nInsight clave\nAl mover todos los porcentajes al padre (`ul`) y usar variables CSS indexadas, la entrega p
- Acumulación: `--accum-1` a `--accum-4` calculados con `calc()` y asignados a cada hijo mediante `:nth-child()`.
Desarrollo
¡Empecemos con un salto audaz!\n\nCuando Juan Diego Rodríguez propuso hacer un gráfico de pastel con solo CSS, la comunidad de front‑end chilló. ¿Un pastel sin JavaScript? Eso suena a fantasía, pero también a un reto de accesibilidad y semántica.\n\nEl problema\n- Los slices dependen unos de otros: cada porción necesita conocer la suma previa para situarse correctamente. - CSS no permite que un elemento conozca el estado de sus hermanos; la lógica quedó en manos de JavaScript. - La accesibilidad requiere que los lectores de pantalla entiendan los valores, imposible sin datos renombrados.\n\nInsight clave\nAl mover todos los porcentajes al padre (`ul`) y usar variables CSS indexadas, la entrega pasa de ser imperativa a declarativa. Así, cada `li` solo necesita leer su índice y aplicar las reglas de acumulación, sin que JavaScript haga ninguna iteración.\n\nImplementación escaneable\n- Var