CSS Zibaldone

[ Home ] - [ Articoli ] - [ Traduzioni ] - [ Altro ] - [ Appunti sui CSS ] - [ L'autore ]

Sei qui: Home > Articoli > Post con stile

Post con stile

Quando ho iniziato lo studio dei CSS nel 2005, copiavo molto codice dai siti che mi piacevano. Non ero ancora in grado di dare un'occhiata al layout e di scrivere il codice per ottenere quell'effetto senza prima guardare il foglio di stile originale. Il mio sito preferito era sicuramente quello di Eric Meyer, ma all'epoca non capivo molto il suo codice. Oggi per caso mi è capitata sotto mano una vecchia pagina del sito in questione. Gli ho dato un'occhiata e mi sono soffermato sul layout che Eric da ai suoi post.

I post di Eric sono suddivisi in titolo, informazioni sul post e contenuto del medesimo. Il testo del titolo è allineato col il contenuto principale. Ho preso la palla al balzo ed ho deciso di scrivere il codice partendo da zero e senza guardare il CSS originale. Ecco il codice risultante:

.post {
width: 65%;  
margin: 0; 
font-size: 80%;
}
.post:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.post h2 {
line-height: normal; 
margin: 0; 
padding-bottom: 2px; 
border-bottom: 1px solid #ccc; 
color: #338; 
background: transparent;
text-indent: 25%;
font-size: 1.4em;
}
.contents {
float: right; 
width: 75%; 
margin: 0; 
padding-top: 1em;
}
.contents p {margin: 0 0 1em 0;}

.info {
float: left;
margin: 1em 0 0 0;
width: 25%;
padding: 0;
list-style: none;
}

Internet Explorer 6 e 5.0 hanno bisogno di codice aggiuntivo:

<!--[if lt IE 7]>
<style type="text/css">
.post h2 {text-indent: 16%;}
.info {margin-left /**/: -1em;}
.post h2 {text-indent /**/: 25%;}
</style>
<![endif]-->

Ecco il risultato.

I problemi più gravi vengono dai due Explorer: la prima riga di codice all'interno del commento condizionale serve ad Explorer 6 per non sbagliare il computo dell'indentazione data in percentuale (Explorer 6 la calcola a partire da body), mentre la seconda e la terza riga servono ad Explorer 5 rispettivamente per posizionare correttamente l'elenco non ordinato e per dare la giusta indentazione al testo. Come noterete, Explorer 5 calcola la percentuale in modo corretto, e quindi l'ultima dichiarazione serve a sovrascrivere la prima data ad Explorer 6.

Per il contenimento dei float abbiamo usato la nota soluzione di Position Is Everything:

.post:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Infine, abbiamo evitato il noto problema dei margini collassati dei float impostando un padding superiore per l'elemento .contents e azzerando quello dei paragrafi al suo interno.

Questo si è rivelato essere un ottimo esercizio per testare la nostra capacità di intuire al volo lo schema di un layout e di realizzarlo partendo da zero. Per usare un paragone con la musica, possiamo dire di aver effettuato un blindfold test.