Simulare frames con i CSS mantenendo la colonna sinistra fissa

Ebbene si! Possiamo anche tentare di "ingannare" [benevolmente, si intende] un utente che entra nel nostro sito e fare credere che la pagina in cui si trova, sia composta con i frames. Invece no: abbiamo semplicemente usato codice CSS [non molto a dire il vero] per la realizzazione della pagina. La cosa importante, secondo me, è che abbiamo la possibilità di mostrare la pagina su diversi browser; io ho fatto le prove con 6 browser che ho a disposizione:

  1. Internet Explorer 5
  2. Internet Explorer 5.5
  3. Internet Explorer 6
  4. Opera
  5. Firefox
  6. Google Chrome

e su tutti ho avuto il medesimo risultato: identica visualizzazione della pagina a "frames". Dobbiamo dire che questa tecnica dovrebbe essere rivolta esclusivamente ai browser di casa Microsoft i quali non supportano la dichiarazione fixed dei CSS. Ma con qualche accorgimento siamo riusciti a "darla a bere" anche ad essi. Premessa: in base a quanto poc' anzi scritto, dobbiamo realizzare 2 fogli di stile: uno per i browser più standard e l' altro solo e soltanto per Internet Expolorer.

Quale <!DOCTYPE> usare

Partiamo, questa volta, dalla modalità di interpretazione del codice da parte degli ultimi browser: il <!DOCTYPE>. Questo argomento merita un articolo, forse anche più di uno, a se stante. Affinchè possiamo visualizzare la finta pagina a frames, dobbiamo affidarci alla visualizzazione QUIRKS mode, vale a dire retrocompatibile. In altri termini il browser interpreta una determinata pagina in base al tipo di <!DOCTYPE> utilizzato. Per l'articolo in oggetto, dobbiamo "riportare indietro" i nostri browser. Come? Grazie al codice che nel documento html viene prima di qualsiasi altra dichiarazione:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Come ho scritto più su, avremo una corretta visualizzazione della pagina in quanto abbiamo utilizzato questo <!DOCTYPE>. Se si provasse ad usarne uno diverso, i browser non interpreterebbero, quanto andremo a realizzare, in maniera corretta. Ho eseguito delle prove anche io, prima di scrivere questo articolo.

Il codice CSS

Stabilita la corretta interpretazione della pagina che forniremo ai browser, passiamo alla scrittura del codice CSS. Quello che faremo è suddividere la paginain due parti: la parte sinistra, e fissa, la nomineremo #menu e la parte destra, scrollabile, la nomineremo #content. Merita attenzione anche il <body>: non avrà i margini settati a zero, bensì:

body{ 
margin: 0; 
padding: 0 0 0 15em;
}  

Dando un padding sinistro di 15em, prepariamo lo spazio per l' elemento #menu. La sua larghezza sarà, appunto, di 15em:

#menu{ 
overflow:auto; 
height:100%; 
width:15em;
position:absolute; 
top: 0; 
left: 0; 
background:#e5e5e5; 
}  

Analizziamo questo codice:

Per la colonna dei contenuti [#content] non abbiamo di molto codice; stabiliamo solo il padding tra i suoi lati e la colonna sinistra:

#content{ 
padding: 0 1em 1em;
}  

Ovviamente possiamo decidere qualsiasi altra misura: in percentuale, in pixel ecc...
Adesso vedremo un codice particolarmente importante per il nostro progetto: le @-rules

Cosa è una @-rules

Le @-rules sono particolari costrutti che hanno una caratteristica comune: sono tutti introdotti dal simbolo della chiocciola. Un esempio è il metodo @import che normalmente usiamo nella pagina html: importare un foglio di stile in maniera che i browser più datati non riconoscano il codice CSS in esso dichiarato. La @-rules di cui ci serviremo oggi, invece, è altrettanto efficace, ma solo in particolari situazioni, cioè: @media screen. Il codice è:

@media screen{ 
body>div#menu{position:fixed;
}
}  

Cosa significa questo codice: avere un CSS per ogni tipo di media, o dispositivo. Nella pagina html, tra i tag head, abbiamo:

<style type="text/css" media="screen">@import url(nomefile.css);</style>

Quindi, riprendendo il codice che ci interessa, abbiamo stabilito che:
se il tipo di media è screen, il div#menu [figlio di body], deve avere position:fixed. Non abbiamo fatto altro che "restringere" il raggio di azione per selezionare un elemento figlio di un altro elemento. Questo, come detto all' inizio, vale per i browser che supportano il fixed.

Il codice CSS per Internet Explorer

Quello che abbiamo scritto finora è codice che viene interpretato da browser standard. Siccome vogliamo che anche su Internet Explorer la pagina sia trattata come frames, dobbiamo scriverne dell' altro appositamente per lui. Ci avvaliamo di una condizione. In pratica stabiliamo che: SE il browser è Internet Expolorer.... deve comportarsi in una determinata maniera [leggi: deve interpretare un altro codice CSS]. Cioè:

<!--[if IE]>
<link href="/file.css" media="screen" type="text/css"  rel="stylesheet" /> 
<![endif]-->

Questo codice va inserito tra i tag <head> e </head> della pagina. Quale codice contiene il foglio di stile scritto solo per Internet Expolorer?

body{
height:100%; 
overflow: hidden;
}

#content{
width: 100%; 
height: 100%; 
overflow:auto;
}  

Analizziamo il body: esso avrà un' altezza pari al 100% [tutta la finestra del browser] e una proprietà overflow:hidden. Cioè stabilisce quello che accade al contenuto di un determinato elemento quando si estende oltre l' area di contenuto. Hidden nasconde il contenuto in "esubero". Perchè? Se non impostassimo questa proprietà, avremmo due scrollbar: una del browser e l' altra del #content. Il codice successivo, invece, specifico per l' elemento #content stabilisce che altezza e larghezza si devono estendere per tutta l' area disponibile e che il suo contenuto, qualora superasse l' altezza, non deve essere nascosto, bensè deve essere visualizzabile attraverso lo scorrimento della parte interessata. A questo serve overflow:auto. A fare in modo che appaia automaticamente la barra di scorrimento verticale.

Fatto tutto questo, anche se non abbiamo usato molto codice, siamo giunti al termine. Prima di salutarci e darci appuntamento con il prossimo articolo, vi invito a vedere la pagina di esempio che abbiamo ottenuto.