2.45
<body text : Colore del testo Se non viene specificato alcun colore per il testo, il colore predefinito nel markup HTML è il nero.
Tuttavia, il nero potrebbe non essere sempre leggibile su tutti i colori di sfondo. Ad esempio, immaginiamo di voler utilizzare il nero come sfondo: con la pagina nera e il testo nero, non sarebbe possibile leggere nulla!
Abbiamo la possibilità di assegnare un colore al testo per l’intera pagina, semplicemente utilizzando l’attributo nel tag <body>:
<body text="red"> Pertanto, potremmo avere, ad esempio:
<body bgcolor="#0000ff" text="#ffffff"> come nell’esempio visualizzabile in questa pagina.
HTML : Color Link Spiegare cosa siano i link può sembrare superfluo; infatti, l’esperienza di navigazione nel Web ci ha già insegnato che il link è un collegamento, un ponte tra una pagina e l’altra.
Tuttavia, non tutti sanno che i link testuali hanno diversi stati:
Stato Codifica in HTML 4.01 Descrizione Collegamento normale link Normalmente, quando il link si trova “a riposo”, viene evidenziato in qualche modo all’interno della pagina HTML per facilitare l’individuazione da parte dell’utente. Nell’HTML tradizionale, il link è sempre sottolineato (la sottolineatura può essere eliminata solo con l’uso dei CSS). Di default, i link sono blu (#0000FF). Collegamento visitato visited Un link è considerato visitato quando l’URL della pagina compare nella cronologia dell’utente. Di default, i link visitati sono di colore violetto (esattamente #800080). Collegamento attivo active Il collegamento è attivo nel momento in cui viene cliccato e si sta passando da una pagina all’altra. Questa caratteristica potrebbe non essere particolarmente utile oggi, ma quando i modem avevano velocità molto inferiori rispetto a quelle odierne, vedere un link “attivo” era comunque un’indicazione che qualcosa stava accadendo. Inoltre, con Internet Explorer, è possibile vedere una linea tratteggiata attorno al collegamento attivo. Un’altra condizione in cui un link è considerato “attivo” è quando si utilizza il tasto destro del mouse su di esso. In sostanza, un link è attivo quando “ha il focus”. Collegamento al passaggio del mouse assente Con l’HTML 4.01, al passaggio del mouse sul link, non si può fare molto. Tuttavia, con l’uso dei fogli di stile è possibile creare alcuni effetti di visualizzazione utilizzando la parola chiave “hover” nei CSS. Abbiamo quindi tre stati canonici dei link (link a riposo, link attivo e link visitato) e una condizione aggiuntiva introdotta dai fogli di stile (stato del link al passaggio del mouse):
Anche il colore dei link per l’intera pagina può essere impostato tramite gli attributi del body:
<body link="red"> Per cambiare il colore dei link visitati (di default, viola):
<body vlink="green"> I link visitati vengono memorizzati nella cronologia del browser, quindi se si desidera ripristinare il colore originale dei link, è sufficiente cancellare la cronologia.
Per cambiare il colore dei link attivi:
<body alink="yellow"> La sintassi completa per impostare i colori dei link è quindi:
<body link="red" alink="yellow" vlink="green">
CSS checkbox style: la tecnica di base
Gli esempi che andremo via via analizzando e che sono disponibili in allegato per il download condividono l’approccio di base. Sono infatti tutti fondati sul cosiddetto ‘checkbox hack’, argomento cui abbiamo dedicato nei mesi scorsi un articolo che va considerato rispetto al tema di questo un fondamentale prerequisito. Per non appesantire questo articolo con inutili ripetizioni, ad esso rimandiamo per i dettagli tecnici.
Altra lettura vivamente consigliata è quella della lezione dedicata ai selettori di relazione della guida CSS3.
La prima applicazione di questo semplice trucchetto alla personalizzazione di checkbox e radio button è stata presentata in un tutorial di CSS Ninja. Tutte le varianti che vedremo nel nostro articolo e quelle che potrete rintracciare in rete sono di fatto derivazioni dell’esperimento di Ryan Seddon. Cerchiamo dunque di comprendere la tecnica di base.
Essenzialmente, il procedimento si compone di tre fasi:
- nel markup HTML si inserisce un input (
checkboxoradio) con unalabelassociata; - si nascondono i checkbox e radio button standard, ovvero quelli che presentano l’aspetto caratteristico di ciascun sistema operativo;
- si sostituiscono i controlli iniziali con controlli personalizzati nella grafica che nel loro funzionamento emulano i checkbox e i radio button.
Perché tutto possa funzionare è necessario strutturare il markup in un modo preciso. Tutti i nostri esempi hanno perciò questa configurazione nel codice HTML:
Il checkbox o il radio button devono precedere immediatamente la label. Quest’ultima va associata all’input corrispondente tramite l’attributo for, che assume come valore l’id dell’input stesso.
Leggi Come personalizare e rendere accessibili Checkbox e Radio buttons.
Usare immagini per personalizzare i controlli Radio button
Le varianti che d’ora in poi analizzeremo possono essere suddivise in due categorie: quelle che sostituiscono i controlli originali con immagini e quelle che sfruttano il contenuto generato dei CSS. Iniziamo dalla prima.
La tecnica che usiamo nella prima demo è tra le più semplici.
Questo è il markup HTML:
Nel CSS procediamo prima di tutto a nascondere i controlli standard:
Per rispettare il più possibile l’accessibilità, qui e in tutte le demo, usiamo questa soluzione basata sulla proprietà clip al posto di display:none.
I controlli nascosti saranno sostituiti con un’immagine iniziale (‘start.png’) che rappresenta i controlli disattivati. Sarà applicata come sfondo della label:
Padding sul checkbox CSS
Oltre alla riga per la proprietà background, è importante quella per il padding. Per lasciare spazio all’immagine/sfondo, infatti, dovremo usare un padding sinistro adeguato. Il padding sugli altri lati (specie superiore e inferiore) andrà sistemato per ottenere una resa cross-browser consistente rispetto all’allineamento e al posizionamento.
Il cursore sarà di tipo pointer perché l’area è cliccabile.
Ci siamo quasi. Dobbiamo ora emulare il comportamento di checkbox e radio button. Come? Quando clicchiamo e i controlli passano allo stato :checked, l’immagine di sfondo iniziale della label sarà sostituita con quelle specifiche che sceglieremo per i radio button e per i checkbox:
Tutto qui. Dobbiamo solo chiarire un aspetto importante, quello della compatibilità sui vari browser.
L’esempio funziona come è stato concepito su tutti i browser più recenti, compreso IE9. IE7 e IE8, però, non supportano la pseudoclasse :checked. Abbiamo due modi per risolvere:
- usare una libreria Javascript come Selectivizr per estendere il supporto della pseudoclasse su questi browser;
- adottare una strategia di graceful degradation.
Per implementare il tutto è sufficiente comporre tutte le dichiarazioni CSS che riguardano la personalizzazione dei controlli in questo modo:
Dato che IE7 e IE8 non supportano nemmeno la pesudoclasse :not, non interpreteranno le regole precedute da p:not(#foo) >. Questo piccolo snippet va adeguato al vostro markup. Nel nostro caso si è usato p perché gli input sono inseriti in un paragrafo. Se li racchiudete in un div scriverete:
Quindi: si prende l’elemento che contiene gli input, si associa ad esso la pseudoclasse :not, si usa come valore un id non usato in nessuna parte della pagina (nell’esempio #foo, ma può essere pure #blahblahblah). Tutti gli esempi usano questa tecnica.
Per implementare il tutto è sufficiente comporre tutte le dichiarazioni CSS che riguardano la personalizzazione dei controlli in questo modo:
Dato che IE7 e IE8 non supportano nemmeno la pesudoclasse :not, non interpreteranno le regole precedute da p:not(#foo) >. Questo piccolo snippet va adeguato al vostro markup. Nel nostro caso si è usato p perché gli input sono inseriti in un paragrafo. Se li racchiudete in un div scriverete:
Quindi: si prende l’elemento che contiene gli input, si associa ad esso la pseudoclasse :not, si usa come valore un id non usato in nessuna parte della pagina (nell’esempio #foo, ma può essere pure #blahblahblah). Tutti gli esempi usano questa tecnica.
Usare gli sprite
Nella prima demo abbiamo usato per implementare la tecnica tre immagini singole come sfondo. Nulla vieta di usare uno sprite come avviene nel secondo esempio:
La differenza con la prima tecnica consiste nel fatto che quando i controlli sono attivati non si modifica l’immagine di sfondo, ma la posizione dello sfondo in base alla configurazione dello sprite usando la proprietà background-position:
Questo il codice CSS (nell’esempio abbiamo sfruttato solo alcuni stati):
Adoperando gli sprite si guadagna su un versante (una sola immagine invece che diverse), ma si deve porre più attenzione all’allineamento tra la label e il controllo. Ecco la regola che abbiamo dovuto scrivere per posizionare e allineare al meglio l’immagine/sfondo della label rispetto al testo:
I commenti al codice sono sufficienti per rendere chiara la funzione di ciascuna regola.
La questione del posizionamento e dell’allineamento è in effetti uno degli aspetti più insidiosi da affrontare sfruttando questa tecnica (ma in generale nella strutturazione dei form con i CSS). Non solo si deve giocare quasi sempre a livello di pochi pixel, ma ci si scontra sovente con piccole inconsistenze nella resa tra i vari browser che rendono necessario testare sempre con cura per evitare differenze macroscopiche.
Nello specifico della tecnica di cui si parla in questo articolo, molte soluzioni reperibili in rete usano uno span aggiuntivo all’interno della label nel markup HTML come appoggio per i CSS, con la finalità di rendere meno complicata la gestione dei controlli e del loro posizionamento. Il codice HTML assume tipicamente questa forma:
Su questo approccio è basato il terzo dei nostri esempi.