Programmazione Web » Php » Cambiare foglio di stile in base al browser utilizzato
Cambiare foglio di stile in base al browser utilizzato
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 675 volte
Con la lezione di oggi impareremo a cambiare il foglio di stile in base al browser utilizzato dall'utente.
Anche se non saranno trattate in questa lezione, dobbiamo sapere che esistono alcune regole dei fogli di stile che funzionano solo su alcuni browser e non su altri. Il motivo per cui sto scrivendo questo tutorial dovrebbe essere essenzialmente questo, ma per motivi di praticità ci limiteremo ad un esempio grazie al quale cambiaremo il colore di sfondo della pagina in base al browser utilizzato.
Utilizzeremo la variabile $_SERVER['HTTP_USER_AGENT'] di Php per riconoscere il browser utilizzato ed in base a questo sceglieremo il foglio di stile da richiamare grazie ad un semplice controllo if-else.
Innanzitutto creiamo due fogli di stile differenti. Il primo lo chiameremo "ie.css" e sarà quello richiamato nel caso in cui il browser utilizzato dall'utente è Internet Explorer. Il codice, così come vi viene fornito, si limita ad assegnare uno sfondo celeste alla pagina, ma ovviamente siete liberi di personalizzarlo come meglio vi pare.
body {
background-color: #66CCFF; // colore celeste
}
Adesso creiamo un nuovo foglio di stile e chiamiamolo "non_ie.css". Questo stile sarà quello richiamato nel caso in cui il browser utilizzato dall'utente sia diverso da Internet Explorer (Firefox, ad esempio). Anche in questo caso, per questioni di brevità, ci limiteremo ad assegnare uno sfondo color arancio alla pagina, in modo da poterla distinguere da quella stilizzata per Internet Explorer, che ha sfondo celeste. Eccovi il codice:
body {
background-color: #FFCC33; // colore arancio
}
Ora arriviamo al cuore dell'applicazione (se così possiamo chiamarla). Grazie ad un semplice ciclo if-else controlleremo il browser utilizzato dall'utente e, in base ad esso, richiameremo il foglio di stile appropriato. Questo blocco di codice va inserito nel punto in cui avremmo richiamato un semplicissimo foglio di stile quindi, in ogni caso, tra i tag <head>.
<?php
if (ereg("MSIE", $_SERVER['HTTP_USER_AGENT'])) {
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"ie.css\" />";
}
else {
echo "<link rel=\"stylesheet\" type=\"text/css\"href=\"non_ie.css\" />";
}
?>
Niente di più semplice. C'è solo da precisare che questo tipo di controllo si può effettuare solo su pagine Php e non su comuni pagine Html. Ora potete divertirvi a giocare con i due fogli di stile e a personalizzarli come meglio vi pare.
Aggiungi questo tutorial ai preferiti
