E’ il momento di sperimentare nuove proprietà dei fogli di stile.
I selettori adiacenti sono una funzionalità dei CSS spesso ignorata, ma dalle grandi potenzialità. Con una semplice dichiarazione infatti è possibile identificare l’elemento immediatamente vicino (quindi adiacente) ad un altro. Ad esempio con
div + p {
color: #a00;
}
è possibile assegnare delle proprietà al primo paragrafo contenuto in un div, paragrafo che in questo caso diventerà rosso.
Niente classi o id, è possibile gestire tutto tramite CSS senza bisogno di appesantire il codice HTML. L’altra buona notizia è che questo tipo di selettore funziona su tutti i principali browser, escluso ovviamente Internet Explorer 6. Firefox, Explorer 7, Safari, Opera e Chrome la supportano senza problemi.
E’ tempo quindi di sperimentare ed iniziare ad utilizzarli, anche come progressive enhancement, per offrire ai visitatori con un browser recente una migliore esperienza di navigazione.
Se volete vedere un esempio pratico, ho fatto il mio primo esperimento con i selettori adiacenti nel footer di TomStardust Diary:
Questo post è nato da una discussione su Friendfeed: una chiara dimostrazione dell’utilità dei social networks. C’è ancora qualcuno che ne dubita?
Ottimo articolo, è giusto prepararsi al post internete explorer 6. I selettori adiacenti sono molto comodi, l’unica cosa a cui bisogna prestare attenzione è che basandosi sui selettori di tipo la priorità delle regole scritte in questo modo sono molto simili (per esempio: #miodiv + p = 101 #miodiv + p + p = 102) e necessitano di maggiore attenzione nella composizione del foglio di stile per non essere sovrascritte.
interessante e utile parlare di queste proprietà, purtroppo almeno per quanto mi riguarda non riesco proprio a sperimentarle perchè ogni volta il cliente testa il sito con ie6 e non c’è verso di far aggiornare il suo browser poichè… la maggior parte degli utenti continua ad usarlo!!
Ie 6 lo usano ancora???
@Laura: penso che in certi casi sia necessario guardare oltre il singolo cliente. Se chi ti ha commissionato un lavoro usa IE6 e per qualsiasi motivo non può/vuole cambiarlo, niente ti vieta di offrire qualcosa in più ai visitatori che hanno già fatto il passaggio verso browser più evoluti.
Ovviamente sono da considerare anche i costi di sviluppo, modifiche da poco come questa si possono fare, ma in caso di miglioramenti più consistenti non sempre ne vale la pena.
La conoscevo questa tecnica, ma non credo di averla mai usata, e comunque non sapevo si potessero usare più elementi a catena (come ho scoperto dal codice del tuo footer ;).
Ultimamente, quando sento IE 6, m’innervosisco sempre di più. C’è l’ingegnere che fa le applicazioni che generano i miei layout che vive nella presunzione d’una superiorità di IE 6, modificandomi tutto il lavoro con standard obsoleti.
La tecnica, comunque, è utilissima, ma al momento mi dà down il tuo Diary.
Un giorno dedicherai un post ai datori-di-lavoro-con-gusti-di-merda-che-rendono-impossibile-creare-un-portoflio-decente? Io sono frustratissimo.
Ma che differenza c’è tra “div + p” e “div p” ?
@Ted: hai ragione, il mio blog personale sembra avere qualche problema, magari riprova tra un pò, vedrò di risolvere al più presto.
@Andrew: con “div p” selezioni qualsiasi paragrafo contenuto nel div, con “div + p” selezioni solo il primo paragrafo, e deve essere vicino al div, senza altri elementi in mezzo.
escluso ovviamente Internet Explorer 6 –> non avevamo dubbi!!
A parte questo mi pare che i selettori in generale hanno un enorme potenziale, e questa chicca che ci proponi oggi è solo una delle grandi cose che si possono fare. Non vedo l’ora di utilizzarla sui prossimi siti in sviluppo :)
La sto utilizzando nella nuova versione del mio sito. Man mano che si utilizzano i CSS e grazie proprio al concetto che sta alla base degli stessi (e dell’xhtml) quindi la struttura ad albero, ci si rende conto di quanto si può realmente fare, comodamente (se non per il solito discorso di escogitare trucchetti per ottenere risultati simili con browser ormai “antichi”) e semplicemente. I selettori poi sono straordinari! Sia quello da te citato (adiacente) sia ad esempio quello del figlio (div > p) ovviamente non supportato da ie6! Mi viene in mente il selettore dell’attributo e non credo di averlo usato se non in xml, grandi potenzialità magari con elementi di form e simili!
Bella tecnica!
Non la conoscevo (considerando che sono stato autodidatta fin’ora col css)…l’ho subito provata e mi piace!
Mi piace il tuo blog… messo nei feed!