Consulenza - Sviluppo - Marketing - Formazione

Giacomo Rutili

Tieni qualche istante il mouse sopra al mio nome per aggiungermi su Google+ o seguimi sugli altri social
Giacomo Rutili

introduzione ai css

2 giugno 2011, Scritto da , category css

icona cssCon i CSS si utilizza un nuovo linguaggio per determinare la formattazione e la presentazione di un documento HTML.

Prima dei css gli la formattazione dei contenuti veniva gestita direttamente nel codice HTML. Attributi come larghezza, background, colore etc venivano inseriti grazie ad appositi tag ed attributi.

L’uso (abuso) dei tag, unitamente alle tabelle per creare layout, ha reso complicato e difficilmente gestibile, oltreché mantenibile, la progettazione, la scrittura ed il design delle pagine web.

I css nascono per rimediare a queste problematiche.

Prima dei css

<p align="center">
<font face="Arial">
<img border="0" src=“giacomo-logo.png” width="207" height="279"></font>
</p>
<p align="center">
<font face="Papyrus“> Benvenuto nel mio sito!</font>
</p>
<p align="center">
<font face="Papyrus">Questa è la pagina ufficiale del mio sito web.</font>
</p>

o peggio

<table width="158" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr bgcolor="#006699">
    <td valign="top" bgcolor="#000066"><div align="center"> <strong> <font color="#FFFFFF" size="-1" face="Verdana, Arial, Helvetica, sans-serif"> Sponsors: </font> </strong> </div></td>
  </tr>
  <tr bgcolor="#CCCCCC">
    <td class="body-small"><div align="center"><font color="#666666" size="-2"><img src="spacer.gif" width="1" height="15" border="0"><a href="http://www.ilmiosito.it/design.html" target="_blank">Packaging Graphics Co.</a></font></div></td>
  </tr>
  <tr bgcolor="#CCCCCC">
    <td height="22" class="body-small"><div align="center"><img src="images/spacer.gif" width="1" height="15" align="absmiddle"> <font color="#666666" size="-2"><a href="http://www.ilmiosito.it” target="_blank">Brochure Design &amp; Printing</a></font></div></td>
  </tr>
  <tr>
    <td height="10" bgcolor="cccccc">
<table>
  <tr><td>Prezzo</td><td>Q.ta</td></tr>
  <tr>123,00€</td><td>2</td>
</table>
</td>
  </tr>
</table>

Grazie ai css invece è possibile separare le specifiche che caratterizzano l’aspetto del contenuto dal contenuto stesso.

La combinazione di file separati (HTML + css), unita al markup semantico (selettori e tag), agli identificatori ed ai tag garantisce una maggior semplicità.

Con i CSS diventa possibile applicare stili in un sito intero delegando l’aggiornamento della presentazione ad un singolo (e cachabile) file “.css” .

Co i CSS si può:

  • separare gli stili dalla struttura e dai contenuti
  • specificare dimensioni dei testi
  • impostare margini delle pagine e degli elementi
  • gestire il posizionamento degli elementi
  • personalizzare l’aspetto di pagine, sezioni, temi/template grafici
  • cambiare l’aspetto in base al browser o al media type (screen, print, tv etc) con cui si accede al sito
  • centralizzare le proprietà che definiscono l’aspetto del layout, dei font, delle form, tabelle, div etc

Un po’ di storia

Il linguaggio per la scrittura dei fogli di stile viene definito dal W3C (World Wide Web Consortium), organo che sviluppa tecnologie interoperabili (specifiche, linee guida, software e strumenti) per far raggiungere al web il massimo delle sue potenzialità.

Per far questo si è impegnato a creare strumenti, linguaggi e metodi per migliorare la progettazione delle pagine web, in particolare si è dedicato allo sviluppo di:

  • css
  • validatori css
  • html
  • valodatori html
  • accessibilità

Inizialmente i css non erano molto diffusi a causa di uno scarso supporto da parte dei browser, dall’esiguo numero di sviluppatori capaci di comprenderli ed utilizzarli e dalla pochezza di software atti a supportare lo sviluppo di pagine web con questo linguaggio, poi, per fortuna, le cose sono cambiate. Ad oggi tutti i browser recenti supportano pienamente i CSS ed esistono editor, anche visuali, in grado di aiutare gli sviluppatori, ora molto diffusi, a disegnare pagine tramite la combinazione di html + css.

I vantaggi

Flessibilità:

  1. nell’apportare cambiamenti in larga scala su un sito web
  2. nel cambiare definizione di stili
  3. nel cambiare layout

Prestazioni:

  1. Eliminare le tabelle per creare layout diminuisce il codice in termini di scrittura e di peso in kilobyte e lo rende più comprensibile per lo sviluppatore
  2. i file .css vengono messi nella cache del browser diminuendo il traffico ed ottimizzando i tempi di rendering della pagina
  3. Codice più compatto ed ottimizzato grazie allo sfruttamento dell’ereditarietà

Accessibilità:

  1. Eliminare le tabelle rende il sito più accessibile in quanto risulta più facile la lettura della pagina da parte dei software quali screen reader (per non vedenti)
  2. è possibile sviluppare versioni grafiche diverse del sito in base al media utilizzato (un sito ottimizzato per la stampante, uno per il monitor, uno per smartphone, tablet etc)

Manutenzione

  1. delegando le caratteristiche grafiche ad un file esterno è più facile gestire le modifiche e gli aggiornamenti
  2. utilizzare html per i contenuti, javascript per il comportamento e css per lo stile rende la progettazione di un sito web più facile, veloce e più simile al modello MVC