Adapt JS: Caricare fogli di stile in base alla larghezza del browser
AdaptJS è una libreria Javascript sviluppata da Nathan Smith che permette di richiamare un foglio di stile in base alla risoluzione della finestra del browser, questo ti potrà tornare molto utile se vuoi sviluppare un sito web che si adatti a diverse risoluzioni e device, come smartphone e tablet, senza appesantire il foglio di stile principale con tante dichiarazioni @media-queries, o evitando di richiamare contemporaneamente , tra i tag head, dei fogli di stile che potrebbero non essere mai chiamati in causa durante la nacigazione.
AdaptJS è quindi una buona soluzione ed alternativa alla tecnica Responsive web design per risparmiare tempo e ottimizzare il caricamento di differenti fogli di stile, la libreria pesa meno di 1kb nella versione minimizzata ed è rilasciata gratuitamente.
La libreria supporta alcuni parametri, ognuno dei quali ti servirà per specificare al browser esattamente quale fogli di stile e in quale momento caricarlo, i parametri da impostare sono:
- Path: Specifica la directory di fogli di stile.
- Dynamic: Supporta i valori true o false, per impostare se il caricamento del foglio di stile deve essere eseguito una sola volta oppure può variare in base al ridimensionamento della finestra browser.
- Callback: Per determinare cosa fare in caso il browser non supporti JavaScript.
- Range: Specifica in base a quale risoluzione debba essere richiamato un foglio di stile piuttosto che un altro.
Per usare AdaptJs per prima cose bisogna incorporare la libreria all’interno di una pagina web
...
<script type="text/javascript" src="adaptjs.js"></script>
...Poi è necessario avere in una cartella i differenti fogli di stile CSS e infine utilizzare i valori elencati sopra per dare input corretti ai vari browser, ecco un esempio:
var ADAPT_CONFIG = { path: 'assets/css/', // Directory dove sono presente i fogli di stile dynamic: true, // Carica i fogli di stile in base alla grandezza del browser. range: [ '0px to 760px = mobile.css', '760px to 980px = 720.css', '980px to 1280px = 960.css', '1280px to 1600px = 1200.css', '1600px to 1920px = 1560.css', '1920px = fluid.css' ] };
Questo sopra è un utilizzo standard che permette di richiamare differenti fogli di stile, naturalmente è possibile giocare con le regole per avere risultati più personalizzati e creare anche dei callback nel caso il browser non supporti JavaScript.
Ciao, non capisco quando dici “infine utilizzare i valori elencati sopra per dare input corretti ai vari browser” dove va inserito quello che scrivi dopo? Nelle mie pagine html? nel file js? nel css?
Grazie..
Ciao Luca, l’ultima frazione di codice è codice JavaScript quindi puoi metterlo o nella pagina html tra i tag script oppure in un file esterno con estensione .js che poi dovrai richiamare comunque nella pagina html sempre tra i tag script, sicuramente non puoi metterlo nel file con estensione .css
Spero di esserti stato di aiuto.
Se hai ancora dubbi chiedi pure.
funziona, ma xkè secondo te devo ripeterlo due volte il codice?
var ADAPT_CONFIG = {
path: ‘wp-admin/cssnuovi/’, // Directory dove sono presente i fogli di stile
dynamic: true, // Carica i fogli di stile in base alla grandezza del browser.
range: [
'0px to 760px = 400.css',
'760px to 980px = 800.css',
]
};
var ADAPT_CONFIG = {
path: ‘wp-admin/cssnuovi/’, // Directory dove sono presente i fogli di stile
dynamic: true, // Carica i fogli di stile in base alla grandezza del browser.
range: [
'0px to 760px = 400.css',
'760px to 980px = 800.css',
]
};
Ciao Daniele, non so come mai, in realtà nell’articolo non c’è scritto che devi ripeterlo due volte… sei sicuro che non ci sia qualche errore nel primo codice che nel secondo non è presente e per questo viene eseguito correttamente solo il secondo.