foto_css

Il “Word Wide Web” nacque attorno agli anni 90, le persone che volevano pubblicare pagine sul Web avevano poco controllo su di queste per quanto riguarda il loro aspetto. Agli inizi gli autori potevano controllare pochi specifici aspetti strutturali delle loro pagine; per esempio qualche pezzo di testo poteva essere di intestazione (heading) e qualche altro di tipo normale, fra gli atri pochi effetti di formattazione c’era la possibilità di rendere i testo bold oppure italic, ecc..

downloadNegli Ambienti scientifici dove il Web era nato, le persone erano più interessate al contenuto dei loro documenti che alla loro presentazione. In un report di una ricerca scentifica, il tipo di font adoperato era di ben poca importanza comparato al risultato della ricerca stessa che veniva pubblicata.
Nel 1994, quando gli autori uscirono dagli ambienti scientifici scoprendo il Web nella sua interezza e potenzialità, le limitazioni che offriva l’HyperText Markup Language (HTML) diventarono presto fonte di frustrazione a causa delle limitazioni che presentava tale linguaggio. Gli autori che presentavano i problemi maggiori erano quelli che provenivano dal mondo dell’editoria, tale utenza voleva il pieno controllo sulla presentazione dei loro documenti,; per esempio volevano essere i grado di poter cambiare il colore del testo, possedere il controlo sulla sua spaziatura, il controllo dei margini, ecc …
Molti Web Designers derivavano da conoscenze sui software di Desktop Publishing e volevano poter disporre della stesssa potenza e degli stessi strumenti di questi software per poter controllare l’aspetto di presentazione dei documenti. HTML purtroppo per sua natura non era in grado di fornire una risposta a queste esigenze.
Microsoft e Netscape inizialmente per sopperire a questa mancanza iniziarono a rilasciare versioni dei rispettivi browser contenenti nuovi tags i quali se da un lato erano in grado di soddisfare la cresente esigenza dei Web Designers, dall’altro rendevano impossibile la definizione di uno standard costringendo chi doveva progettare documenti Web a dover privilegiare un determinato browser piuttosto di un’altro per poter disporre di maggiori strumenti di presentazione.
Nel marzo del 1995 il W3C (World Wide Web Consortium) iniziò a lavorare su una versione 3.0 di HTML, destinata ad apportare numerose e fondamentali modifiche alle versioni precedenti per definire uno standard. Successivanente nel 1996 per venire in contro alle esigenze dei grafici professionisti nacque il CSS (Cascading Style Sheet).

Oggi a differenza del passato sia Netscape che Microsoft si sono impegnate ad implementare i lavori del W3C, e soprattutto ad accettarne i risultati rendendo i propri browser compatibili. E’ bene ricordare che il W3C è un consorzio formato da: Adobe, Hewlett Packard, IBM, Microsoft, Netscape, Novell, SoftQuad e Sun Microsystems.

Che cos’è il Cascading Style Sheet

HTML soffre di limiti propri di un sistema di contrassegno ideato per scopi molto lontani da quelli attualmente richiesti dal Web Design. L’HTML è stato progettato per gestire singole pagine. Se ciò ha generato la definizione di un linguaggio semplice e diretto, non è più aderente alle necessità di siti spesso composti da migliaia di pagine. A questo si affianca il problema incontrato dai grafici professionisti riguardo la difficoltà di posizionamento all’interno del documento di immagini e testo; questi limiti risultano fastidiosi e spesso immobilizzanti, per i professionisti.
Posizionare un’immagine, creare una banda laterale, giustificare del testo in HTML diventa un problema risolvibile esclusivamente con strumenti nati per tutt’altro scopo (le tabelle, per esempio, nel 90% dei casi vengono utilizzate per posizionare elementi nella pagina, invece che per ordinare dati).
A queste problematiche HTML 4.0 cerca di far fronte adottando i fogli di stile, i quali possono essere inseriti all’interno di un documento iperstestuale in tre modi:

  • attraverso un file esterno;
  • attraverso l’intenstazione generale di ogni singolo documento;
  • attraverso la specifica degli attributi nel singolo TAG.

Sfruttando i fogli di stile è possibile modificare la struttura di diverse pagine agendo su un unico file esterno che ne determina l’aspetto. La marcatura HTML dovrà, quindi, tornare alla sua originaria funzione di definizione della struttura logica del documento, lasciando ai fogli di stile la gestione del layout di pagina. Alcuni linguaggi specializzati come il CSS (Cascading Style Sheets) permettono di riunire direttive di stile provenienti da fonti diverse, facendo prevalere le une alle altre in base alle scelte del webmaster.

Il problema, in termini più tecnici, riguarda la classica separazione SGML tra stile, contenuti e struttura. HTML “tradizionale” non soddisfa questa condizione, ma anzi, ne esaspera la confusione.

esempio :

Ma cosa significa separare lo stile dai contenuti? Consideriamo un sito Web mediamente complesso, con un numero di pagine HTML pari a 100. Poniamo che il testo adottato per l’esposizione degli argomenti sia un “arial” corsivo. Con gli strumenti classici di HTML il codice per ottenere questo risultato e’:

<FONTFACE="ARIAL"><I>Testo della pagina</I></FONT>

ripetuto in tutte le 100 pagine del sito, a chiusura e apertura del testo da formattare.

Ma cosa succede nel momento in cui scegliamo di modificare il tipo di carattere a tutte le pagine?
Non c’e’ altra soluzione che aprire le 100 pagine e procedere ad altrettante modifiche (devo modificare ogni tag), che sostituiscano il nome “arial” con il nuovo font scelto.

Un webmaster di medie capacita’ puo’ impiegare solo qualche decina di minuti, che diventano ore per siti di grandi dimensioni; questa perdita di tempo e’ diretta conseguenza della promiscuita’ tra stile e contenuto, laddove il primo (il tag FONT) non e’ separato dal secondo (il testo della pagina).
Viene da se’ che la soluzione a questo problema e’ nella separazione tra i due elementi sopracitati, che nella pratica si risolve adottando i Cascading Style Sheets, da tempo introdotti nel Web publishing, ma che solo ultimamente hanno conosciuto una grande diffusione.

CSS non è un qualcosa di sè stante, ma lavora in abbinamento al linguaggio HTML; possiamo pensarlo come un semplice meccanismo per aggiungere dello stile ad una pagina in HTML. Più precisamente un foglio di stile è un set di regole stilistiche che descrivono come un documento HTML verrà presentato all’utente. Visto in quest’ottica, HTML viene usato per descrive la struttura del documento e le sue varie parti incurandosi del suo aspetto, di come verrà presentato al lettore che dovrà leggere il documento. CSS in seguito descrive come gli elementi della pagina HTML verranno presentati al lettore del documento stesso.

Usando CSS il Designer può specificare la presentazione della pagina HTML in maniera indipendente dal contenuto; in questo modo ottengo una separazione dei compiti fra produzione di un documento e sua presentazione al mondo Word Wide Web.

Questa tecnologia inoltre gode di un ulteriori proprietà: è molto flessibile in quanto fornita di un meccanismo capace di propagare un determinato aspetto presentazionale su tutte le pagine che il Web Designer vuole siano interessate, cosicchè una modifica di presentazione fatta in un unico file si ripercuote a tutti i documenti che ne fanno riferimento; questa è una proprietà molto potente perchè permette di semplificare notevolmente il lavoro di revisione e mantenimento delle pagine di un sito Web.

Inoltre CSS mette in piedi un meccanismo noto con il termine “a cascata” (cascading) per cui e’ possibile incorporare nel documento differenti fogli di stile, tale caratteristica è in grado di distinguere e scegliere fra più possibili aspetti presentazionali che possono rispecchiare la volontà di visualizzare a video di un documento in un certo modo da parte del Web Designer, dell’utente o dalle opzioni del Browser, risolvendo eventuali conflitti, in base a regole gerarchiche facendo prevalere uno stile sull’altro.

Potenzialità di CSS / problematiche in HTML

Per capire quanto sia stato rivoluzionario Css bisogna prima conoscere un poco l’HTML, quali siano i suoi limiti e con quali problematiche gli sviluppatori si sono scontrati prima di dare origine ad una tale soluzione.

  • Lingaggio Markup : Html per sua natura è un linguaggio basato sui tags, ed è dentro a questi che devo stabilire le regole per la struttura e la presentazione del documento. Ciò focalizza l’attenzione sulla struttura del documento piuttosto che sulla presentazione ed è in netto contrasto con i programmi di Desktop Publishing (DTP) i quali enfatizzano invece la presentazione di un documento. Questo è dovuto al fatto che HTML in origine non forniva strumenti per il controllo della grafica e della presentazione.
  • Scarsa possibilità di grafica : Una prima soluzione per oltrepassare le limitazioni stilistiche dell’Html fù fornita dai venditori di Browser, i quali crearono dei propri tags proprietari al fine di fornire ai Web Designer degli strumenti per il controllo dello stile di una pagina Web.
    ad ogni nuova versione del browser venivano aggiunti nuovi tags che potessero soddisfare le crescenti esigenze dei Web Designers; all’inizio questa sembrò una buona idea, in seguito portò a maggiori problemi in quanto i tags erano proprietari di un determinato browser e non universali, quindi risultavano compatibili solo con il proprio browser; gli altri browser, che quindi non erano in grado di interpretare tali tags non potevano riprodurre a video l’elletto per cui erano stati designati; si era venuta a creare una destandarizzazione che portò maggiori problemi.

    per esempio :

    Nel 1994, Netscape introdusse nel suo omonimo browser il tag <CENTER> che permetteva al testo di essere visualizzato al centro dello schermo ed il tag<FONT> per indicare il font-size. Purtroppo tali effetti venivano interpretati e quindi visualizzati solo dal Browser di Netscape.

    Nel 1995, Microsoft introdusse il tag <MARQUEE> il quale permetteva al testo di scorrere lungo lo schermo, ma anche in questo caso tale proprietà funzionava solo su Internet Explorer di Microsoft.

    Tutto questo non garantiva l’effetto voluto agli utenti che utilizzavano un browser diverso, anzi poteva adirittura creare delle situazioni catrastrofiche a livello di presentazione tali da non permettere la comprensione della pagina. Tali problematiche hanno trovato in parte soluzione solo dal 1996 in poi quando lo standard del comitato W3C diede origine al linguaggio CSS.

    • Convertire Testo in immagini : un’atro modo con cui i Web Designers avevano cercato di superare i limiti dell’HTML era quello di convertire il testo in immagini. Mediante l’uso dell’immagine il proggettista aveva il pieno controllo sul colore, la spaziatura dei caratteri, dei font ecc… ; una tale soluzione però presenta due svantaggi principali :
      • Compromette l’accessibilità : Software chiamati Robots (più comunemente conosciuti come crawlers o spiders) usati dai motori di ricerca, navigano all’interno del sito cercando di indicizzare e catalogare il suo contenuto al fine di renderlo disponibile nelle ricerche effettuate con un comune motore di ricerca quale per esempio Altavista, Hotbot, Lycos, ecc…
        L’indicizzazione viene effettuata facendo un’analisi delle parole contenute nelle pagine, l’indicizzazione non sarà corretta se le parole sono invece immagini.
        Inoltre non tutti gli utenti possono disporre di Browser grafici; chi usa per esempio un browser testuale come Lynx non potrà mai leggere del testo rappresentato come un’immagine.
      • Allunga i tempi di scaricamento della pagina : anche nel caso fortunato di disporre browser grafici l’uso massiccio di immagini come testo appesantisce molto la pagina che di conseguenza necessiterà di maggior tempo di caricamento. L’utente fruitore della pagina potrebbe essere impaziente e quindi uscire dalla stessa prima che sia terminato il suo scaricamento nel browser.
    • Testo all’interno di tabelle : un’altro paliativo adoperato dai Web Designers prima dell’avvento di CSS era quello di inserire il testo all’interno di tabelle al fine di poterne controllare il Layout.

      Per esempio:

      Una tecnica era quella di aggiungere un margine di una certa larghezza sulla sinistra della pagina per poterne controllare il rientro. Questa non fù certo una buona soluzione in quanto non tutti i browser riconoscono le tabelle, tale testo in questi browser non verrà visualizzato. Inoltre l’uso di tabelle con questo scopo complica di molto la scrittura ed il mantenimento del testo in HTML.

    • Scrittura di programmi Java o Javascript invece di usare HTML : ennesima tecnica adoperata dagli sviluppatori è quella di creare dei programmi che visualizzino pagine. Questi sebbene molto più complessi del liguaggio HTML possiedono delle tecniche per il controllo di ogni singolo pixel sullo schermo e permettono di fare cose che CSS non è in grado, nonostante il miglior impatto grafico che sono capaci di riprodurre presentano alcuni svantaggi : Sono comunque dei programmi, e di conseguenza non possono essere ricercati da un Robot nei motori di ricerca. Non possono essere usati da alcun Browser non grafico. Ed infine, essendo sempre un programma che và in esecuzione potrebbe contenere un virus.

    Html nel corso degli anni è diventato il formato per eccellenza per pubblicare informazioni; grazie alla sua semplicità chiunque disponga di un computer ed un collegamento internet può pubblicare documenti in formato HTML senza dover sopportare la spesa di un costoso programma DTP; inoltre qualsiasi utente può visitare un sito senza dover acquistare un programma proprietario. Tuttavia la semplicità di tale linguaggio non consente di soddisfare le crescenti esigenze estetiche e mediatiche imposte negli ultimi anni come necessità per il successo al pubblico dello stesso; CSS è il supporto a tali esigenze in grado di dare nuova linfa vitale a tale linguaggio.

  • Browser e CSS

    Al fine di poter visualizzare i documenti secondo la formattazione indicata da CSS bisognerà disporre di un Browser in grado di supportare tale tecnologia. Un tale browser è in grado di riconoscere ed interpretare gli elementi di STYLE.

    Anche se al momento attuale CSS è l’unico linguaggio di stile sul Web, in futuro ci potrebbe essere più di un linguaggio di stile, dunque un browser che supporti CSS deve essere informato su quale linguaggio Style Sheet deve interpretare, questo lavoro viene fatto mediante l’attributo TYPE all’interno di <STYLE>, il valore espresso dopo TYPE fà capire al Browser quale Style Sheet dovrà usare per interpretare il codice di stile del documento; nel nostro caso per CSS sarà sempre “text/css“; quindi quando successivamente il browser caricherà il documento verificherà se capisce tale linguaggio altrimenti lo ignorerà :

    <HTML>
      <TITLE>Pagina Web di esempio</TITLE>
      
      <STYLE TYPE="text/css">
        ..
        H1 { color: red }
        ..
      </STYLE>
      
      <BODY>
        ..
      </BODY>
    </HTML>   
    

    Ci sono poi dei browser come ad esempio Netscape Navigator 1.x oppure MISE2 non compatibili con CSS i quali ignoreranno il Tag <STYLE> ma visualizzeranno gli elementi al suo interno come se fossero parte del documento Web. Volendo evitare il problema si può ricorrere al trucco di mettere tutto il codice che riguarda la formattazione di stile come se fosse un commento, l’esempio quì sotto dà l’idea :

    <HTML>
      <TITLE>Pagina Web di esempio</TITLE>
      
      <STYLE>
        <!--
        ..
        H1 { color: red }
        ..
        -->
      </STYLE>
        ..
        .. 
    

    I CSS sono stati introdotti da Microsoft dalla terza versione di Internet Explorer, e parzialmente supportati da Netscape soltanto dalla quarta versione dell’omonimo browser. Chi accede con un browser obsoleto ad un documento formattato con fogli CSS, si trovera’ di fronte una pagina gestita dalle opzioni di default del browser (lo sfondo, per esempio, sarà grigio; il tipo di testo “times new romans” ecc).

    I CSS sono stati ufficialmente riconosciuti e standardizzati dal W3C (consorzio internazionale per lo sviluppo del Web) nelle raccomandazioni “CSS1”, “CSS2” e “CSS3” .

    Rammentiamo, infine, che i fogli di stile sono compatibili con i seguenti Browser:

    MS Internet Explorer 3 (MSIE3, supporta CSS1)
    MS Internet Explorer 4
    MS Internet Explorer 5

    Netscape navigator 4 (parzialmente)
    Netscape navigator 6

    Una lista più completa e dettagliata sulla compatibilà ai CSS è possibile consulate al seguente indirizzo :

    www.webreview.com/style/index.shtml

    Nel paragrafo “Browser Style Compatibility Charts” ci sono dei link a delle tabelle che illustrano chiaramente tutte le proprietà supportate in CSS1 e CSS2 dai vari browser e loro versioni.

    Oppure un’altro indirizzo che mostra la compatibilità dei browser in maniera più coincisa è il seguente :

    http://www.eskimo.com/~bloo/indexdot/css/supportkey/syntax.htm

Fonte: uniud.it

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *