Tab con solo i CSS
Lunedì 17 Settembre 2007 - 10:16
di Alessandro Fulciniti
Devo ammetterlo: appena ho visto l’esempio di CSS only DOM-tabs mi sono chiesto: dov’è il Javascript? dove sta il trucco?
In reltà la tecnica è semplice, oltre ad essere perfettamente accessibile e cross-browser. In sostanza si tratta di giocare sull’altezza delle varie sezioni e sulla proprietà overflow. Merita davvero una lettura, anche perché è un uso dei CSS creativo ed efficace.
Commenti
1
Direi geniale, può essere molto utile per chi (come me) detesta ricorrere ai js.
Grazie per la segnalazione!# - postato da crea-tivo livorno - 17 Settembre 2007 - 11:01
2
Interessante lo è senz’altro ma ci sarebbe da fare qualche prova non impostando un’altezza al div class=”content” in quanto nn sappiamo a priori quanto testo verrà inserito. bello davvero.
3
@floyd
non ci sono prove da fare, lo ammette anche l’autore che l’altezza fissa è un limite di questa soluzione: infatti questo trick è basato sulla proprietà overflow, che senza una data misura non si attiva.
Leggendo le conclusioni questo è utilissimo per implementare una “graceful degradation” in un sistema a tab (come fa lui nel sito della sua web agency)# - postato da Xscratch - 17 Settembre 2007 - 11:28
4
Con Opera 9 non mi pare che funzioni…
# - postato da Yan - 17 Settembre 2007 - 11:32
5
A me con Firefox cambia solo il colore del testo quando ci passo sopra con il mouse e quando clicco il testo diventa in grassetto.
6
Confermo, con Opera 9 non va… peccato :-(
Su Firefox invece va bene.# - postato da Alessandro Fulciniti - 17 Settembre 2007 - 11:53
7
ma solo a me funziona bene solo con ie7? con opera e ff non mi funziona, o meglio: con opera non funziona per niente e si impagina male, mentre con ff funziona ma si impagina male.
Solo a me?
# - postato da smal - 17 Settembre 2007 - 11:54
8
Adesso mi funziona sia con Firefox che con Internet Explorer.
9
NOn funziona con Opera (8 e 9) e con FF si impagina male.
Magari si tratta solo di metterci mano# - postato da lordmax - 17 Settembre 2007 - 14:24
10
non voglio rompere le uova nel paniere però è vero che è solo con i css però è anche vero che non è il massimo… anzi…
11
Davvero interessante :)
A me funziona perfettamente su Firefox, IE 5.5, IE 6,IE 7, ma, appunto, non con Opera…
Cmq la nuova versione di Opera supporterà la pseudoclasse :target e quindi, con qualche piccolo ritocchino, dovrebbe funzionare.
12
Semplice ma geniale, purtroppo non lo vedo bene con firefox.
13
Io lo sto implementando in una bozza da presentare ad un possibile cliente.
Per la compatibilità con Opera utilizzerò javascript.
# - postato da Salvatore Pecoraro - 22 Settembre 2007 - 13:42