CSS  »  Articoli  »  Effetti con CSS 

Navigazione di paginazione con i CSS

In questo articolo tratteremo la personalizzazione di un elemento piuttosto comune in alcune tipologie di siti web, ma forse troppo spesso trascurato: la navigazione di paginazione, che viene utilizzato per esempio nelle pagine dei motori di ricerca, in siti e-commerce, forum. Dopo alcuni consigli di carattere generale, vedremo un possibile esempio di personalizzazione mediante i fogli di stile: ecco un'anteprima dell'esempio.

Navigazione di paginazione: alcuni consigli

I CSS offrono come sempre moltissime possibilità di personalizzazione di elementi di pagine web, ma in quanto alla navigazione di paginazione ci sono tre punti fermi che andrebbero tenuti sempre presente:

• Il link corrispondente alla pagina corrente dovrebbe essere ben distinguibile dagli altri
• I link delle pagine visitate andrebbero differenziati da quelli ancora da visitare
• Essendo i link dei numeri potrebbero essere poco esplicativi per l'utente: andrebbero quindi accompagnati da un title del tipo "vai alla pagina X".

Come nello screenshot qui sotto, che rappresenta la navigazione di paginazione dell'esempio con alcune pagine visitate:

Fig.1: Esempio di paginazione

La pagina 4 è la pagina corrente, le pagine da 1 a 6 sono gi‡ state visitate, il link alla pagina 7 è in stato :hover e le pagine 8, 9 e 10 sono ancora da visitare. Ma non indugiamo oltre e procediamo con l'esempio.

Il markup

Ci sono molte possibile scelte per la marcatura di una navigazione di paginazione, ma trattandosi di un elenco di link, la scelta migliore è forse una lista. Tra liste ordinate e non, la scelta ricade sulla seconda in quanto in assenza di fogli di stile la numerazione delle liste ordinate potrebbe generare ridondanza e/o confusione nell'utente. Ecco quindi il codice HTML dell'esempio:

Da notare che l'ipotetica pagina corrente dell'esempio, ovverola pagina 4, ha il corrispondente list-item a cui viene assegnato un id="currentpage" così da permettere la differenziazione dagli altri link.

Altri articoli

Altre guide

Altre newsletter