Más y más últimamente he visto a desarrolladores que utilizan trucos para crear estados de conmutación utilizando CSS puro. Esto le permite omitir el JavaScript sin sacrificar la interacción. ¿Como funciona esto? ¿Es una práctica aceptable?
Hoy vamos a examinar dos métodos distintos para utilizar una casilla de verificación para crear un evento de clic que intercambia entre dos imágenes usando buen HTML antiguo y CSS. Terminaremos con una breve discusión sobre la semántica y las ventajas y desventajas de esta técnica.
Como pelar un gato
"Esencialmente creas una casilla de verificación en HTML solo para ocultarlo y robar su funcionalidad".Con cualquier truco de CSS, siempre hay un puñado de formas diferentes para llevar a cabo la tarea que desea lograr. Lo que haremos hoy aquí es aprender cómo utilizar las casillas de verificación para crear dos estados que se pueden alternar entre usar solo HTML y CSS. Dado ese objetivo, podemos encontrar fácilmente al menos dos formas de lograrlo. Incluso dentro de esas dos estrategias principales, encontrará que hay varios caminos que podríamos tomar.
Ambos métodos implican algunos trucos CSS cuestionables. Básicamente, creas una casilla de verificación en HTML solo para ocultarlo y robar su funcionalidad. El primer método simplemente extiende la casilla de verificación al tamaño completo del área que le gustaría hacer clic y no utiliza ninguna etiqueta.
El segundo método hace uso de la interesante funcionalidad de las etiquetas asociadas con una casilla de verificación. Incluso si oculta la casilla de verificación, la etiqueta se puede diseñar, posicionar y hacer clic para activar el interruptor, lo que nos brinda un elemento completamente flexible con el que trabajar que tiene dos estados posibles.
Vamos a profundizar y echar un vistazo más de cerca a cada uno de estos métodos.
Método 1
La primera forma en que vamos a atacar este experimento es haciendo que nuestra casilla de verificación coma todo el tamaño de nuestro objeto y luego lo oculte. Para hacer que esto funcione, todo lo que técnicamente necesita es un div que contenga una casilla de verificación con una clase aplicada. Si desea ir más lejos, puede agregar otros atributos como "nombre". También lanzaremos una imagen para que tengamos algo que cambiar.
Ahora es el momento de realizar el cuestionable acto de convertir nuestra imagen completa en una gran casilla de verificación. Para hacer esto, apunta el? Toggle? clase que configuramos antes y configuramos la misma altura y anchura que hemos estado usando todo el tiempo.
A continuación, establezca la posición en absoluta y restablezca el margen izquierdo, superior, de margen y de relleno, solo para asegurarse de que el punto de inicio sea donde lo queremos. Esto funcionará en conjunto con nuestro posicionamiento relativo anterior para que nuestra casilla de verificación pueda ocupar todo el espacio de la imagen. Para asegurarse de que la casilla de verificación se mantenga por encima de todo, establezca su valor de índice z en algo arbitrariamente alto.
Finalmente, establezca la opacidad de la casilla de verificación en 0 para ocultarlo completamente. Lo interesante aquí es que ocultar la casilla de verificación no desactiva su funcionalidad. Entonces, cuando haga clic en cualquier lugar de la imagen, activará y desactivará la casilla de verificación.
Nuestra casilla de verificación oculta está funcionando, pero aún no lo hemos configurado para hacer nada. Como mencioné anteriormente, queremos cambiar la opacidad de la imagen HTML, por lo que podemos configurar un selector que seleccione cualquier entrada con la tecla? Toggle? clase que está marcada, luego use el selector de hermanos para apuntar a la imagen y establecer su opacidad a cero. Para hacer que el efecto sea un poco más agradable, mezcle en una transición simple.
Pruébalo
Con eso, el método uno está todo terminado. Debajo podrá ver un enlace a la página de CodePen. ¡Échale un vistazo y luego vuelve aquí para el resto!
Manifestación: Haga clic aquí para verlo en CodePen.
Método 2
Con el primer método fuera del camino, es hora de explorar el método # 2, que implica el uso de una etiqueta de casilla de verificación. Esto se agrega directamente antes de la entrada. Tenga en cuenta que el? Para? valor coincide con el ID de la casilla de verificación. También incluiremos ambas imágenes en nuestro HTML para que cambien las cosas.
CSS
Una vez más, comenzaremos agregando algunos estilos básicos al div. No hay nada realmente especial aquí, solo algunas dimensiones y posicionamiento.
Ahora por algo nuevo.Recuerde que este método implica utilizar la etiqueta de casilla de verificación en lugar de la casilla de verificación en sí. Para hacer esto, configura la pantalla para bloquear y dale algunas dimensiones. Incluimos el texto? Click Me? en el código HTML anterior, así que tendremos que darle un estilo a eso también. Básicamente, solo estamos transformando la etiqueta para darle el aspecto de un botón.
Sobre la marcha, cambié los colores y agregué el cursor del puntero para promover la idea de que es un elemento cliqueable.
Ahora es el momento de ocultar la casilla de verificación de nuevo, pero vamos a hacerlo de manera un poco diferente, solo para mostrarle que podemos hacerlo. Al asignar el posicionamiento absoluto y algunos valores de posicionamiento locos, disparamos la casilla de verificación real fuera de la vista. Recuerde, esto funciona porque todavía podemos hacer clic en el elemento de la etiqueta para sacar la palanca.
Para terminar esta versión, necesitamos tres bloques de estilo más. La primera posiciona la segunda imagen directamente debajo de la primera imagen. Desde aquí, estamos usando el mismo código que hicimos la última vez para cambiar la opacidad en la alternancia y agregar una transición agradable.
Pruébalo
Hemos terminado el segundo método ahora, pruébelo a continuación haciendo clic en el enlace.
Manifestación: Haga clic aquí para verlo en CodePen.
¿No es el trabajo de este JavaScript?
Sin lugar a dudas, esto es algo divertido. Con solo un poquito de CSS y HTML, pudimos crear un pequeño evento de clic. Los beneficios aquí son claros: código breve, sin JavaScript, facilidad de implementación, etc.
Desafortunadamente, los dos métodos que analizamos son bastante tabú en algunos círculos. Esto se debe a que ambos son realmente una bastardización del elemento de casilla de verificación. Realmente no estamos usando el elemento? Semánticamente? es decir, la forma en que estaba destinado a ser utilizado, en lugar de eso, simplemente estamos robando su funcionalidad y envolviéndola alrededor de otros objetos.
Entonces, ¿qué tan grave es esta ofensa? Depende de con quién hables. Un programador de la vieja escuela te dirá que esta es una mala noticia. ¡Usa el maniquí de JavaScript, para eso es! A pesar de esto, muchos de los tutoriales sobre CSS más impresionantes publicados recientemente utilizan trucos similares a este (una variante usa botones de opción), aunque lo hacen sin explicarlo en profundidad. Algunos de estos son tan impresionantes, que simplemente no puedes resistirte a lanzar semánticas al viento y pasar lo que antes, aunque solo era posible, con CSS.
Con este artículo traté de explicar cómo funciona esta técnica en un nivel básico y señalar que, al menos, se considera controversial.
¿Debo usar esto más a menudo?
Escribo tutoriales CSS para ganarme la vida. Todos los días trato de pensar en grandes cosas que puedo enseñarte. Métodos como estos presentan un dilema interesante. Abren grandes posibilidades para hacer increíbles demostraciones de CSS puro. Sin embargo, algunos podrían considerarlo una pérdida de tiempo dada la aplicación semántica cuestionable.
Aquí te lo devuelvo a ti, los lectores de Design Shack. ¿Qué piensas? ¿Debo mostrarte cosas geniales, incluso si hacen algunos sacrificios semánticos? ¿Desea ver más demostraciones geniales creadas con los dos métodos descritos en este artículo? ¿Cómo podrías mejorar este truco? Me encantaría escuchar tus pensamientos!