Pseudoclase Css :active persistente usando Transition-delay

Usando un valor lo suficientemente alto en la propiedad transition-delay para evitar lo efímero de la pseudoclases Css :active

Pseudoclase Css :active persistente usando Transition-delay

Por Kseso ✎ 2
Pseudoclase Css :active persistente usando Transition-delay

Créditos: Realización original de Joel Besada publicada en su blog

Una de las características inherentes a las pseudoclases de css (:link, :visited, :hover, :active) es que su efecto es efímero. Los estilos asociados no son permanentes.

Hasta el momento, cuando se deseaba tener esa permanencia se recurría a los pseudoselectores ::checked o ::target.
Sin embargo, Joel Besada ha dado con una ingeniosa solución para que el :visited se mantenga "indefinidamente" recurriendo al delay de las transiciones Css3.

Mira y prueba su ejemplo:

Este texto sólo mantiene el color mientras permanece pulsado el button.

Este texto conserva el color incluso una vez abandonado el button.

Los códigos:

Marcado html

<button class="red button">Rojo</button> <button class="green button">Verde</button> <button class="blue button">Azul</button> <p>Este texto sólo mantiene el color mientras permanece pulsado el button.</p> <p class="perm">Este texto conserva el color incluso una vez abandonado el button.</p>

Sencillo. Tres botones para las pruebas y dos párrafos para que veas cómo el primero pierde y el segundo lo mantiene per secula seculorum. Bueno, exactamente durante 9.999.999s. Si piensas permanecer con esta ventana abierta más tiempo, avisa para aumentarlo xD

El Css asociado

/* El valor alto de delay evita que se pierda el color */ p.perm {transition: color 0s 9999999s;} /*Al presionar el botón, se reescribe la propiedad transition para quitar el delay, así cambia de color instantánemente */ .red:active ~ p.perm, .green:active ~ p.perm, .blue:active ~ p.perm { transition: color 0s;} .red:active ~ p {color: red;} .green:active ~ p {color: green;} .blue:active ~ p {color: blue;}

Eso es todo. Aplicamos un valor "cuasi infinito" en la transición Css para lograr la persistencia de las propiedades al elemento.
Por supuesto, sólamente funcionará con aquellas propiedades válidas para las transition css.
Nota que en este caso el empleo del selector de hermanos (~ /virgulilla/) es para aplicarlas no al propio elemento sino a un tercero

Conclusión

Ingeniosa forma de resolver la cuestión. Sencilla pero con un gran potencial para lograr ciertos efectos.
Mira la gameboy color, obra del propio "descubridor" y mueve al abuelete.

Artículo publicado originalmente el 20 de Marzo de 2012

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 2

  1. He estado haciendo pruebas con este sistema aplicándolo a la siguiente situación:
    La idea es que sea el propio botón el que cambia de color y lo mantenga, o sea, replicando al típico menu que al clicar se mantiene fijo el cambio de estilo para mostrar en donde se está. La idea es para utilizarlo en una página en la que el menu te redirecciona a otra parte de la misma página, y como es muy larga en cada apartado se replica el menu para facilitar la navegación por dicha página. Así pues, no sólo deseo que se mantenga el cambio en el botón que he clickado sino también en sus clones (los que se replican a lo largo de la página, o por lo menos el de la sección a la que se ha ido al clickar. No se si me he explicado bien.
    Después de varios intentos y pruebas, a base de buttons, a, etc, no consigo lo esperado. No se si es que no lo hago bien o es que no se puede.

    ResponderEliminar
  2. Hola Alejandro
    Como habrás visto en el ejemplo, esta técnica necesita dos premisas para funcionar:
    .- que haya dos elementos por lo menos: uno recibe la acción, en este caso el :active y el otro cambia un valor.
    .- Y los elementos tienen que ser hermanos. O más específico: el que recibe la acción tiene que ser hermano del contenedor padre o del ancestro del que cambia. Ya ves que usa el selector de hermano ~

    <-- PSEUDO HTML -->
    <botón1/> <botón2/> <botón 3/>
    <Abuelo1>
    <padre1>
    <nieto1/>
    </padre1>
    <Abuelo1/>

    /*** PSEUDO CSS ***/
    botón1:active ~ padre1 nieto1 { declaraciones }


    Para poder sugerirte algo más concreto y ajustado a tu caso se necesitaría ver tu marcado Html. Si puedes crea un ejemplo de tu esquema en jsfiddle (o similares) y pasa el enlace.

    También puedes ver si te resulta mejor la técnica del :checked

    Un saludo

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap