Guida alle clonazioni CSS

  • CSS
  • Gabriele Romanato
Guida alle clonazioni CSS

In questo articolo affronteremo le basi delle clonazioni effettuate con i CSS. Vedremo come trasformare layout tabellari e non validi in layout semantici e corretti.

Introduzione

Le clonazioni con i CSS sono un utile esercizio per testare la nostra capacità di trasformare un layout realizzato con le tabelle in un layout la cui impaginazione è ottenuta con i soli CSS. Il risultato dovrebbe essere il più fedele possibile all'originale. Quando si realizza una clonazione, si deve tenere presente che:

  • bisogna sostituire gli elementi table che formano la struttura della pagina con degli elementi div
  • bisogna sostituire tutti gli elementi presentazionali (come font) con delle regole CSS
  • bisogna trasformare un codice non semantico e scorretto in un codice semantico e valido.

Esempio: home page di Google del 2007

Il primo caso che andremo ad esaminare è quello relativo alla pagina principale di Google Italia del 2007, che faceva uso di tabelle per l'impaginazione del form principale di ricerca e del logo di Google. Il codice della pagina potrebbe essere così riscritto:


<body>

<div id="guser">
<p>
<a href="#">Personalizza questa pagina</a> 
<span>|</span> <a href="#">Accesso</a></p>
</div>

<div id="outer">
<div id="wrap">
<h1><span>Google</span></h1>

<ul class="generale">
<li><strong>Web</strong></li>
<li><a href="#">Immagini</a></li>
<li><a href="#">Gruppi</a></li>
<li><a href="#">News</a></li>
<li><strong>
<a href="#">altro »</a></strong></li>
</ul>

<form action="/search" name="f">
<p><input name="hl" value="it" type="hidden">
   <input maxlength="2048" name="q" size="55" 
   title="Cerca con Google" value="" class="txt">
  <br>
<input name="btnG"  value="Cerca con Google" type="submit">
<input name="btnI" value="Mi sento fortunato" type="submit"></p>

<p class="cerca">Cerca: 
<input id="all" name="meta" value="" checked="checked" type="radio">
<label for="all"> il Web </label>
<input id="lgr" name="meta" value="lr=lang_it" type="radio">
<label for="lgr"> pagine in Italiano </label>
<input id="cty" name="meta" value="cr=countryIT" type="radio">
<label for="cty"> pagine provenienti da: Italia </label></p>

</form>

<p class="pubblicita">
<a href="#">Pubblicità</a> - 
<a href="#">Soluzioni Aziendali</a> - 
<a href="#">Tutto su Google</a> 
- <a href="#">Google.com in English</a>
</p>
<p class="copyright">
©2007 Google
</p>
</div>

<div id="side">
<ul>
<li><a href="#">Ricerca avanzata</a></li>
<li><a href="#">Preferenze</a></li>
<li><a href="#">Strumenti per le lingue</a></li>
</ul>
</div>
</div>
</body>

Il layout della pagina di Google era fondamentalmente costituito dalle seguenti parti:

  1. una sezione di personalizzazione della pagina
  2. una sezione centrale principale con il logo di Google
  3. un menu di navigazione orizzontale
  4. il form di ricerca
  5. una sezione pubblicitaria
  6. una sezione sul copyright
  7. un menu di navigazione verticale laterale

Il CSS potrebbe quindi essere:


body {
background: #fff;
color: #000;
font-family: Arial, sans-serif;
text-align: center;
}

a:link, a:visited {color: #00c;}
a:active {color: #ff0000;}

#guser {
text-align: right;
padding-bottom: 4px;
margin: 0;
}
#guser p {margin: 0; padding: 0; font-size: 84%;}

#guser span {padding: 0 2px;}

#outer {
width: 60%; 
margin: 0 auto; 
text-align: center;
}
#wrap {
text-align: center; 
width: 80%; 
margin: 0; 
float: left; 
}
#side {
text-align: left; 
float: left; 
width: 20%; 
font-size: 65%; 
margin: 0; 
padding-top: 15em;
}
#side ul {margin: 0; padding: 0; list-style: none;}

h1 {
width: 276px;
height: 110px;
margin: 0 auto;
padding: 0;
background: transparent url("../img/logo.gif") no-repeat 0 0;
}
h1 span {position: absolute; top: -1000em;}

ul.generale {
text-align: center; 
padding-top: 2em; 
padding-bottom: .2em; 
font-size: 80%; 
list-style: none; 
margin: 0;}
ul.generale li {
display: inline; 
padding-right: 1.3em;
}

form {margin: 0; padding: 0;}

form p {margin: 0; text-align: center;}
form p.cerca {
font-size: 80%; 
text-align: center; 
margin: 0;
}

p.pubblicita {
text-align: center; 
font-size: 80%; 
padding-top: 3.5em; 
margin: 0;
}
p.copyright {
text-align: center; 
font-size: 65%; 
margin: 0; 
padding-top: .9em;
}

input.txt {
width: 90%;
margin: 0;
padding: 0;
}

(Vedi esempio)

Come si può notare, si tratta di un semplice layout a due colonne. Il logo di Google è stato ricreato inserendo un'immagine di sfondo e quindi impiegando una tecnica di sostituzione del testo con immagini. In questo modo il contenuto testuale dell'elemento h1 sarà visibile con i CSS disabilitati. Il form di ricerca è stato lasciato praticamente intatto, ad accezione del campo di testo a cui è stata applicata una larghezza in percentuale. Questa scelta è motivata dal fatto che Google non applica mai una forte personalizzazione ai form, lasciando a ciascun browser il compito della loro rappresentazione.

Ti potrebbe interessare anche

Torna su