EspertoWeb

In principio era il tag...

francesco leonetti

Piccola storia sul perché oggi il CSS è importante

Quando Gesù giocava ancora per strada a palline, tale Tim Berners Lee creò la cosa che noi oggi chiamiamo "Web". All'epoca lui non si rese conto di quello che aveva fatto. Le pagine erano essenzialmente fatte di testi. Fu proprio l'idea di "ipertesto" ad ispirare peraltro il web. "http" sta infatti per: "HyperText Transfer Protocol", e doveva dunque servire come protocollo standard di trasmissione di ipertesti, le pagine web, appunto.

Per la definizione della pagina fu introdotto un linguaggio (HTML) che permetteva di dare una struttura al testo. Ad esempio si poteva dire: "qui ci va un titolo grande" oppure: "qui ci deve stare un paragrafo", o anche "qui vai a capo", esprimendolo con i rispettivi tag: H1, P, BR, etc.

HTML andava più che bene per delle pagine che tutto sommato dovevano servire a comunicare pubblicazioni scientifiche tra accademici.

Ben presto però la situazione sfuggì di mano. Il web piacque anche al di fuori delle università e il mondo della ricerca. Gli studenti cominciarono ad appropriarsene e le aziende ne intuirono la portata e stettero al gioco. Il web diventò un fenomeno di massa!

Il buon Mosaic che era capace di intendere solo l'HTML puro di papà Lee, non andava più bene, così come l'HTML stesso non bastava più per soddisfare le nuove esigenze di comunicazione.

Le pagine dovevano essere più ricche di immagini ed effettivi visivi, più vicine ad un rotocalco che ad una pagina della Gazzetta Ufficiale.

Qui cominciarono i problemi veri. A fianco degli sviluppatori puri (notoriamente dei caproni in fatto di design, comunicazione visiva, scelta dei colori, etc.) entrarono infatti in campo i “grafici”, i “creativi”, gli “art director”, che il giorno prima progettavano manifesti, depliant, locandine, brochure, copertine di giornali, loghi aziendali e ora venivano chiamati a “vestire” pagine web.

Ovviamente non poterono pensare di meglio che continuare a fare il loro lavoro, solo che invece che essere rappresentato sulla carta, sarebbe andato su uno schermo. Questo equivoco portò ad alcuni primi disastri a cui il CSS ha poi cercato di porre rimedio.

Lo schermo di un computer non è un pezzo di carta.

Tutti se ne accorsero subito, attratti però più dalle cose in più che uno schermo offriva, rispetto alle differenze di sintassi della comunicazione dei due media.

Nacque l'esigenza di strutturare non solo il testo ma anche l'intera pagina.

In inglese si dice: “layout a document”. Definire cioè l'aspetto e la forma della pagina, non solo il contenuto e la struttura in titoli e paragrafi.

Insomma, dal semplice strutturare un testo si voleva ora impaginare l'intero documento come si era abituati a fare per le copertine delle riviste, con in più gli effetti visivi che solo lo schermo di un computer poteva offrire.

Netscape e Microsoft fecero “ciao ciao” all'HTML standard di Berners Lee e cominciarono ad introdurre dei tag propri (definiti appunto: “proprietari”) per consentire agli sviluppatori di pagine web di estendere la ricchezza espressiva con cui costruire la pagina.

Microsoft ad esempio propose il tag BLINK, che permetteva di far lampeggiare un testo. Il tag MARQUEE che permetteva di farlo scorrere orizzontalmente, come i titoli di coda, etc.

Netscape introdusse il famigerato tag FONT (poi accettato anche da Microsoft).

Erano però tag che venivano interpretati correttamente o dal browser Internet Explorer o da Netscape. Raramente da entrambi.

Questa “battaglia sommersa” tra i browser la stiamo pagando ancora oggi, anche sui CSS.

Questi tag vennero messi in mano ai grafici e agli sviluppatori che li usarono come i bambini con il loro primo giocattolino.

Il peggio arrivò quando Microsoft introdusse il primo editor visuale di pagine web, per consentire a chiunque di definire pagine senza conoscere un acca di HTML: l'era di “FrontPage”.

L'intreccio tra tag che definiscono il layout e quelli di struttura fu mortale per la manutenzione e lo sviluppo di pagine web.

Il tag FONT, ad esempio, fu davvero micidiale. Questo tag fu introdotto per riuscire a formattare in modo più ricco e variegato i testi, per definirne il colore, la dimensione, il font, appunto.

Il codice delle pagine web fu inondato di tag FONT, spesso si dimenticava di chiuderlo, spesso veniva nidificato in modo abnorme, e tutto questo lo si pagava caramente quando il committente diceva: “hmm... non mi piace più con questo colore e con questa dimensione. Si può cambiare?”.

Una perla di sudore freddo scendeva dalla fronte degli sviluppatori tutte le volte che veniva loro chiesto di rimettere mano a quella poltiglia di codice spaghettato che allora definiva una pagina web “bella da vedersi”. Anzi, più la pagina era bella da vedersi, più intricato era il codice sottostante che la definiva.

Altra bestia nera del codice delle pagine web “old-style” e' il tag TABLE.

Non esistevano infatti tag appositi per riuscire ad impaginare gli elementi della pagina, ad esempio con un layout del tipo: “intestazione-due-colonne-piede” e magari all'interno di ciascuna colonna ulteriori elementi a loro volta strutturati in: “immagine-a-sinistra-testo-immagine-a-tutta-larghezza-testo-etc”

La soluzione più immediata è stata approssimare il layout desiderato attraverso la costruzione di tabelle (con il tag TABLE e affni, appunto).

Ma il tag TABLE, in origine, era stato pensato per strutturare dei dati, non un'intera pagina.

L'uso forzato delle tabelle, con nidificazioni di sotto-tabelle all'interno delle celle, espansioni di righe e di colonne (attraverso i tag COLSPAN e ROWSPAN), hanno generato mostri di codice inestricabile.

Ma oltre al codice intricato, ancora peggio è il fatto che pagine codificate in quel modo, mandavano in crisi i lettori automatici di schermo, i programmi cioè usati dai ciechi per ricevere attraverso una voce sintetica la descrizione della pagina e del contenuto in quel momento presentata sullo schermo.

Questi non riuscivano infatti a interpretare in modo corretto la struttura nidificata di tabelle con cui era definita la pagina, così come gli altri elementi di layout che venivano confusi come tag di struttura.

In pratica, la pagina non era “accessibile”.

Siccome il CSS aiuta a rendere il layout della pagina distinto dalla struttura e dal contenuto e ad evitare utilizzi impropri di tag come TABLE, allora si dice che una pagina realizzata con l'ausilio del CSS abbia maggiori probabilità di essere accessibile.

In realtà non è sufficiente rendere in CSS una pagina web per farla diventare “accessibile” (secondo le varie normative Stanca, WAI, etc.), però è necessario.

Se cioè una pagina web è accessibile, allora senz'altro è stata resa anche con CSS.

Se la pagina web è resa in CSS, non è detto che sia anche accessibile.

I fogli di stile CSS sono stati introdotti per fornire agli sviluppatori delle pagine web un metodo per tenere distinto il contenuto della pagina, la struttura e il suo aspetto/layout.

E' importante avere chiara questa distinzione, non solo concettuale, ma anche fisica.

Lo sviluppo di una pagina in HTML e CSS costringe ad effettuare espressamente questa distinzione.

Il codice HTML deve essere usato solo per definire il contenuto e la struttura del contenuto, il modo cioè con cui questo contenuto è organizzato e raggruppato. Solitamente ciò lo si fa attraverso tag di paragrafo (P), elenchi (UL, OL), gruppi di elementi (DIV, SPAN), eccetera.

Tutto il resto deve essere definito attraverso il codice CSS. Il colore del testo, la sua forma, il suo stile, la posizione di un elemento, la larghezza di una colonna, lo sfondo della pagina, e così via, sono fatti che non competono ad HTML bensì al solo CSS.

Insomma, se la classe non è acqua, lo stile di una pagina lo vedi dal CSS, non dai suoi tag.

comments powered by Disqus

I commenti precedenti