Programmazione Web » Css » Visibilità di un sito web anche con i browser meno recenti
Visibilità di un sito web anche con i browser meno recenti
Difficoltà:
Scritto da Alberto Giuliani
Sito Web: http://www.agwebsolutions.it 
Questo tutorial è stato letto 1085 volte
Capita spesso di realizzare un sito web con tecnologie innovative, visibile da diversi browser, fuorchè versioni più datate.
Un semplice esempio è l'utilizzo dei CSS: Netscape 4, IE 4.0 non supportano brillantemente neppure i CSS1, figuriamoci quindi i CSS2.
Basterà quindi realizzare un layout table-less, con uno o più div settati a position:absolute (cioè posizionabili in qualsiasi punto dello schermo) ed ecco che se visualizziamo il nostro sito con IE 4.0, Netscape 4 o altri meno recenti, la pagina appare completamente sfasata.
Realizzare siti Crossbrowser, ossia che oltrepassano le schematiche dei singoli browser e sono visibili da tutti è sempre più difficile.
E' sicuramente un problema per chi vuole garantire accessibilità al proprio sito web.Vi sono due soluzioni:
1) Decidere di abbandonare gli utenti con i browser datati
2) Provare a trovare una soluzione.
Logicamente non prenderemo in considerazione il primo esempio. Riguardo al secondo, ci sono diversi sistemi, tra cui l'utilizzo di javascript. Noi però opteremo per l'utilizzo di più fogli di stile.
Realizziamo un foglio di stile molto semplice, per i browser più datati... cerchiamo di evitare la disposizione a colonne e chiamiamolo "old.css". Il foglio di stile recente invece lo chiamiamo "new.css". Ecco il codice della pagina:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="old.css"/>
<style type="text/css">
@import url(new.css); /* Importiamo il foglio di stile per tutti i browser recenti */
</style>
</head>
<body>
</body>
</html>
Ma dove sta il trucco? Ebbene, bisogna sapere che i browser più recenti non supportano il comando "@import" dei CSS, quindi all'apertura della pagina non lo interpreteranno, e utilizzeranno come foglio di stile "old.css". I browser più recenti invece, interpreteranno entrambi i comandi, ma daranno precedenza a "@import", utilizzando "new.css" come foglio di stile.
Alcune osservazioni
Attenzione a come costruite i fogli di stile: non mettete mai nel foglio per i browser meno recenti istruzioni non utilizzate nel secondo foglio. Ossia, se in "old.css" inserite, ad esempio, uno stile per il DIV "#content" e non fate lo stesso nel secondo foglio, Explorer e gli altri browser, erediteranno quello stile. In pratica, se non trovano le informazioni nel primo foglio (@import) lo cercheranno nel secondo (<link>).
E' comunque possibile il processo contrario, ossia potete inserire nel secondo CSS informazioni non presenti nel primo, dal momento che "new.css" sarà ignorato dai browser meno recenti.
Aggiungi questo tutorial ai preferiti
