Navigazione di paginazione con i 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:

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.

Il CSS

Siamo quindi arrivati alla parte centrale dell'esempio, ovvero il foglio di stile.
Per prima cosa definiamo le proprietà per la lista; viene assegnato un font di 12px, un margine superiore e
inferiore, viene eliminato il padding e il marcatore di default e viene infine centrato il testo:

Ora i list-item; per poterli affiancare verranno resi inline, e spaziati ulteriormente
attraverso un margine destro:

A questo punto i link; verrà eliminata la sottolineatura, assegnato un bordo, un padding laterale di 3 pixel,
colore di sfondo e testo:

Seguono quindi i link visitati, che saranno resi con sfondo grigio e con colori di testo,
sfondo e bordi differenti da quelli definiti in precedenza:

Ora la fase :hover. Ricordo a tale proposito che la successione delle regole sugli stati dei
link nei CSS dovrebbe essere per una corretta resa :link, :visited, :hover e :active.
In questo caso definiamo solo lo stato visitato e hover, ma devono comunque rispettare questo ordine. Lo sfondo
dei link :hover verrà reso bianco e il testo blue scuro:

Infine la regola relativa al link che punta alla pagina corrente, che risulterà più specifica
di quelle viste in precedenza dato che è composta da due id anziché uno. Verrà eliminato il bordo,
ripristinato il colore di sfondo, assegnato un testo nero e il cursore di default, dato che trattandosi
del link alla pagina corrente non è indispensabile che indichi una transizione di pagina. Risulterà
per l'utente quindi come testo normale, ed eviterà di cliccarci sopra dato che non mostra il tipico
cursore "a manina". Ecco la regola:

Il nostro esempio è così ultimato. È stato testato con successo in
Internet Explorer 5.5, 6 e 7, Opera, Firefox e Safari. Su IE5 la resa non è perfetta, ma è comunque
usabile. Il codice HTML dell'esempio, con il CSS incorporato, è disponibile per il download. Alla prossima.