Lo script che presentiamo consente di applicare due stili differenti alle pagine a seconda che il sistema operativo utilizzato dall'utente sia Mac o PC (per default). I Web Designer sanno bene che il Mac rende certi elementi della pagina web differenti dal PC (per esempio il font della pagina). Questo script può essere usato per rimediare a queste inconsistenze. I fogli di stile possono essere inseriti direttamente nella pagina o essere richiamati come file esterni.
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Il codice è molto semplice e non richiede grandi modifiche. Inseriamo il seguente codice JavaScript tra i tag <head> della pagina:
<script type="text/javascript">
var csstype = "inline";
var mac_css = 'body{font-size: 14pt; }';
var pc_css = 'body{font-size: 12pt; }';
var mac_externalcss = '/style/macstyle.css';
var pc_externalcss = '/style/pcstyle.css';
var mactest = navigator.userAgent.indexOf("Mac") != -1
if (csstype == "inline"){
document.write('<style type="text/css">');
if (mactest)
document.write(mac_css);
else
document.write(pc_css);
document.write('</style>');
}
else if (csstype == "external")
document.write('<link rel="stylesheet" type="text/css" href="'+ (mactest?
mac_externalcss : pc_externalcss) +'">');
</script>
Vediamo le parti del codice da personalizzare:
var csstype = "inline";
indica quale tipologia di foglio di stile si vuole utilizzare. Se si vuole inserire lo stile direttamente nella pagina occorre specificare la parola chiave "inline". Se, invece, si vuole richiamare un file css esterno occorre specificare "external".
var mac_css = 'body{font-size: 14pt; }';
var pc_css = 'body{font-size: 12pt; }';
Queste due variabili indicano lo stile da utilizzare se l'utente sta adoperando, rispettivamente, un Mac o un PC (opzione di default). Lo script ne farà uso se la variabile csstype è stata impostata sul valore "inline".
var mac_externalcss = '/style/macstyle.css';
var pc_externalcss = '/style/pcstyle.css';
Queste due variabili, invece, verranno utilizzate se la variabile csstype è impostata su "external", cioè se si desidera richiamare un foglio di stile esterno. Indicano il percorso del file CSS, rispettivamente per il Mac e per il PC.
Altre modifiche non sono necessarie.
