El CSS es un lenguaje que permite crear páginas web atractivas, lanzado en 1996 y que hoy en día sigue evolucionando gracias a Google, Firefox y Apple entre otros. Y una de las novedades son los Toggles, un mecanismo para asociar el estado conmutable de un elemento del DOM, algo similar a un interruptor de la luz, encendido / apagado.
Los Toggles ‘conmutadores’ de CSS cambian el estado y se pueden definir y conectar a través de las propiedades de CSS y se puede consultar también desde CSS. Esto proporciona un mecanismo para especificar el estado que describe comportamientos del HTML.
Estos días, Google Chrome está en fase de prototipo con la idea de verificar y pulir la sintaxis, pero aunque todavía es algo experimental y está sujeto a cambios, la propuesta promete, permitiendo derivar mucho trabajo al CSS en lugar de escribir estos conmutadores en Javascript.
Veamos los ejemplos:
Y este sería el resultado, en esta demostración usamos un Javascript para simular el funcionamiento, ya que actualmente no está disponible, recuerda que por el momento es solo experimental.
See the Pen CSS Toggles by Sergop (@itdo) on CodePen.
Aunque hay mucho más en la especificación:
- Un toggle puede tener más de 1 estado activo, por lo que no es solo 0 y 1
- Los estados no necesitan ser números, pero también pueden ser string.
- El estado de alternancia inicial es 0 de forma predeterminada, pero puedes anularlo
- Un elemento puede ser tanto el “toggle-root” como “toggle-trigger”. En este caso, utiliza “toggle” como propiedad CSS.
- “toggle-visibility” permite mostrar/ocultar un elemento en función de un valor.
- Los toggles se pueden agrupar mediante “toggle-group”. Útil para interfaces de pestañas, donde solo 1 pestaña puede estar activa al mismo tiempo.
- Los botones fijos no pueden volverse inactivos, siempre habrá un elemento activo-
Conclusión
CSS sigue evolucionando con funcionalidades como los toggles. Te invito a revisar la web de Tab Atkins & Miriam Suzanne con sus demostraciones para hacerte una idea de las múltiples capacidades que tendrá el CSS sin necesidad de Javascript.
Photo by Good Free Photos on Unsplash
Referencias:
