|
1. Cosa si può fare con i fogli di stile
Rispetto ai markup fisici di HTML e in particolare al tag <font>, i fogli di stile in cascata offrono moltissime possibilità, tanto che uno studio di tutte le loro funzioni richiederebbe un impegno paragonabile a quello speso per imparare HTML. A differenza di quest'ultimo, però, i fogli di stile possono essere conosciuti un po' alla volta, esplorandone le funzioni a mano a mano che se ne presenti l'occasione e aggiornando il sito gradualmente, ogni volta che si scopra qualcosa di nuovo. C'è anche un altro motivo per procedere con calma: la gran parte dei browser in circolazione sono pienamente compatibili con le specifiche dei CSS di livello 1, ma non supportano ancora appieno i CSS di livello 2 che aggiungono una pletora di nuove funzioni, specie nella gestione di contenuti multimediali. Di conseguenza conviene partire studiando le funzioni di livello 1 (che costituiscono l'argomento centrale di questa lezione) per poi estendersi al livello 2 in un secondo momento.
Il prezzo da pagare per l'adozione dei CSS è l'aggiunta di un nuovo linguaggio alla propria cassetta degli attrezzi e al proprio sito, con la necessità d'imparare complesse regole astratte che governano ereditarietà ed effetto a cascata, producendo talvolta anche effetti imprevedibili e incostanti, difficili da diagnosticare e risolvere anche per i limiti di molti editor HTML oggi in circolazione, non dotati di specifiche utilità per la gestione dei CSS. L'unico programma che contenga una funzione diagnostica specifica per i CSS è Top Style 3.0, che funge anche da editor testuale per pagine HTML, senza tuttavia rimpiazzare un vero e proprio ambiente visuale. Di conseguenza costituisce un investimento aggiuntivo.
La natura tipografica degli stili
Il primo ambito d'intervento dei fogli di stile è nell'impostazione degli attributi tipografici del testo. Non solo possiamo scegliere la font, il colore e le dimensioni del carattere, come avveniva nel tag <font>, ma possiamo anche stabilire con precisione l'altezza di ogni lettera, usando diverse unità di misura, il peso delle stesse (sottile, normale e grassetto), la spaziatura, l'interlinea, eventuali bordi, attributi come il corsivo e il maiuscoletto, effetti particolari come il sottolineato, il barrato e molto altro ancora.
Nel caso si tratti di testo usato per collegamenti ipertestuali, possiamo anche modificarne l'aspetto quando vi passi sopra il cursore e una volta che sia stato visitato. Inoltre, anziché ripetere in continuazione il tag <font> per ogni elemento, sarà sufficiente stabilire una volta sola per l'intero sito l'aspetto del testo, dei titoli e dei link, per avere un'estensione automatica delle specifiche a tutte le pagine. Anche la gestione delle tabelle viene potenziata e semplificata enormemente, potendo definire attributi globali a livello di tabella, di riga e di cella.
Per comprendere i vari termini usati nella definizione di questi attributi bisogna conoscere un po' di tipografia. Tanto per cominciare, la proprietà più comune, font-family, descrive la famiglia di font scelte per quel particolare brano di testo. Si parla di famiglia poiché si compone di tanti insiemi di caratteri con dimensioni diverse, ciascuna delle quali prende il nome di font. Tipograficamente, quando s'ingrandisce un carattere o lo si rimpicciolisce, si cambiano anche le caratteristiche delle varie lettere che lo compongono per adattarsi al diverso effetto visivo prodotto dalle nuove dimensioni.
La scelta di una singola font all'interno della famiglia avviene quindi mediante la proprietà font-size che identifica l'altezza delle lettere maiuscole per il particolare insieme che abbiamo scelto.
Tale altezza può essere espressa in pixel, bloccando la visualizzazione del testo a una dimensione precisa sullo schermo. Si ottiene così il pieno controllo della visualizzazione del sito e s'impedisce all'utente di modificarla agendo sulle funzioni di dimensionamento previste dal browser.
Lo svantaggio è di complicare la vita a chi abbia difficoltà di lettura e di rendere imprevedibile l'effetto in stampa. In alternativa i CSS offrono altri due tipi di unità di misura: assolute e relative. Le unità assolute definiscono un valore rigoroso, alla pari dei pixel, ma facilmente riconoscibile anche dalla stampante: millimetri, centimetri, pollici, pica e punti (un pica corrisponde a 12 punti tipografici). Queste ultime due sono entrambe unità di misura tipografica e sono da preferirsi alle misure in pixel se volete anche stampare le pagine Web su carta senza sorprese. Nella pratica 9 punti corrispondono a 12 pixel (la misura più leggibile per un testo lungo sia a video sia in stampa), 8 punti corrispondono a 10 pixel, una misura adatta per le didascalie, e via di questo passo.
Le unità relative lasciano invece libero l'utente di ridimensionare il proprio testo, mantenendone tuttavia le proporzioni rispetto al resto della pagina. Si prestano alla creazione di effetti speciali. Ad esempio possiamo decidere di impostare il testo grassetto in modo che sia leggermente più grosso del testo normale utilizzando l'unità di misura em che in tipografia indica le dimensioni della M maiuscola di un determinato font, in pratica la lettera più larga dell'intera font rispetto alla quale si misurano tutte le altre. Impostando il grassetto in modo che sia 1.1 em avremo un grassetto più corposo perché leggermente più grande della font normale. Basta indicare b {font-size: 1.1 em} perché tutti caratteri bold dell'intero sito, non importa quale font e quale dimensione, vengano maggiorati del 10% rispetto agli altri caratteri del testo in cui sono contenuti: una finezza facile da realizzare che può migliorare la leggibilità del testo.
A qualsiasi elemento HTML, testo compreso, è possibile poi abbinare bordi, sfondi colorati addirittura immagini di sfondo, con un controllo molto preciso sulla forma e la posizione degli stessi. Ad esempio possiamo realizzare un testo bordato solo su tre lati. È anche possibile infine determinare con precisione la posizione degli elementi rispetto ad altri elementi contigui e rispetto al canovaccio complessivo della pagina. Purtroppo tutta questa libertà ha un prezzo: la potenziale incompatibilità con i browser più vecchi e anche, per alcuni casi, con le versioni più recenti.
Confronto tra CSS e <font>
Qui vediamo la grande varietà di unità di misura e di effetti che si possono produrre con i fogli di stile rispetto alle ristrette prerogativa del tag <font>, il quale può determinare unicamente il tipo di font, il colore e la dimensione relativa (size) in rapporto al default del browser.
Con i fogli di stile possiamo invece replicare esattamente il comportamento delle misure relative di font, mediante gli attributi relativi small, medium, large, eccetera; ma possiamo anche imporre una dimensione fissa in pixel o punti tipografici (quest'ultima preferibile se vogliamo poi anche stampare le pagine). Possiamo anche maggiorare le dimensioni di una particolare porzione di testo (il grassetto "maggiorato" è del 10% più grande del testo normale a cui è abbinato), possiamo infine raggiungere dimensioni assolutamente inarrivabili con il tag <font> e aggiungere bordi, variamente colorati e strutturati, sfondi a tinta unita oppure composti da immagini e possiamo anche restringere o allargare lo spazio tra le lettere e le parole, anche se quest'ultima funzione non è supportata da Opera 5.0 e Netscape 7.

Font a dimensione variabile e fissa
Se proviamo a incrementare la dimensione delle font usando il comando interno di Internet Explorer (Visualizza > Carattere > Molto grande) vediamo che il testo demarcato con il tag <font> e con i fogli di stile impostato a dimensione proporzionale diventa più grande, non cambia invece il testo governato dalle regole di sitle con dimensione fissa (pixel e punti).

Netscape 7 quasi compatibile
L'ultima versione di Netscape riesce a riprodurre quasi tutte le funzioni di CSS con la sola eccezione del testo ridotto in larghezza che semplicemente scompare (il brano "55 punti" visibile nella videata sopra).

Opera 5.0 ci riesce quasi
A differenza di Netscape, il browser norvegese riconosce la presenza di un testo ristretto nella spaziatura tra le singole lettere e le singole parole, ma non riesce a riprodurlo correttamente.

La pagina con cui è stato creato questo esempio si trova sul CD alla voce "Font e CSS",
|