CSS  »  Articoli  »  Effetti con CSS 

Il 19 agosto scorso l'Alertbox di Jacob Nielsen, stranoto guru dell'usabilità, aveva un tono e un titolo davvero batteglieri: "Facciamo scegliere agli utenti la dimensione dei font".

Premessa: un testo troppo piccolo è una specie di catastrofe dell'usabilità. I costruttori di software non rendono facile, da questo punto di vista, la vita del povero utente. Nielsen ricorda i bei tempi di Explorer 4, browser che aveva ben visibile sulla barra degli strumenti un comodo pulsante per ridimensionare il testo, tutto per il piacere della nostra vista. Questa feature è sparita nelle versioni successive di Explorer. Meglio: si è nascosta tra i menu del browser, mandando al diavolo la facilità d'uso e l'intuitività.

Un utente che voglia ingrandire il testo in Explorer 5/6 deve compiere ben 6 operazioni contro il semplice click della versione 4. Last, but non least, ci si mettono quei maledetti dei web-designer che usano addirittura i CSS, strumento definito da Nielsen "harmful", ovvero pericoloso e dannoso. Se si imposta la dimensione in pixel gli utenti di Explorer per Windows non potranno ridimensionare il testo nemmeno con la complicata manovra in sei passi che parte dal menu "Visualizza".

Su questo punto Nielsen toppa alla grande. In Mozilla, Netscape 6, Opera, Explorer 5 Mac e su tanti altri browser, è possibile ridimensionare anche il testo espresso in pixel. Semplicemente: qui i CSS non c'entrano nulla, è Microsoft che ha incredibilmente mantenuto questo comportamento assurdo sul suo browser di punta.

Per il resto le considerazioni sono tutte sensate e giuste, così come la battaglia che Nielsen ha intenzione di promuovere per sollecitare Microsoft a tornare sui suoi passi. Il punto di partenza rimane: ridimensionare il testo è complicato, poco intuitivo. Non conosco l'esistenza di statistiche su questo aspetto, ma credo che non siano molti gli utenti che sanno davvero che si può fare e come si può fare.

Sollecitato da questa lettura, mi sono detto: ma è possibile offrire agli utenti una soluzione semplice a questo problema? La risposta è ovviamente si. Ma essa dovrebbe per me avere alcuni requisiti:

1. La formattazione del testo va fatta con i CSS
2. L'unità da usare sono i pixel, perchè alla fine pongono meno problemi di compatibilità cross-browser
3. L'opzione deve essere visibile e facile da usare
4. Il ridimensionamento deve essere dinamico e al volo

Tecnicamente, il tutto si può realizzare con la combinazione di Javascript e CSS, che a dispetto di quanto affermato da Nielsen, sono uno strumento flessibile e facilmente modificabile. A livello di layout e organizzazione del documento si può pensare a un piccolo pannello da cui si possono impostare questa e altre opzioni di visualizzazione. Prima di passare all'esame della nostra applicazione, vediamo le possibili alternative.

Usare stili alternativi

Una prima soluzione potrebbe essere quella di usare fogli di stile alternativi. In pratica, si impostano un CSS principale e uno o più alternativi, tramite l'attributo "rel", che conterranno dimensioni dei font diverse dal primo:

<link rel="stylesheet" title="main" type="text/css" href="stile_principale.css" />

<link rel="alternate stylesheet" title="altstyle" type="text/css" href="stile_alternativo" />

Lo stile definito come "alternativo" viene caricato solo a richiesta, con poche righe di Javascript. Per un esempio di utilizzo e per il codice Javascript, potete, tra gli altri, visitare il sito di A List Apart, la webzine curata da Jeffrey Zeldman.

Questo approccio ha secondo me un punto debole: se vogliamo offrire molte opzioni e dare dinamicità è necessario scrivere diversi CSS. Per il resto funziona bene.

Usare il DOM: getElementById

Una seconda tecnica sfrutta il DOM per rintracciare e modificare gli attributi di un determinato elemento con l'istruzione getElementById (altri metodi sono possibili, questo è il più semplice). Lo svantaggio di tale opzione è che così si possono modificare solo gli stili detti "inline", ovvero quelli definiti tramite l'attributo "style":

<div id="contenuto" style="font-family: Arial, Helvetica; font-size: 18px;">

O quelli in cui la dimensione sia impostata direttamente con Javascript. Un articolo presente sul sito di Apple Developer potrà chiarirvi molti aspetti della questione.

Concludendo, questa tecnica non ci consente di sfruttare gli enormi vantaggi dei CSS esterni, sui quali non ha alcun effetto.

Noi useremo invece un altro metodo, molto più diretto. Vediamolo.

Altri articoli

Altre guide

Altre newsletter