una caratteristica non certo trascurabile durante lo sviluppo di un layout è la compatibilità con i browser.
purtroppo internet explorer certe cose non le supporta, e certi giochi di css utili a rendere il sito più attraente devono così essere soppressi per rendere la visualizzazione identica su più browser.
un esempio pratico potrebbe essere l'uso dei "focus" oppure dell'annidazione delle proprietà "div.s1:hover div.s2" non supportate da internet explorer.
si possono quindi fare due versioni dello stesso css, una normale, e una "ridotta" per ie.
ecco come fare:
nell'head del documento, inserire come primo elemento "link quello che identifica il foglio di stile da utilizzare.
il layer "l0" contiene tutta la pagina, e viene richiamato dal javascript per nasconderlo, cambiare il foglio di stile qualora rilevasse internet explorer, quindi mostrarlo.<html>
<head>
<title> pagina di prova dei css </title>
<link rel="stylesheet" type="text/css" media="screen" href="stile.css" title=" Default " />
</head>
<body>
<div id="l0" >
<script type="text/javascript" >
<!--
function detectBrowser() {
if ( navigator.appName.indexOf("Explorer") > 0 ) {
document.getElementsByTagName("link")[0].href = "style_ie.css";
}
}document.getElementById('l0').style.visibility='h idden';
detectBrowser();
document.getElementById('l0').style.visibility='vi sible';
//-->
</script>
qui il contenuto html della pagina
</div>
</body>
</html>
il funzionamento del javascript è semplice
1. nasconde la pagina
2. cambia stile
3. rende visibile la pagina col nuovo stile
va inserito naturalmente solo dopo aver dichiarato il layer "l0", ma prima del resto della pagina.
spero sia utile.
a presto, Totò
Rispondi quotando
