Pseudo-classe dinamica :active

Di cosa stiamo parlando Come recitano le specifiche del W3c la pseudoclasse active si applica mentre un elemento viene attivato […]
Pseudo-classe dinamica :active

Di cosa stiamo parlando

Come recitano le specifiche del W3c la pseudoclasse active si applica mentre un elemento viene attivato dall’utente. Per esempio, nell’arco temporale in cui l’utente preme il pulsante del mouse e lo rilascia.

Un pò di teoria

Sebbene le pseudoclassi dinamiche in generale possano essere associate a qualsiasi tipo di elemento, come un paragrafo o un input, IE6 le supporta solo quando applicate ai collegamenti. Affinchè tutto funzioni correttamente, è necessario che la pseudo classe :active venga definita dopo :hover per avere effetto sugli elementi. Esattamente in questo ordine:

  1. :link
  2. :visited
  3. :focus
  4. :hover
  5. :active

Il motivo è molto semplice e viene ricondotto al concetto di specificità e di organizzazione a cascata di cui abbiamo già discusso in un precedente articolo. Rileggi con me la parte che ci interessa:

“Le regole che gestiscono l’organizzazione a cascata sono abbastanza semplici: l’interprete prende in considerazione tutti i selettori comuni ad un determinato elemento. Vengono quindi controllate tutte le dichiarazioni comuni in base al loro peso; le regole marcate come !important avranno un peso maggiore. Se per uno stesso elemento abbiamo dichiarazioni in conflitto ma tutte hanno lo steso peso, si valuta la specificità delle stesse scartando quelle che hanno una specificità minore. Infine se due o piu regole relative ad uno stesso elemento hanno lo stesso peso e specificità, si prende in considerazione l’ordine con cui vengono elencate. Quella che viene dopo prevale sempre (a parità di condizioni ovviamente).”

Sappiamo, dal calcolo della specificità di ognuno di loro, che il loro valore è uguale per tutti (0,0,0,1). Dal momento che hanno tutti lo stesso peso, origine e specificità, l’ultimo è quello che prevarrà sugli altri. La selezione per ordine è quindi la ragione per cui le pseudoclassi andrebbero elencate secondo l’ordine LVHA, ordine che è stato consigliato anche nelle specifiche del W3C come quello da adottare. Inoltre l’espressione inglese LoVe-HA! ha riscosso un grande successo come metodo per ricordarsi il corretto ordine di scrittura di tali pseudoclassi. 🙂

Applicazioni pratiche

Le applicazioni pratiche possono essere molteplici. Dal semplice cambio di colore, ad effetti un pò più ricercati come l’elminiazione dello shadow o dello spostamento verso il basso e il cambio di un gradiente per simulare la pressione. Di seguito vi propongo un esempio pratico di come potrebbe tornarci utile lo stato :active inserito nel contesto più globale delle pseudoclassi.

<a class="link" href="#">Sono un Link!</a>
a.link:link,a.link:visited{
    display:inline-block;
    font-size: 16px;
    font-family:arial;
    line-height: 34px;
    padding: 0 7px 0 7px;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 white;
    border: 1px solid #ddd;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 -1px 1px #FFFFFF inset,0 0 3px #333;
    color:#333;
    background: -moz-linear-gradient(top,  #fbfbfb 0%, #e5e5e3 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#e5e5e3)); 
    background: -webkit-linear-gradient(top,  #fbfbfb 0%,#e5e5e3 100%);
    background: -o-linear-gradient(top,  #fbfbfb 0%,#e5e5e3 100%); 
    background: -ms-linear-gradient(top,  #fbfbfb 0%,#e5e5e3 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#e5e5e3',GradientType=0 ); 
    background: linear-gradient(top,#fbfbfb 0%,#e5e5e3 100%); 
}
a.link:hover{
    box-shadow: 0 1px 1px #FFFFFF inset,0 0 3px #333;
    background: -moz-linear-gradient(top,  #e5e5e3 0%, #fbfbfb 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e3), color-stop(100%,#fbfbfb)); 
    background: -webkit-linear-gradient(top,  #e5e5e3 0%,#fbfbfb 100%);
    background: -o-linear-gradient(top,  #e5e5e3 0%,#fbfbfb 100%); 
    background: -ms-linear-gradient(top,  #e5e5e3 0%,#fbfbfb 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e3', endColorstr='#fbfbfb',GradientType=0 ); 
    background: linear-gradient(top,#e5e5e3 0%,#fbfbfb 100%); 
}
a.link:active{
    position:relative;
    top:1px;
    box-shadow: 0 1px 1px #FFFFFF inset,0 0 1px #333;
}

Provalo subito

Prova la demo Consulta il codice
  • Fabio

    Ciao Stefano, volevo farti una domanda su un problema che ho su un menù tab… in pratica ho una pagina con diversi tab ogni tab richiama un fieldset, ora vorrei che quando clicco su un tab questo mi cambi di colore e rimanga tale finchè non premo nuovamente un altro tab hp provato, giustamente, con le pseudoclassi active e anche focus ma nulla puoi darmi qualche dritta al riguardo? Grazie
    Fabio

    • Ciao Fabio. Con il solo codice css non è possibile fare quello che chiedi, serve per forza un aiutino da parte di javascript o php.

      Se al click dei vari tab, i fieldset che vai a richiamare vengono gestiti tramite una modifica dinamica del DOM (viene quindi gestito tutto all’interno di un unica pagina senza il refresh della stessa), allora puoi agganciarti all’evento onClick del tab (cliccato) per accodare, via javascript una classe che ti renda permanenti determinate modifiche CSS. Ad ogni click accodi od elimini quella classe. Il meccanismo è molto semplice. Contemporaneamente alla comparsa del fieldset richiesto, aggiungi una classe al tab che hai appena cliccato. All’interno del CSS valorizzi quella classe con le proprietà che ti servono.

      Caso diverso invece nel caso in cui la pagina subisce un refresh ad ogni click. In quel caso javascript non ti è di aiuto. Bisogna intervenire via PHP, cliccando le varie voci di menu e iniettando dinamicamente la classe dove serve.

      Dimmi un po in che caso ti trovi per capire meglio la tua situazione… 😉

  • Pingback: IE7 CSS: selettori per Internet Explorer 7 e versioni successive | upCreative()

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github