Come validare il css di Lightbox 2.0
Lightbox 2 è uno script javascript basato sul framework prototype e sulla libreria scriptaculus, è di semplice utilizzo e permette di ottenere una gradevole presentazione per immagini e gallerie. E’ molto utilizzato in quanto consente una buona personalizzazione attraverso i css, le immagini ed i parametri nel file lightbox.js.
Utilizzando questo script mi sono però accorto che il file lightbox.css riporta un’errore se controllato con il validatore css del w3c. L’errore riportato interessa la proprietà background alla linea 13 del file lightbox.css:
background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
Questa sintassi può apparire sconosciuta ma è in realtà un semplice trucco per far sì che Internet explorer riconosca l’hover del mouse sugli elementi con id #prevLink e #nextLink inserendo un’immagine di background e mostri quindi le immagini prev e next all’hover del mouse.
Un modo semplice per risolvere è creare un’immagine gif trasparente di 1x1px e metterla come sfondo.
background-image: url(image/blank.gif); /* Trick IE into showing hover */
O in alternativa inserire come immagine di background un’immagine che non esiste.
La problematica di questi due sistemi è che dovendo utilizzare javascript il nostro primo pensiero è la velocità di esecuzione e mettere un’immagine di dimensioni irrilevanti o linkare ad un’immagine che non esiste ci porta ad una chiamata al server per far caricare sul browser un’immagine inesistente o irrilevante.
Per questo motivo è stato utilizzato l’algoritmo base64 che permette di convertire in caratteri ascii un file. In questa maniera il file è già presente anche se convertito e va solo “trasformato” e non “richiamato” dal browser.
Esiste comunque una soluzione per mantenere l’algoritmo in base64 e la validazione del css. La conversione in base64 è corretta, il problema è la sintassi dell’url nel css, in particolare del data URI scheme, uno schema uri che permette di inserire oggetti come testo in una pagina web come se fosse un riferimento esterno, la sintassi è appunto:
data:[<MIME-type>][;charset="<encoding>"][;base64],<data>
Per inserirlo correttamente nel css è indispensabile ricordare l’utilizzo degli apici per non generare un errore di validazione. Sarà dunque sufficiente sostituire:
background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
con:
background-image: url(‘data:image/gif;base64,AAAA‘); /* Trick IE into showing hover */
E il css verrà validato.
Faccio presente che ‘data:image/gif;base64,AAAA‘ non restituisce in output un’immagine ma una stringa ed è quindi come impostare un’immagine di background che non esiste o con url errato, il vantaggio reale è che si risparmia una richiesta al server migliorando la performance dello script.
Essendo le tecnologie citate molto specifiche ho preferito utilizzare un gergo meno tecnico per semplificare i concetti di fondo, spero non mi vogliano male coloro che lavorano con queste ogni giorno e hanno competenze molto più specifiche delle mie.
Alla prossima.
links utili:
http://www.lokeshdhakar.com/projects/lightbox2/
http://www.prototypejs.org/
http://script.aculo.us/
http://jigsaw.w3.org/css-validator/
http://it.wikipedia.org/wiki/Base64
http://en.wikipedia.org/wiki/Data_URI_scheme
Add to Google
18 Commenti
Molto interessante! approfondirò
ciao!
Grandissimo! Sei troppo il mio eroe.
Erano mesi che cercavo una soluzione proprio a questo problema, neanche il mio collega sviluppatore c’era arrivato…
Una domanda: può creare problemi con il pulsante di retrocompatibilità di IE8?
Beella!!
Ho testato fino ad ie7 e funziona, su ie8 non ho testato, ma credo funzioni in quanto l’hack si basa sul fatto che l’immagine serve solo a “riempire” l’elemento e a far avvenire l’hover del mouse non è quindi un hack specifico per versione ma più un trucco per come ie interpreta un elemento su cui applicare l’hover. Il pulsante di retrocompatibilità di ie8 per il momento non lo considero, avendo una modalità di rendering diversa da ie8 ma anche da ie7, per il momento tengo buone le cose fatte per ie7 e nei prossimi mesi testerò anche per ie8.
grande, lo sapevo avresti spopolato
hai provato a segnalarlo all’autore?
Ho provato a scrivere una mail ma per ora non ha risposto, attendo fiducioso magari postavo la cosa tradotta nel forum di lightbox in maniera che sia accessibile anche per che gli utenti english…
Sono riuscito a contattare Lokesh Dhakar (lo svilupatore di lightbox), è stato molto gentile e mi ha confermato che integrerà questa modifica nel file lightbox.css al prossimo update che verrà rilasciato a breve con uteriori migliorie.
questo sì che è web 2.0!!
E’ stato davvero molto gentile, ed è bello vedere che l’aderenza agli standard sia di interesse comune. E’ una piccola cosa ma permette di utilizzare lightbox in maniera standard. Anche Lokesh ha detto: “great, its the little things that make the big difference” e sono assolutamente daccordo con lui.
Complimentissimi davvero!
Credo che anche Lokesh ne sia stato davvero contento, grande!
Bravo, complimenti!
Ottimo, ne approfitterò per implementarlo in una gallery che devo creare proprio in questi giorni…
buon weekend!!!
Complimenti davvero! E grazie… perché anche io mi ero imbattuta nel problema e ora conosco la soluzione
L’ho sempre ammirato questo modo di vedere le immagini.. ma mai adoperato.. ci darò un’occhiata
Grazie, sei un grande!!!
ciao a tutti..scusatemi sono nuovo in questo sito..volevo chiedervi una cosa nn so se questo è il contesto giusto..ho provato a scricare ed installare “visuallightbox” solo che quando apro il software e carico le immagini al momento della pubblicazione mi da un’errore..
mi dice..
Access violation at address 4EC17CD7 in module ‘gdplus.dll’.read of address 0000000000.
qualcuno sa dirmi cosa significa e che si puo fare?..grazie..
Ciao Ferdinando, benvenuto! Per problemi tecnici di questo tipo è meglio utilizzare il forum di italian web design, dove si discute di problemi e soluzioni di questo tipo.L’indirizzo è il seguente
http://www.italianwebdesign.it/forum
grazie..per il benvenuto..è un piacere..mi piace tanto questo sito credo che ci verrò spessissimo..:-)..ok ora posto la discussione al link che mi hai dato grazie ancora e ciao..:-)..
Ottimo post, chiaro, dettagliato e soprattutto molto utile