Pseudo-classi strutturali su IE via Javascript

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.