Come molti di voi sapranno i frame html consentono di suddividere il layout di una pagina web in più riquadri, consentendo così di presentare molte più informazioni di quelle che la singola pagina non potrebbe contenere a meno di non diventare chilometrica.
Indubbiamente quindi sia i frame (letteralmente cornici) che gli iframe (frame interni) presentano i loro vantaggi, primo fra tutti consentono di presentare e suddividere i contenuti in riquadri all'interno di una pagina web in modo tale d'agevolare la visione e la navigazione da parte dell'utente, come nella creazione di particolari menù, pagine con contenuti molto lunghi, richiami ad argomenti correlati, presentazione di script o parti di codice e così via.
Nonostante l'uso dei frame porta i suoi indubbi vantaggi (hanno avuto un grande successo in passato), l'uso ne è fortemente sconsigliato, oggi vengono visti come un'approccio dilettantistico e poco consono al layout ed all'indicizzazione delle pagine web per l'esigenze del Web 2.0. Tuttavia ci sono dei casi in cui il loro uso sembra quasi indispensabile, come fare allora ad ottenere l'effetto frame senza l'uso del frame stesso, ci vengono in aiuto i CSS (Cascading Style Sheets o fogli di stile), i quali sfruttando una loro regola di stile ci permettono di ottenere l'effetto frame senza subire tutti gli svantaggi derivanti dal loro uso.
Andiamo a scoprire come ottenere un effetto frame con i CSS senza l'uso dei frame.
La regola di stile che ci consente di ottenere l'effetto frame senza l'uso di documenti html esterni è detta overflow, il nome di per sè è molto indicativo sulle proprietà di questa regola, poichè tramite essa andiamo a definire come deve comportarsi il tag a cui è applicato nel caso in cui il suo contenuto superi le proprietà width ed height.
Facciamo un'esempio, supponiamo che io voglia all'interno di un mio articolo mostrare una porzione di codice di programmazione, e voglio farlo in modo che esso si distingui nettamente dal resto della pagina e che sia interamente leggibile senza che mi occupi troppo spazio e che faccia diventare la mia pagina molto lunga. Inserirò quindi all'interno della mia pagina web un div con classe di stile .effettoFrame ed al suo interno metterò il testo del mio codice, in questo modo:
<div class="effettoFrame">
...
public static string ReturnYesNo(bool term)
{
if (term)
return "Yes";
else
return "NO";
}
...
</div>
Dopodichè (o meglio prima) definiamo le regole all'interno della classe di stile .effettoFrame di come vogliamo che compaia il testo contenuto all'interno del nostro div. La regola come normalmente si fà con i css può essere definita interna alla pagina stessa o su un foglio di stile esterno e richiamato poi nel tag head, per comodità di spiegazione definiamo uno script css all'interno della nostra pagina nella sezione head, in questo modo:
<style type="text/css">
.effettoFrame {
overflow: Auto;
width:auto;
height:130px;
background-color:aqua;
scrollbar-face-color:blue;
scrollbar-shadow-color: #CCCCCC;
scrollbar-highlight-color: #CCCCCC;
scrollbar-3dlight-color: #666666;
scrollbar-darkshadow-color: #666666;
scrollbar-track-color: #666666;
scrollbar-arrow-color: #FF9900; }
</style>
Come potete notare definiamo la proprietà css overflow come Auto, e specifichiamo un'altezza massima di 200 pixel, mentre per la larghezza facciamo in modo che si adatti automaticamente al div genitore che contiene il nostro div. Con questa regola ogni qual volta il contenuto dei div definiti con classe .effettoFrame avranno un testo di alterzza superiore ai 200 pixel comparirà una scrollbar verticale, di cui abbiamo provveduto anche a definire i colori e l'effetto.
Il risultato che otteniamo è questo:
« Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. »
« Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. »
« Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. »
Fico NO? In larghezza con "width:auto" ci adattiamo al layout contenitore della pagina e quando invece superiamo l'altezza di 130px la regola css overflow ci mostrerà automaticamente una scrollbar verticale formattata con effetto 3D e di cui abbiamo cambiato anche il colore delle frecce (arancioni). Come potete vedere l'effetto ottenuto con i CSS è del tutto identico a quello dei frame.
NOTA: l'effetto 3D e tutte le altre regole di formattazione per la scrollbar è valido solo per Internet Explorer, se provate a visualizzarlo su FireFox avrete la classica scrollbar bombata e di colore azzurro.
Spero che questo piccolo workaround con i CSS aiuti qualcuno di voi ad ottenere l'effeto frame senza l'uso dei frame, fatemi sapere.
Chiunque voglia aggiungere qualcosa in merito all'argomento, porre una domanda o dare un suggerimento, ogni commento è ben accetto.