Vai ai contenuti

LAU



Home > realizzare > accessibilità: fogli di stile> Trucchi senza inganno per emulare alcune proprietà di Mozilla


Trucchi senza inganno per emulare alcune proprietà di Mozilla

In questo articolo vengono esposte alcune tecniche grazie alle quali è possibile ottenere lo stesso risultato stilistico su browser diversi senza ricorrere all'utilizzo degli hack.

a cura di: Mario Picarelli | 11 novembre 2005


1. Introduzione

Gli hack sono "inganni" che sfruttano i bug dei parser CSS per impostare istruzioni ad hoc per determinati browser, in modo da appianare divergenze o difetti nell'interpretazione del codice: in questo modo si ottiene una maggiore indipendenza dal dispositivo usato (nella fattispecie, il tipo di browser), e quindi un più alto livello di accessibilità.
Esistono espedienti, ed è il caso delle cinque tecniche prese qui in esame, che raggiungono lo stesso risultato senza ricorrere ad hack.
Le prime due tecniche si basano sul Document Object Model (DOM), che rappresenta la pagina come una gerarchia di oggetti che JavaScript è in grado di scorrere, individuare e manipolare, modificando dinamicamente lo stile degli elementi XHTML.
Le tre tecniche successive sfruttano semplicemente alcune regole CSS.

La prima tecnica produce un effetto di selezione durante lo scorrimento delle righe di una tabella: lo stile viene gestito dinamicamente con un uso combinato di gestori di evento DHTML, JavaScript e CSS. In questo modo, è possibile applicare l'effetto rollover alle righe di una tabella anche in quei browser che limitano l'applicazione della pseudo-classe :hover alle sole ancore.
La tecnica è supportata da tutti i principali browser (IE5.0, IE5.5, IE6.0, Mozilla, Netscape, Opera), ma presenta un inconveniente: l'utente può avere JavaScript disabilitato o non installato.

La seconda tecnica produce un effetto stilistico simil-Excel in concomitanza con la "messa a fuoco" dei campi di input. Viene esteso l'uso della pseudo-classe :focus ai browser che non la supportano. Va notato che i gestori di evento DHTML adoperati (onfocus e onblur) sono indipendenti dal dispositivo (mouse, tastiera, tecnologie assistite), vantaggio notevole dal punto di vista dell'accessibilità.
Questa tecnica è supportata da tutti i principali browser ma, usando JavaScript, presenta lo stesso inconveniente della precedente.

La terza tecnica sfrutta i CSS come alternativa all'uso della proprietà -moz-border-radius per smussare gli angoli senza ricorrere a file grafici. Supportata da IE5.0, IE6.0, Mozilla, Netscape, Opera.

La quarta tecnica permette di centrare automaticamente su IE un box, in alternativa all'istruzione position:fixed, non interpretata correttamente.
Supportata da tutti i principali browser.

La quinta tecnica permette di gestire il livello di trasparenza degli elementi su Mozilla e su Internet Explorer.

torna su

2. Rollover sulle righe di una tabella

I browser Gecko permettono di applicare la pseudoclasse :hover a qualsiasi elemento. Questa opportunità può essere sfruttata per realizzare un effetto "righello" al passaggio del mouse sulle righe di una tabella.

tr:hover {
background-color: #cdcdc5;
}

Per i browser che limitano l'applicazione di :hover alle ancore, occorre JavaScript. Innanzitutto, va definito in un'apposita classe lo stile corrispondente allo stato hover dell'elemento.

.righello {
background-color: #cdcdc5;
}

L'applicazione (o rimozione) dello stile in base alle azioni del mouse viene gestita dal seguente script:

var rows = document.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
rows[i].onmouseover = function() {
this.className += 'righello';
}
rows[i].onmouseout = function() {
this.className = this.className.replace
('righello', ''); } }

Il metodo DOM getElementsByTagName rintraccia nel documento i tag tr e li restituisce in forma di elenco indicizzato. La condizione di ripetizione del ciclo passa in rassegna gli elementi dell'elenco, e le due funzioni si occupano di aggiungere o rimuovere, in risposta agli eventi onmouseover e onmouseout, il riferimento alla classe .righello.

Mediante un simile uso combinato di JavaScript e di DHTML, si potrebbe gestire dinamicamente lo stile di qualsiasi elemento. Tuttavia, nella maggior parte dei casi, questa tecnica rischia di deludere le aspettative dell'utente, abituato a mettere in relazione l'effetto rollover con la presenza di un link. Anche l'effetto "righello" presenta questo inconveniente, ma c'è un attenuante: può facilitare la consultazione delle tabelle. Si immagini una tabella di grandi dimensioni dotata di un sistema di titolazione sia orizzontale che verticale: può risultare faticoso e noioso trovare la cella desiderata in base ai rispettivi titoli. L'effetto "righello" può facilitare il meccanismo "a battaglia navale" di individuazione delle celle.

Comunque, per aggirare con eleganza il rischio di un'errata interpretazione del rollover, l'effetto "righello" può pur sempre essere sfruttato per estendere l'area cliccabile di una cella all'intera riga, come suggerito da Alessandro Fulciniti nell'articolo "JavaScript e DOM sulle tabelle".
Così facendo, il link sarà comodamente attivabile cliccando su un punto qualsiasi della riga. Questa tecnica è simile a quella descritta in questo capitolo, solo che lo script si occupa, oltre che dei cambiamenti di stato, anche della gestione dell'evento onclick.
Tuttavia, per trarre giovamento da questa soluzione, bisogna innanzitutto assicurarsi che la tabella preveda per ciascuna riga una cella contenente il link (e una soltanto, perchè la presenza su una stessa riga di più celle con link renderebbe l'ancoraggio impossibile o, quantomeno, "indecidibile") e, inoltre, occorre che sia congegnata in modo che l'utente possa associare intuitivamente il link alla giusta cella e che non pensi, tratto in inganno dall'estensione dell'area cliccabile, di poter ricavare informazioni ulteriori circa il contenuto delle altre celle della riga, anch'esse di fatto selezionate.

(vedi l'esempio di rollover sulle righe di una tabella)

torna su

3. Selezione delle celle di una tabella

Come ho accennato nell'introduzione, la pseudo-classe :focus permette di selezionare gli elementi da tastiera: vantaggio notevole dal punto di vista dell'accessibilità.
Per i browser con motore di rendering Gecko è sufficiente associare la pseudo-classe all'elemento desiderato e impostare uno stile:

input:focus {
border: 2px solid #000;
}

Questa regola associa alle caselle di input un effetto di selezione simile a quello dei fogli di Microsoft Excel.

Per ottenere lo stesso risultato sui browser che non supportano la pseudo-classe :focus, si può ricorrere ad un semplice script. Due funzioni JavaScript vengono richiamate dinamicamente dagli eventi onFocus e onBlur (connessi rispettivamente all'acquisizione e alla perdita di fuoco), inseriti come attributi all'interno dei tag input.

<input type="text" 
onFocus="selezione(this);"
onBlur="deselezione(this);" />

Ecco lo script per la modifica dinamica dello stile:

function selezione(oggetto) {
oggetto.style.border = '2px solid #000';
}

function deselezione(oggetto) {
oggetto.style.border = '2px solid #fff';
}

La prima funzione (selezione), in risposta all'acquisizione del focus da parte dell'input, applica all'elemento un bordo di colore nero spesso 2 pixel, ottenendo cosė l'effetto simil-Excel. In concomitanza alla perdita di fuoco, la seconda funzione (deselezione) imposta per il bordo un colore identico a quello della cella (nella fattispecie, il bianco), vanificando così l'effetto di selezione.

Con questa tecnica, il risultato è garantito su tutti i principali browser:

(vedi l'esempio della selezione delle celle di una tabella ).

torna su

4. Angoli smussati senza grafica

La proprietà border-radius (corrispettivo CSS3 di -moz-border-radius, supportata per ora solo da Mozilla) viene così definita nel sito ufficiale del W3C:

I due valori della proprietā "border-radius" si riferiscono alla lunghezza dei raggi del quarto d'ellisse che definisce la forma dell'angolo (.) Il primo valore corrisponde al raggio orizzontale (.) Se la seconda lunghezza è omessa, verrà equiparata alla prima (e così l'angolo apparirà come un quarto di cerchio). Se entrambe le lunghezze sono pari a zero, l'angolo apparirà quadrato, non arrotondato.

Tramite la proprietà -moz-border-radius, è possibile definire il livello di arrotondamento degli angoli di un elemento.

#div {
-moz-border-radius: 30px 40px;
}

Il livello di curvatura è definito dalla lunghezza dei raggi orizzontale e verticale di un'ellisse (o di un cerchio, nel caso in cui le due lunghezze coincidano) di cui l'angolo smussato costituisce l'unica porzione visibile a livello di layout. I valori della proprietà -moz-border-radius, impostando la lunghezza dei raggi dell'ellisse, permettono quindi di modellare la curvatura degli angoli del box.

Per i browser che ignorano l'istruzione, l'effetto di curvatura può essere ottenuto giustapponendo una serie di span alti 1 pixel e con un valore di margine via via decrescente.

(vedi l'esempio degli angoli smussati).

Innanzitutto, è opportuno definire una classe, da associare a ciascuno span, in cui stabilire le proprietà comuni a tutti i segmenti.

.curva {
display:block;
height: 1px;
overflow: hidden; 
background: #d4d0c8
}

Nel documento, i singoli span conterranno sia il richiamo alla classe .curva che alla classe creata appositamente per ciascuno di essi.

<span class="curva segmento1"></span>
<span class="curva segmento2"></span>
<span class="curva segmento3"></span>
<span class="curva segmento4"></span>

In questo modo, sfruttando il meccanismo di lettura "a cascata" dei fogli di stile, solo alcuni valori della classe .curva saranno "sovrascritti" dalle definizioni di stile specifiche di ciascuno span, mentre i valori non specificati verranno ricavati dalla classe comune. Questo accorgimento permette di snellire il codice evitando inutili ripetizioni.

Innanzitutto, per gli span va fissato un valore di margin destro e sinistro di volta in volta inferiore.

.segmento1{
margin: 0 5px
}

.segmento2{
margin: 0 3px
}

.segmento3{
margin: 0 2px
}

.segmento4{
margin: 0 1px;
height: 2px;
}

Dato che le prime tre classi non precisano un valore per l'altezza, questo verrà ricavato dalla classe comune .curva: si evita in questo modo la fatica e l'ingombro di specificare ogni volta l'istruzione height:1px. La classe del quarto span, invece, imposta un nuovo valore d'altezza. In questo caso, il meccanismo "a cascata" dei CSS viene sfruttato con l'intento opposto: specificare uno stile, "sovrascrivendolo" alla regola comune, piuttosto che generalizzarlo.

Nell'XHTML, segue lo span del contenuto vero e proprio:

<span class="curva contenuto">
bla bla bla</span>

Lo stile del contenuto fissa un'altezza variabile in base allo spazio occupato dal testo:

.contenuto {     
height: auto;
}

L'effetto di curvatura per gli angoli inferiori si ottiene semplicemente invertendo nel documento la disposizione degli span.

<span class="curva segmento4"></span>
<span class="curva segmento3"></span>
<span class="curva segmento2"></span>
<span class="curva segmento1"></span>

Questa tecnica può essere dispendiosa in termini di righe di codice se gli elementi da arrotondare nella pagina sono molti. In questi casi, è forse preferibile sezionare in quattro parti uguali l'immagine di un cerchio e utilizzarle come angoli smussati (si veda il tutorial di Cesare Lamanna "Angoli arrotondati con i CSS").

torna su

5. Centrare un box

Per centrare orizzontalmente nella pagina un elemento, è consigliabile impostarne i margini destro e sinistro ad auto. In questo modo, ogni volta che la finestra del browser viene ridimensionata, la centratura verrà mantenuta fissando automaticamente di volta in volta uno stesso valore per entrambi i margini.

#boxCentrato {
margin-right: auto;
margin-left: auto;
}

Per ottenere questo effetto sui browser incapaci di interpretare correttamente l'istruzione, occorrono un paio di righe di codice in più: la proprietà text-align va settata a center nel body, e poi reimpostata a left nel box da centrare.

body {
margin: 0;
padding: 0;
text-align: center;
}
#boxCentrato { margin-right: auto; margin-left: auto; text-align: left; }

L'istruzione text-align:center definita per il corpo del documento non centra solo il box, ma anche il suo contenuto: in virtù della struttura ad albero dei fogli di stile, infatti, le proprietà ereditarie vengono trasmesse ai discendenti, finchè una regola più specifica non intervenga ad interrompere il flusso. La regola text-align:center centra perciò l'elemento discendente di body, #boxCentrato, ma anche eventuali altri elementi nipoti o pronipoti. Se ad esempio il div contiene testo, a livello di layout ciascuna riga apparirà centrata. Per ripristinare il consueto allineamento a sinistra del testo, è sufficiente settare a left la proprietà text-align del box: i suoi discendenti, testo compreso, erediteranno il nuovo valore.

In questo modo, è possibile centrare nella pagina layout più compositi, inserendo per esempio all'interno del blocco centrato un menu di navigazione.

Una precisazione: non conviene posizionare in maniera assoluta l'elemento annidato. L'istruzione position:absolute estrae infatti l'elemento dal normale flusso di dati del documento e ne rapporta la posizione alla finestra del browser: in questo modo, il vantaggio della centratura automatica si perde. Occore perciò che il sistema di riferimento di ciascun elemento annidato sia il proprio box contenitore. Questo risultato si ottiene semplicemente assegnando al contenitore una posizione relativa, in base alla quale verranno stabilite le coordinate dell'elemento annidato.

#boxCentrato {
position: relative;
text-align: left;
margin-right: auto;
margin-left: auto;
}

#nav {
position: absolute;
top: 2em;
left: 1em;
}

L'elemento posizionato in maniera relativa fornisce il contesto di riferimento delle coordinate dell'elemento annidato con posizione assoluta. In questo caso, le istruzioni top e left del box #nav (position:absolute) si riferiscono alla posizione del div contenitore #boxCentrato (position:relative): per esempio, il valore 2em indica la distanza verticale rispetto al margine laterale sinistro di #boxCentrato.

torna su

6. Gestione del livello di trasparenza

La proprietà opacity, supportata solo da Mozilla, imposta il livello di trasparenza degli elementi: i valori possibili sono compresi tra 0.0 (totale trasparenza) e 1.0 (totale opacità)
IE ottiene lo stesso effetto ricorrendo ad un filtro alpha: in questo caso, i livelli di trasparenza sono compresi in una scala da 0 a 100.
Per rendere la proprietà compatibile con entrambi i browser, è sufficiente inserire nel CSS entrambe le istruzioni.

#trasparente { 
filter: alpha(opacity=70); 
opacity: 0.7; 
}

Nell'esempio, la trasparenza del box è stata impostata a 70%.

torna su

7. Webografia

Rollover sulle righe di una tabella

JavaScript e DOM sulle tabelle
Articolo da cui è tratta la tecnica descritta.
In questo caso, però, l'effetto "righello" è sfruttato principalmente per estendere l'area cliccabile del link di una cella all'intera area della riga della tabella: per ottenere questo risultato, lo script, oltre ad associare agli eventi onmouseover e onmouseout il cambiamento di stile della riga, si occuperà anche della gestione dell'evento onclick.

Suckerfish Dropdowns
Un uso alternativo di questa tecnica, che consiste nell'applicare la pseudo-classe :hover ai tag <li>, in modo da visualizzare dei menu a tendina (i cosiddetti "suckerfish dropdowns") al passaggio del mouse.

Selectors in Cascading Style Sheets, level 2 - CSS2 Specification
Descrizione della pseudo-classe :hover nel sito ufficiale del W3C.

Selezione delle celle di una tabella

Formularbutton mit Hover-Effekt
Articolo da cui è tratta la tecnica qui descritta, con due differenze: nell'articolo di Peter Bergner, le funzioni gestiscono (oltre alle proprietà del bordo) il colore di sfondo e il colore del testo e, in secondo luogo, sono associate agli eventi onmouseover e onmouseout piuttosto che a onfocus e onblur.

Simple Tricks for More Usable Forms
Un'altra tecnica JavaScript, più complessa, per ottenere l'effetto di focalizzazione.

Interazione ed eventi in JavaScript – II
Un altro modo per ottenere con JavaScript l'effetto di focalizzazione.

Hack CSS - Come implementare la pseudo classe 'focus' applicata ai link anche su Internet Explorer
Alcune considerazioni sull'accessibilità della pseudoclasse :focus.
Nell'impossibilità di riprodurre su IE l'effetto della pseudo-classe :focus, l'articolo propone di aggirare il problema impostando uno stesso stile per gli stati :focus, :active e :hover delle ancore. In questo modo si ottiene la differenziazione dei link su tutti i browser, sia da mouse che da tastiera, ma non viene presa in considerazione l'ipotesi che :focus possa essere abbinato ad elementi diversi dalle ancore (possibilità non supportata, come si è visto, da tutti i browser).

Cascading Style Sheets, level 2 - CSS2 Specification / Selectors
Descrizione della pseudo-classe :focus nel sito ufficiale del W3C.

Script / Progettare documenti per programmi utente che supportano linguaggi di script / Eventi intrinseci
Definizione degli eventi onfocus e onblur, tradotto dal sito del W3C.

Angoli smussati senza grafica

Angoli arrotondati senza immagini – I
Tutorial da cui è tratta, con alcune modifiche, la tecnica qui descritta per ottenere angoli smussati senza ricorrere ad immagini.

Angoli arrotondati senza immagini – II
Un metodo (purtroppo non supportato da Internet Explorer versione 5 o 5.5) per arrotondare gli angoli senza immagini sfruttando la funzione Rounded di JavaScript.

Angoli arrotondati con i CSS
Produrre l'effetto di smussatura degli angoli su IE con due o con quattro immagini.
L'articolo illustra il vantaggio di ricorrere a quattro immagini piuttosto che a due: utilizzandone due (una per gli angoli superiori, una per gli angoli inferiori) si ottiene un box a larghezza non modificabile, giacché la dimensione viene imposta dalle immagini; ricorrendo a quattro immagini, invece, è possibile ottenere un box fluido.

CSS3 Backgrounds and Borders Module
Descrizione della proprietà CSS3 border-radius, corrispettiva di -moz-border-radius (per adesso di proprietà di Mozilla), nel sito ufficiale del W3C.

Ten CSS tricks you may not know / Two classes together
Come collegare più classi CSS ad un unico elemento.

Centrare un box

Tabelle addio
Rassegna di istruzioni per gestire le componenti di un layout con i CSS senza ricorrere alle tabelle.
Nella sezione dedicata all'allineamento centrale, è descritta la tecnica esaminata nel presente capitolo.

Come porre un box al centro della pagina
Un'altra tecnica per centrare i box, sia orizzontalmente che verticalmente.
Innanzitutto, l'angolo superiore sinistro del box viene collocato al centro della pagina, posizionando il box in maniera assoluta con valori di top e left pari a 50%. Infine, vengono fissati per i margini superiore e sinistro del box valori negativi pari, rispettivamente, alla metà dell'altezza e alla metà della larghezza del box stesso.

Posizionamento Dinamico
Posizionamento dinamico e panoramica sulle regole CSS per realizzarlo.

Gestione del livello di trasparenza

Effetti di trasparenza ed opacità con i CSS
Articolo da cui è stata tratta la tecnica qui descritta.

CSS3 Color Module
Descrizione della proprietà CSS3 opacity (per adesso supportata solo da Mozilla) nel sito ufficiale del W3C.

torna su

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]