Pseudo-classi strutturali su IE via Javascript
Martedì 19 Gennaio 2010 - 08:24
di Cesare Lamanna
Nel contesto del modulo CSS3 dedicato ai selettori, un’intera sezione è dedicata alle cosiddette pseudo-classi strutturali. Per l’esattezza, si tratta dei seguenti selettori: :nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type, :first-child, :last-child, :only-child, :first-of-type, :last-of-type, :only-of-type, :empty.
Le cose che ci si possono fare sono tante e interessanti. Si ha bisogno di selezionare un elemento che non ha elementi figli? Usiamo empty. Vogliamo selezionare l’ultimo elemento figlio di un altro elemento? Ecco pronto last-child. Per sapere se il browser che usate li supporta, è sufficiente una visita al pagina con il test per i selettori di CSS3.info oppure dare un’occhiata alla preziosa tabella di PPK.
Da quest’ultima si ricava come il buco nero nel supporto sia rappresentato da Internet Explorer (anche se a dire il vero l’implementazione non è in certi casi perfetta nemmeno sui browser basati su WebKit).
Chi volesse sfruttare la potenza di questi selettori in maniera cross-browser, senza cioè tagliare fuori IE, non può che rivolgersi a Javascript. Un selector engine come Sizzle, ad esempio, supporta praticamente tutti i selettori CCS3.
In questi giorni ha visto la luce un altro progetto, curato da Keith Clark. Si chiama IE-CSS3.js. Il focus della libreria (che si appoggia a DOMAssistant) è per l’appunto concentrato sulle pseudo-classi strutturali cui si accennava all’inizio del post.
Un ottimo tutorial sull’uso della libreria lo trovate in questo post di Andy Clark. Credo che dall’analisi del codice sarà facile capire per chi lavora con queste cose se l’approccio sia più o meno conveniente (o confacente alle proprie abitudini) rispetto all’uso di strumenti come Sizzle o i framework Javascript. Per dirne una, nell’articolo Cleaner Code with CSS3 Selectors apparso su 24Ways e che esamina un paio di questi selettori, per i browser che non li supportano si utilizza come alternativa jQuery.
Categoria: CSS, Scripting | Permalink
Commenti
1
Penso che il problema maggiore sia dovuto al fatto che Internet Explorer, oltre a peccare con i CSS, non sia una scheggia ad eseguire JavaScript.
Non sarebbe meglio usare codice che si degradi? Un esempio (che non c’entra molto con i selettori) potrebbe essere quello dei bordi arrotondati. Chi li supporta li vede, gli altri no.
2
Certo, i bordi arrotondati e la maggior parte delle regole CSS puoi anche farle degradare, ma con i selettori come fai?
Siamo ancora obbligati a usare classi come “first” e “last” per far capire ad Explorer a quali elementi ci riferiamo…
3
Però cose come
:nth-last-of-type
sinceramente dubito davvero di utilizzarle, piuttosto preferisco strutturare bene l’HTML ed utilizzare classi ed altri selettori…
# - postato da davide - 19 Gennaio 2010 - 12:19
4
@davide…
invece io credo che proprio la possbilità di selezionare l’ultimo-elemento-prima-di-quello-che-contiene-un-figlio ecc. permetta di guarire dalla “divite” acuta che impone di strutturare a scatole cinesi l’html…sempre parlando di impaginazioni complesse…
5
mi sembra un po’ eccessivo tutto questo armamentario solo per avere questi selettori… DomAssistant + IE-CSS3.js = circa 27 Kb.
in più ha molte limitazioni (per esempio non funziona se cambi il DOM dinamicamente), e per di più si scarica i file CSS usando XMLHttpRequest, perchè il download di default omette gli stili che il browser non comprende
6
[…] selettori CSS3 per IE in javascript >> […]
# - postato da accodion menu jQuery, Tooltip fisso con Ajax, sliding form, CSS3 con javascript per IE | lo stanzino di EngiMedia - 26 Gennaio 2010 - 01:35
7
[…] Take a look about Cesare Lemanna article on html.it […]
# - postato da ie-css3.js CSS3 Pseudo Selectors With IE | Beat Fly Blog - 02 Febbraio 2010 - 09:02