CSS: differenze tra le versioni

Versione delle 18:22, 13 mag 2006

Versione delle 16:10, 17 mag 2006

Riga 1:

I '''fogli di stile a cascata''' (dall'inglese '''CSS''' ''Cascading Style Sheet'') sono il linguaggio definito dal [[W3C]] (''World Wide Web Consortium'') per '''definire l'aspetto''' delle pagine [[HTML]] e [[XHTML]]. La loro creazione, avvenuta nel [[1996]] si è resa necessaria per '''separare i contenuti dalla [[formattazione]]''' e imporre una programmazione più chiara e facile da utilizzare, sia per l'autore che per l'utente.

== Motivi ed evoluzione dei CSS ==

=== Prima dei CSS ===

Una [[pagina web]] è formata fondamentalmente da due elementi: i '''contenuti''' veri e propri che la pagina intende fornire e la '''formattazione''' ovvero l'aspetto con cui i contenuti saranno mostrati all'utente.

Il linguaggio HTML (e la sua evoluzione XHTML) ha come scopo quello di gestire i contenuti, specificandone la struttura attraverso ''tag'' diversi. Ogni tag (ad esempio <code>&lt;h1></code> o <code>&lt;p></code>) specifica un diverso ruolo dei contenuti che contrassegna (quindi il tag <code>&lt;h1></code> definirà un'importanza maggiore del tag <code>&lt;p></code>).

I '''[[browser]]''' che interpretano il codice (X)HTML mostrano all'utente '''formattazioni predefinite''' per ogni tag che incontrano (così ad esempio i contenuti marcati con il tag <code>&lt;h1></code> avranno carattere ''18pt'' e i contenuti marcati da <code>&lt;p></code> avranno carattere ''12pt''). Tuttavia questa formattazione è completamente '''sotto il controllo dell'utente''', che può modificarla nelle ''Impostazioni'' del suo browser.

Per permettere agli '''autori''' di definire l'aspetto delle loro pagine, dal [[1993]] in poi [[Netscape Navigator]] ed [[Internet Explorer]], i due browser che si disputavano gli utenti nella nota [[guerra dei browser]], presentarono '''tag proprietari''', ovvero non aderenti agli ''[[standard'']] e non compatibili con i browser concorrenti. Un esempio di questi tag è <code>&lt;font></code>.

Questi tag proprietari di formattazione erano l'unico modo per gli autori di definire la formattazione e così il loro uso è diventato massiccio. Tuttavia questi tag presentano '''tre problemi''':

#Il primo problema è costituito dalla lunghezza di questi tag. Se confrontata con una pagina che adotta il linguaggio CSS, una pagina che non lo adotta è in genere '''più pesante''' (in termini di [[Bit_(informatica)#Il_.27.27bit.27.27_come_cifra_binaria|bit]]) in un rapporto che spesso raggiunge il '''200%'''. Inoltre le istruzioni CSS possono essere raccolte in un [[file]] esterno che rimane memorizzato nella [[cache]] del browser, riducendo ulteriormente la quantità di dati che i [[server]] devono trasmettere.

#Il secondo problema risiede nella mancanza di logica del codice (X)HTML. Un codice non aderente agli standard, ridondante e confuso comporta infatti molto '''lavoro aggiuntivo''' per i browser, che devono cercare di correggere ed interpretare (quando possibile) direttive arbitrarie.

#Il terzo problema comincia a diventare sempre più rilevante ed è la mancanza di compatibilità con i nuovi '''[[Computer_palmare|computer palmari]]''' e gli [[smartphone]]. Queste pagine infatti sono progettate per schermi con risoluzione minima ''800x600 pixel''. I palmari, che hanno una risoluzione inferiore ed una forma dello schermo ben diversa dal rapporto 4:3 dei monitor per computer, si trovano quindi impossibilitati a visualizzare correttamente la pagina e l'utente dovrà tentare di "decodificarla", operazione spesso molto scomoda.

Riga 22:

=== CSS 1 ===

Per tentare di risolvere questa situazione, nel [[1996]] il W3C '''emanò le specifiche CSS 1'''. I CSS 1 erano un interessante sistema per separare contenuto da formattazione. La base di questo lingaggio, infatti consisteva nel fatto che il contenuto sarebbe stato sempre definito dal codice (X)HTML, mentre la formattazione si sarebbe trasferito su un codice '''completamente separato''', il CSS appunto. I richiami tra i due codici venivano effettuati tramite due particolari attributi: ''class'' e ''ID''. Queste specifiche:

#Erano un'efficace soluzione al primo problema (escludendo la questione del tag <code>&lt;table></code>) perché riducevano notevolmente le dimensioni della pagine.

Riga 32:

=== CSS 2 e CSS 2.1 ===

Per includere nuove funzionalità e rendere i CSS un linguaggio ben supportato, nel [[1998]] il W3C '''emanò le specifiche CSS 2''' e nel [[2004]] le specifiche '''CSS 2.1'''. I CSS 2 sono la naturale evoluzione dei CSS 1 ed offrono potenti soluzioni per risolvere soprattutto il problema tre, con la possibilità di creare fogli di stile separati per i dispositivi portatili. Anche il problema due è ormai pienamente risolvibile, scrivendo una pagina (X)HTML esclusivamente indirizzata alla struttura e ai contenuti e manovrandola poi esclusivamente con i CSS per impaginarla.

Con la comparsa di [[Internet_Explorer|Internet Explorer 5]], di [[Firefox]] e di [[Opera_(browser)|Opera 7]], i CSS 2 hanno potuto avvalersi di browser in grado di interpretarli e sono quindi entrati a far parte del codice di molti siti web.

Riga 38:

=== CSS 3 ===

Le specifiche CSS 3 non sono state ancora rilasciate, sebbene il W3C pubblichi costantemente [http://www.w3.org/Style/CSS/current-work informazioni] sulle novità in fase di sviluppo. I CSS 3 dovrebbero presentare soluzioni per la correzione di alcuni bachi di interpretazione di Internet Explorer, migliorie nella gestione degli sfondi e una soluzione per realizzare i '''bordi arrotondati''' la cui realizzazione affligge i webdesigner da tempo.

== Il codice CSS ==

=== Inserire il codice ===

L'inserimento di codice CSS nelle pagine web può essere effettuato in due modi:

*Inserendo nel tag <code>&lt;head></code> della pagina un [[link|collegamento]] ad un foglio di stile '''esterno''', cioè un file contrassegnato dall'estensione ''.css'' come negli esempi seguenti:

<html>

<head>

Riga 70:

=== Una regola CSS ===

Le regole CSS sono strutturate secondo il seguente schema (gli spazi sono tutti facoltativi):

''selettore'' {

''proprietàproprietà1'' : ''valore1'', ''valore2'';

''proprietà2'' : ''valore2'', ''valore3'';

}

Gli elementi sono illustrati di seguito.

Line 170 ⟶ 171:

=== Proprietà ===

Le proprietà CSS sono molto numerose, circa '''60'''. Le più utilizzate sono:

* ''background''. Definisce lo sfondo di un elemento. È la somma delle proprietà più specifiche ''background-attachment, background-color, background-image, background-position e background-repeat''.

* ''border''. Definisce il bordo di un elemento. È la somma delle proprietà più specifiche ''border-color, border-style e border-width''.

Line 238 ⟶ 239:

== CSS sui diversi dispositivi ==

Una utilissima funzione dei CSS è la possibilità di essere applicati solo sui dispositivi ('''media''') specificati dall'autore. La sintassi (X)HTML da utilizzare è la seguente.

<link rel="stylesheet" type="text/css" href="foglio.css" '''media="screen"'''>

Line 255 ⟶ 256:

*all (tutti i dispositivi)

Sebbene il numero dei dispositivi gestibili tramite CSS sia notevole, soltanto '''i primi tre sono supportati''' in maniera sufficiente. Il media screen è quello standard cui si fa riferimento. Il media handheld è specifico per i palmari, ma alcuni browser per palmari tentano, spesso con scarso successo, di interpretare anche i fogli marcati con screen, per cui si preferisce in genere marcare con handheld sia il foglio per lo schermo che quello per il palmare e poi usare quest'ultimo per sovrascrivere le istruzioni del primo. Il media print codifica la pagina per la stampa, è supportato discretamente. Un supporto completo è garantito da Opera.

== Fogli di stile preferiti e alternativi ==

Come descritto, ad ogni pagina si possono collegare '''più fogli di stile'''. Tuttavia è anche possibile '''far scegliere all'utente quali applicare'''. Per farlo si definiscono innanzitutto i fogli di stile permanenti, cioè non disattivabili, secondo la sintassi già vista. Poi si definiscono i fogli preferiti, cioè attivi al caricamento della pagina, ma disattivabili, aggiungendo l'attributo <code>&lt;title></code> come nell'esempio che segue:

<link rel="stylesheet" type="text/css" href="foglio_preferito.css" '''title="Esempio1"'''>