Sappiamo che l’utilizzo dei frame sta per andare in soffitta, sia per la poca accessibilità, sia per una arcaica concezione della struttura del web. Ma allora come si può ottenere lo stesso effetto di posizionamento assoluto senza utilizzare frames, tabelle oppure JavaScript?

Si possono utilizzare varie soluzioni, ed una di queste è quelle di adoperare i CSS ed un po’ di pazienza, ottenendo un effetto che, se ben impiegato, non vi farà rimpiangere i vecchi frame. L’unica questione che bisogna da subito chiarire è che non tutti i browser si comportano alla stessa maniera; per esempio Internet Explorer avrà bisogno di aiuto per riuscire ad interpretare il funzionamento del codice.

A tal riguardo voglio specificare che mi soffermerò solamente sulle porzioni di codice che permettono il risultato desiderato, poiché tutto il resto è facilmente comprensibile.

Il codice per quanto riguarda il nostro menu laterale di navigazione sarà:

#nav {
  position: absolute;
  top: 2em;
  left: 1em;
  width: 14em;
  background:#f4f2e6;
}
#nav ul {
  list-style: none;
  margin-left: 1em;
  padding-left: 0;
}
#nav li {
  font-size: 80%;
  border-bottom: 1px dotted #b2bcc6;
  margin-bottom: 0.3em;
}
#nav a:link, #nav a:visited {
  text-decoration: none;
  color: #2a4f6f;
  background-color: transparent;
}
#nav a:hover {
  color: #778899;
}

Questo codice ci permette ottenere lo stesso tipo di menu come posizionamento, sia con Mozilla&Co. che con Internet Explorer; però il risultato che vogliamo non è questo, cioè se dovessi far scorrere il testo della pagina il menu scomparirebbe. Per ottenere il tutto dobbiamo semplicemente modificare un valore di una proprietà nel CSS:

#nav {
  position:fixed;
  top: 2em;
  left: 1em;
  width: 14em;
  background:#f4f2e6;
}

L’unico cambiamento da fare era quello di modificare il valore absolute della proprietà position del div#nav con il nuovo valore fixed, supportato dai CSS 2.1 e dai nuovi browser.
Purtroppo questo nuovo valore non viene supportato da Internet Explorer, che invierà il menu ai piedi della pagina, stravolgendo del tutto il nostro layout. A tal riguardo sfrutteremo a nostro favore una caratteristica dello stesso browser, per riuscire a risolvere il problema.

Infatti sappiamo che Internet Explorer non è in grado di comprendere il selettore figlio > , mentre i browser che supportano il valore fixed lo interpretano correttamente; quindi questo semplice selettore ci permetterà di discriminare fra le due tipologie di browser.

body > #nav {
  position: fixed;
}
#nav {
  position: absolute;
  top: 2em;
  left: 1em;
  width: 14em;
  background:#f4f2e6;
}

Quindi i browser della Microsoft leggerà la posizione del div#nav come assoluta, mentre tutti gli altri browser che riconoscono il selettore > la leggeranno con il valore di fixed. Il risultato si può tranquillamente visionare con i due browser per notare la differenza.

La soluzione per Internet Explorer

Però questa tecnica non ci permette di ottenere le stesse funzionalità sui browser di casa Microsoft, infatti questi non manterranno fisso il menu, che continuerà a sparire con lo scorrere della pagina.

L’unico modo per riuscire ad ottenere questo effetto è quello di far credere che l’area del contenuto si scontri con i confini dello schermo; per riuscire nel nostro intento dobbiamo trovare il nostro spazio vitale, utilizzando il padding per inserire lo spazio:

#wrap {
  padding: 2em 2em 0 16em;
}

Questa scelta cade sulla considerazione che con l’utilizzo del margin il browser avrebbe visualizzato anche le sbarre di scorrimento del div#wrap, queste ultime con uno spazio tra di esse e quella di scorrimento del browser. Purtroppo tutto questo non basta, infatti dobbiamo anche forzare Internet Explorer ad andare in modalità “Quirks Mode”, aggiungendo un particolare commento prima del DOCTYPE.

La Quirks Mode risale agli albori del W3C e della programmazione web: tralasciando la storiella sull’evoluzione di Internet, occupiamoci della modalità con cui i browser visualizzano i documenti.
Molti browser moderni utilizzano due modalità per mostrare le pagine: la Quirks Mode, con la quale le pagine vengono mostrate tenendo conto delle implementazioni dei bug presenti nelle vecchie versioni dei browser, come Netscape 4 e IE 4/5, e la Standard o Compliance Mode, con la quale le pagine vengono mostrate in accordo alle specifiche della W3C.

Tutto questo però non è così semplice come sembra. Infatti, se includete prima della linea del DOCTYPE, una linea vuota oppure una dichiarazione XML, IE mostrerà tutto in Quirks Mode, stravolgendo e facendo impazzire i programmatori per una semplice linea vuota.

Se siete interessati a maggiori informazioni sulla Quirks Mode vi consiglio il sito Quirksmode.org

Noi in questo esempio sfrutteremo a nostro favore una pecca di Internet Explorer; infatti giocheremo sul fatto che il browser entra in Quirks Mode se non trova nulla prima del DOCTYPE

<!--Forza IE in Quirks Mode-->
<!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">

Inoltre sarà importante ricordarsi di utilizzare due blocchi condizionali, specifici per IE, che contengono due regole di stile aggiuntive; è importante ricordarsi che queste regole devono comparire dopo il foglio di stile principale e che devono essere applicate solamente ad Internet Explorer.

<!--[if IE]>
<style type="text/css" media="screen">
body
{
overflow-y: hidden;
}
div#wrap
{
height: 100%;
overflow: auto;
}
</style>
<![endif]-->

Quello che permettono queste righe di codice è di impostare l’area principale del contenuto come un div#wrap che scorre quando è troppo lungo per essere consultato sulla pagina; infatti la barra di scorrimento sulla destra non è quella originale del browser, ma è quella generata dal div#wrap. Questo risultato si può tranquillamente visionare con Internet Explorer per notare che tutto funziona.

Questa tecnica ci permette di sostituire l’utilizzo dei frame, se applicata correttamente permette di ottenere grandi risultati; resta il fatto che risulta laboriosa per riuscire ad avere il medesimo effetto su Internet Explorer, mentre per tutti gli altri browser basta una semplice riga di codice.