Conditionizr: caricare CSS e JS per browser e risoluzione specifici

Pubblicato il

Come caricare JavaScript e fogli di stile in maniera dinamica usando un semplice plugin per jQuery per ottimizzare la velocità di caricamento delle pagine.

Plugin jQuery Conditionizr
Conditionizr: ottimizzare il caricamento di JS e CSS

Conditionizr è un nuovo plugin jQuery sviluppato per gestire il caricamento dei fogli di stile e dei JavaScript in base al browser usato ed in base alla presenza della risoluzione «retina» dei display, ovvero la nuova risoluzione di monitor ad alta densità di pixel introdotta recentemente da Apple.

Spesso lo sviluppo delle pagine di un sito web è condizionato dalla necessità di garantire la compatibilità anche con vecchie versioni dei browser. Ciò comporta la programmazione di ulteriore codice che appesantisce le pagine per fare in modo che una percentuale minima dei visitatori possa fruire delle pagine in maniera ottimale.

Sappiamo però che la velocità di caricamento delle pagine di un sito è un fattore da non sottovalutare (vedi: Ottimizzare la velocità di caricamento delle pagine web), Conditionizr propone quindi una soluzione elegante per ridurre la quantità di codice da caricare al momento della visualizzazione delle pagine.

Conditionizr permette infatti di caricare solo i fogli di stile e gli script per lo specifico browser e per la risoluzione che l’utente sta usando così da ridurre sensibilmente la quantità di dati da scaricare. Oltre al rilevamento del browser e della risoluzione «retina», lo script determina anche il sistema operativo così da coprire un maggior numero di casistiche.

Per integrare Conditionizr è sufficiente caricare la libreria jQuery ed il plugin conditionizr.js, in seguito basterà inizializzarlo passando come parametri i vari script e fogli di stile implementati per i diversi browser e risoluzioni. Di volta in volta Conditionizr si occuperà di scegliere i file giusti da inviare all’utente.

Oltre al caricamento delle risorse CSS e JS, Conditionizr aggiunge dinamicamente delle classi CSS al tag <html> così da pilotare in maniera più efficacie i fogli di stile.

Inoltre i CSS ed i JavaScript sono caricati tramite JavaScript in seguito al caricamento del codice HTML della pagina. Anche questo aspetto contribuisce a ridurre il tempo di attesa per l’utente.

Tra le varie funzionalità di Conditionizr troviamo anche la compatibilità con Modernizr, un altro plugin jQuery per poter usare al meglio HTML5 e CSS3.