Emulare gli IFRAME con i CSS
Gli IFRAME sono ultimamente sempre più diffusi poiché molto utili per mostare del testo piuttosto lungo in uno spazio limitato. Questo utilizzo degli IFRAME però ha un grosso limite: l'accessibilità e l'indicizzazione nei motori di ricerca. In questo articolo vedremo come sia possibile evitare gli IFRAME utilizzando i CSS in modo da ottenere l'effetto equivalente.
Il falso IFRAME
Quello di seguito riportato sembra essere un vero IFRAME (ciò è vero solo per i browser con un valido supporto dei CSS di livello 2), ma in realtà si tratta di un div cui è sono state associate opportune regole CSS.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Il codice CSS
In questo articolo si è preferito utilizzare il codice CSS in linea (vedi il codice sorgente di questa pagina) poiché si è voluto realizzare un solo esempio ma il metodo migliore per realizzare l'IFRAME è utilizzare un DIV cui associare un'opportuna classe. Di seguito è riportato il codice CSS della classe e il codice (X)HTML per l'IFRAME:
CSS
.iframe {
width: 250px;
height: 250px;
overflow: auto;
border: 1px solid #000;
padding: 5px;
}
(X)HTML
<div class="iframe">
Questo è il contenuto dell'IFRAME...
</div>
Le prorpietà width e height definiscono le dimensioni dell'IFRAME che, in questo caso, risulterà largo 250px e alto 250px. La proprietà fondamentale è overflow: quando il testo contenuto nel box associato all'IFRAME supera l'altezza prefissata per il box, questa regola comporta la creazione di una barra di scorrimento e quindi di un vero e proprio IFRAME. Vi consigliamo di sperimentare cosa accade impostando i valori hidden, visible, scroll per la proprietà overflow.
Vantaggi e limiti
Il falso IFRAME comporta i due seguenti vantaggi: indicizzazione dei contenti nei motori di ricerca, accessibilità con i browser più datati.
Gli svantaggi sono principalmente due: il codice non funziona con NN4, non è comodo per includere pagine esterne. Con NN4 infatti il box non risulta ad altezza fissa ma si sviluppa per l'intera altezza del testo, del resto NN4 non è in grado di interpretare gli IFRAME. E' evidente che quando si vuole includere del testo esterno al proprio sito web, ad esempio dei banner pubblicitari, gli IFRAME possono risultare più adatti.
File correlati
Articoli correlati:
Strumenti
.ConStile è disponibile anche in XML.
Some Rights Reserved. This work is licensed under a Creative Commons License.
