Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Mira mamá sin JavaScript

Mira mamá sin JavaScript 01.FEB.17

Alvaro José Rios Ch
Fundador WebBizarro

Bueno la verdad es que suena muy bonito crear componentes como galerías de imágenes o modales solo con CSS pero la verdad es que no son más que pruebas de concepto, son posibles claro pero no recomendadas ya que pueden causar problemas de navegación entre otras cosas y en términos generales son mas difíciles de mantener.

Sin embargo es posible usando algunos trucos de CSS y el comportamiento de los navegadores hacer cosas interesantes con el CSS y hemos encontrado una página en github donde puedes encontrar muchos ejemplos interesantes sobre componentes de interfaz de usuario hechos con CSS.

El concepto básico es usar anclas o radio buttons para detectar las acciones y por medio de propiedades CSS como el active se puede hacer que ocurran eventos en la pantalla. El problema con todo esto es que no podemos controlar algunos aspectos como ejecutar acciones después de estos eventos y el código es bastante intrincado para hacer algo simple.

Por ejemplo podemos ver el siguiente bloque de código html

<div class="carousel">
    <div class="carousel-inner">    
        <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">    
        <div class="carousel-item">
            <img src="http://fakeimg.pl/2000x800/0079D8/fff/?text=Without">
        </div>
        <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="http://fakeimg.pl/2000x800/DA5930/fff/?text=JavaScript">
        </div>
        <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="http://fakeimg.pl/2000x800/F90/fff/?text=Carousel">    
        </div>
        <label for="carousel-3" class="carousel-control prev control-1">‹</label>
        <label for="carousel-2" class="carousel-control next control-1">›</label>
        <label for="carousel-1" class="carousel-control prev control-2">‹</label>    
        <label for="carousel-3" class="carousel-control next control-2">›</label>
        <label for="carousel-2" class="carousel-control prev control-3">‹</label>
        <label for="carousel-1" class="carousel-control next control-3">›</label>
        <ol class="carousel-indicators">
            <li>
                <label for="carousel-1" class="carousel-bullet">•</label>
            </li>    
            <li>            
                <label for="carousel-2" class="carousel-bullet">•</label>    
            </li>    
            <li>
                <label for="carousel-3" class="carousel-bullet">•</label>    
            </li>
        </ol>
    </div>
</div>

Como pueden ver tenemos 3 inputs de tipo radio seguidos de un div que contiene una imagen, estos son los que determinaran que imagen está activa en el carrusel y luego están 9 label ( 3 para cada input ) que son los controles que mueven la imagen a izquierda y derecha. Si quieren ver el código completo les dejo el link a continuación pero voy a explicar lo más relevante.

Cuando haces clic sobre la etiqueta de un input de tipo radio este se marca como seleccionado (checked) esto es importante ya que es lo que permite cambiar la imagen. El div que contiene cada imagen es de clase carousel-item y está justo después del input lo que nos permite hacer lo siguiente con el CSS.

.carousel-open:checked + .carousel-item {
    position: static;
    opacity: 100;
}

El + es un indicador de adyacencia lo que indica que asignará el estilo al elemento de clase carousel-item que esté justo después del input de clase carousel-open que esté en estado checked, por eso decía que era importante la posición.

Algo similar se hace con los controles pero usando un selector diferente, el simbolo ~ se usa para determinar adjacencia también es decir para seleccionar todos los elementos de clase control-1 que están precedidos por un elemento con id carousel-1 que esté seleccionado, como pueden ver es similar al + solo que este útlimo solo selecciona un elemento no todos.

#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
    display: block;
}

Bueno aquí la cosa se complica un poco más cuando se selecciona la imagen 1 se muestran los controles para la imagen 3 y 2 que son los que tienen la clase control-1.

<label for="carousel-3" class="carousel-control prev control-1">‹</label>
<label for="carousel-2" class="carousel-control next control-1">›</label>

Lo mismo debe hacerse por cada imagen, por defecto los elementos con la clase carousel-control tienen la propiedad display en none por lo que no podemos verlos a menos que se seleccione el input correspondiente.

Como ven es algo bastante complicado para hacer una cosas que es mucho más simple con JavaScript pero nunca se sabe puede que un día conocer todos los conceptos que hacen estos componentes posibles te sea muy útil por lo que vale la pena darles un vistazo.