Uno degli elementi di maggior interesse di un blog, dopo la pagina principale e quelle dei singoli articoli, è lo spazio riservato ai commenti dei lettori. Garantire uno spazio per i commenti ordinato e facilmente leggibile è un obbligo di ogni designer, vediamo allora come possiamo progettarne uno al meglio utilizzando qualche piccolo trucco CSS.
Il markup
Volendo portare avanti questo articolo in modo che sia quanto più universale possibile, e visto che tutte le maggiori piattaforme di blogging permettono la personalizzazione dei temi grafici, si farà uso di un markup quanto più possibile cross-platform. Va da sé che questo presentato non è uno standard, ma solo una summa degli elementi che più comunemente sono presenti in un commento:
- L'Autore
- La Data
- Il Permalink
- Il Testo
Ecco dunque il codice:
<div id="comments-list">
<h3>12 Commenti</h3>
<ol>
<li class="comment">
<div class="comment-author"><a href="#">Paperino</a></div>
<div class="comment-meta">Scritto il 12 settembre</span> <a href="#" title="Permalink">Permalink</a></div>
<div class="comment-text">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vitae mauris nec dolor sodales pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse nisi purus, dignissim et, vehicula vulputate, varius et, neque. Nulla augue dolor, molestie vel, porta in, consectetuer vel, mi. Aliquam erat volutpat. Vivamus pede lorem, luctus in, eleifend quis, lobortis ut, ligula. Morbi magna. Proin posuere mollis lectus. Praesent varius dapibus sem. Aenean lorem. Nulla laoreet dictum tellus. Nam vel dolor. Integer sed ligula vel quam suscipit molestie.
</p>
</div>
</li>
</ol>
</div>
Abbiamo un div che funge da contenitore per tutta la lista dei commenti, identificata da #comments-list; poi troviamo un elemento <h3> che fa da titolo/introduzione ai commenti (spesso vi viene stampato dal CMS il numero dei commenti);
Infine una lista ordinata i cui elementi sono numerati: è il tipo di lista comunemente utilizzato in questo ambito.
All'interno di ogni elemento della lista, marcato dalla classe .comment, avremo un div che contiene il nome dell'autore, un div che contiene data e permalink del commento (i metadati) e un div con il corpo del commento.
Ogni elemento è stato marcato con classi e id per ovvi motivi di praticità.
Struttura
La prima cosa da fare è quella di dare una struttura al tutto.
Per cominciare, visto che la zona commenti è solo una porzione di un tema, supporremo per comodità che quelle parti di CSS a comune con il resto del template (il foglio di reset e la tipografia di base) siano già impostate.
Nell'esempio ci serviremo di reset.css e typography.css presenti nel framework BlueprintCSS, ma voi siete liberessimi di usare quelli che più preferite:
@import "reset.css";
@import "typography.css";
Iniziamo impostando una dimensione fissa a #comment-list. Nel caso che stiate costruendo il tema per il vostro blog, forse preferirete impostare un width: 100% -- nel nostro caso fissiamo la larghezza per comodità:
div#comments-list {
margin: 0 auto;
width: 500px;
}
Adesso ci assicuriamo di annullare i margini della lista ordinata (dipende dal reset che utilizzate, è sempre meglio verificare) e diamo un po' di colore agli elementi -- giusto per distinguerli -- e ai link:
div#comments-list ol {
margin: 0;
padding-bottom: 10px;
}
div#comments-list {
background: #f2e8d2;
}
div#comments-list h3 {
background: #60504d;
}
div#comments-list ol li {
background: #fff;
}
div#comments-list ol li a {
color: #60504d;
text-decoration: none;
}
div#comments-list ol li a:hover { color: #cc0000; }
Dopodichè, sistemiamo la testata (che abbiamo costruito con l'<h3>):
div#comments-list h3 {
display: block;
margin-bottom: 10px;
padding: 10px;
text-transform: uppercase;
color: #fff;
}
Ecco l'esempio fino ad ora
Domare la lista
Eliminiamo la numerazione dagli elementi della lista (ci torneremo in seguito) e facciamo un po' di spazio sia tra i commenti (<li>) che dentro i commenti stessi (definendo il padding).
Creare spazio vuoto (white-space in gergo): è necessario perché si guida l'occhio verso gli elementi importanti di un design e se ne facilita la lettura.
div#comments-list ol { list-style-type: none; }
div#comments-list ol li {
margin: 0 10px 10px 10px;
border-bottom: 1px solid #afafaf; ;
}
div#comments-list ol li { padding: 10px; }
Applichiamo uno stile quindi ad ogni elemento del commento, ovvero .comment-author, .comment-meta e .comment-text:
div.comment-author {
border-bottom: 1px solid #ededed;
padding-bottom: 5px;
}
div.comment-author a {
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
}
div.comment-meta {
padding: 5px 0;
color: #afafaf;
font-size: .8em;
border-bottom: 1px solid #ededed;
}
div.comment-text {
margin-top: 10px;
}
Notare come .comment-meta sia stato de-evidenziato (riduzione del carattere, riduzione del contrasto tra testo e sfondo) affinché non distolga l'attenzione da elementi principali come l'autore e il testo del commento.
Ecco l'esempio fino ad ora.
Numerazione dinamica
Prima abbiamo re-impostato il list-style-type della lista ordinata affinché non mostrasse il numero degli elementi.
Il motivo sta nel fatto che è oggettivamente più complicato disegnare una lista complessa che mantenga intatti i suoi "bullet", e questo è molto più vero per quanto riguarda le liste ordinate. Anche nel caso delle liste non ordinate si è soliti comunque cancellare i bullet e re-introdurli come immagini di sfondo, proprio perchè più versatili da gestire.
Ma visto che nel nostro caso non si può gestire una lista ordinata attraverso le immagini di sfondo, esiste un alternativa? Sì, e al 100% puro CSS: i counter e i contenuti generati.
I counter -- contatori in italiano -- sono gestiti attraverso due proprietà:
- counter-reset: countername; inizializza/azzera il contatore di nome countername.
- counter-increment: countername; incrmenta il contatore countername, per ogni istanza dell'elemento a cui applicata.
Questo significa, ad esempio, che se io ho una lista di n elementi del tipo:
<ul>
<li>1</li>
<li>2</li>
.
.
.
<li>n</li>
</ul>
con la seguente regola CSS:
ul { counter-reset: cont; }
ul li { counter-increment: cont; }
Ad ogni elemento verrà associato un valore del contatore, ovvero 1 per il primo, 2 per il secondo, 3 per il terzo e cosÏ via. In italiano il precedente foglio di stile dice "Crea il contatore di nome cont e inizializzalo a 0, dopodichè, per ogni elemento <li> incrementalo di 1".
E per stamparlo nella pagina? Attraverso il contenuto generato, cosÏ:
ul li:before { content: counter(cont); }
Semplice vero? Adesso riportiamo tutto alla lista dei commenti.
Per prima cosa, inizializziamo il contatore:
div#comments-list ol { counter-reset: numcomm; }
dopodichè, lo incrementiamo ad ogni commento:
div#comments-list ol li.comment { counter-increment: numcomm }
E infine lo stampiamo dove più ci torna comodo, ad esempio prima del nome dell'autore:
div#comments-list ol li.comment div.comment-author a:before {
content: counter(numcomm);
}
Adesso basta applicare un po' di stile a piacere, per integrarlo nel design:
div.comment-author a:before {
background: #60504d;
color: #fff;
padding: 0 5px;
margin-right: 10px;
font-weight: normal;
}
Ed ecco conclusa la nostra zona dei commenti.
Trackback
Per quanto riguarda i trackback, la cosa migliore è sempre quella di tenerli separati dal normale flusso dei commenti perchè spezzano la lettura. Nel caso però che limiti tecnologici vi impongano di mantenerli, basta applicare una classe speciale .trackback ai <li> della lista ordinata e usarla per cercare di metterli in secondo piano rispetto al resto -- secondo lo stesso principio che abbiamo usato in precedenza per .comment-meta.
Ecco dunque il markup:
<li class="trackback">
<div class="comment-author"><a href="#">Pippo</a></div>
<div class="comment-meta">Scritto il 12 settembre</span> <a href="#" title="Permalink">Permalink</a></div>
<div class="comment-text">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vitae mauris nec dolor sodales pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
</li>
Ed ecco un po' di stile per abbassare il contrasto e per togliere data e permalink (che sono superflui):
li.trackback { color: #afafaf; }
li.trackback div.comment-meta { display: none; }
Visto che abbiamo poi imparato ad usare i contatori, possiamo applicarli anche ai trackback in modo che siano conteggiati a parte.
Per farlo occorre inizializzare un nuovo counter e regolarlo affinché incrementi solo sui trackback:
div#comments-list ol { counter-reset: numtrack; }
div#comments-list ol li.trackback { counter-increment: numtrack }
div#comments-list ol li.trackback div.comment-author a:before {
content: "trackback " counter(numtrack);
}
Notate come i contatori utilizzati in precedenza per i commenti bersagliassero specificatamente li.comments invece che semplicementi lì.
Ecco l'esempio svolto fino ad ora.
Evidenziare l'autore del blog
Un'altra caratteristica carina in cui è facile imbattersi è quella dei commenti evidenziati per l'autore del blog.
La tecnica si basa sulla marcatura dinamica del commento da parte della piattaforma di blogging con una classe speciale, tipo .author. Ad esempio WordPress, che è abbastanza diffuso, mette a disposizione degli sviluppatori i template tag, che non sono altro che piccoli snippet di codice da inserire nei propri temi che servono per generare dei contenuti dinamici.
Dando quindi per scontato che il vostro tema marchi un commento con la classe .author, diventa facile evidenziarlo:
div#comments-list ol li.author { outline: 1px solid #cc0000; }
div#comments-list ol li.author div.comment-author a:after {
content: "autore";
color: #cc0000;
font-weight: normal;
text-transform: none;
font-size: .8em;
letter-spacing: 0;
margin-left: 10px;
}
Ecco l'esempio all'opera.
Conclusioni
Quanto sviluppato fino ad ora, visivamente parlando, è solo un esempio, in quanto la grafica della zona commenti va di pari passo con la grafica del vostro tema. Se cercate ispirazioni potreste trovare utili alcune showcase di design pattern, come PatternTap e DesignSnips.
Lo scopo principale di questo articolo resta quello di mostrare come sia possibile ricreare complesse liste ordinate attraverso i contatori e i contenuti generati. Per referenza, e per altri spunti, tenete sempre a portata di mano il manuale ufficiale del w3.
Per quanto riguarda la compatibilità cross-browser, funziona perfettamente tutto con Firefox/Gecko, Safari/Webkit (e quindi anche il nuovo Chrome di Google) e Opera. Internet Explorer purtroppo non supporta né contatori né contenuto generato: ma niente paura perché le parti interessate verranno semplicemente ignorate senza andare a rompere il layout della pagina.
Tutti gli esempi visti sono raccolti in questo file zip.
