Utente:Sassospicco/bozza CSS

Questa pagina è un ambizioso (e probabilmente fallimentare) tentativo di produrre una nuova versione di "Foglio di stile", che è stata sospettata di violazione di copyright. Vi prego di non modificarla, avrete modo di farlo con tutta tranquillità quando e se la proporrò come alternativa dell'attuale articolo.

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 <h1> o <p>) specifica un diverso ruolo dei contenuti che contrassegna (quindi il tag <h1> definirà un'importanza maggiore del tag <p>).

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 <h1> avranno carattere 18pt e i contenuti marcati da <p> 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 è <font>.

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:

1. 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) 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.
2. 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.
3. Il terzo problema comincia a diventare sempre più rilevante ed è la mancanza di compatibilità con i nuovi 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.

Si tende ad evidenziare anche un ulteriore questione, nelle pagine web non standard, ovvero l'uso del tag <table> (le tabelle) per realizzare l'impaginazione delle pagine web. Questo viene considerato dai puristi come inaccettabile in quanto le tabelle sono pensate per impaginare dati tabulari e non layout web. In realtà l'unico svantaggio serio di questo sistema è l'incredibile peso delle pagine, come già indicato al problema 1.

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:

1. Erano un'efficace soluzione al primo problema (escludendo la questione del tag <table>) perché riducevano notevolmente le dimensioni della pagine.
2. Risolvevano il secondo in modo parziale perché consentivano al codice (X)HTML di ritornare in gran parte semplice ed essenziale, ma presentavano qualche mancanza che costringeva a ricorrere ai tag HTML.
3. Non prendevano però in considerazione il terzo, dato che nel 1996 i PDA erano scarsamente diffusi.

I CSS 1 sviluppavano un'idea semplice ma efficace, ma nonostante le loro grandi potenzialità non ebbero successo a causa della mancanza di browser in grado di supportarli.

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 5, di Firefox e di 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.

CSS 3

Le specifiche CSS 3 non sono state ancora rilasciate, sebbene il W3C pubblichi costantemente 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 che la cui realizzazione affligge i webdesigner da tempo.

Il codice CSS

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

• Inserendo nel tag <head> della pagina un collegamento ad un foglio di stile esterno, cioè un file contrassegnato dall'estensione .css come negli esempi seguenti:

<html>
<head>
<title>Esempio</title>
<link rel="stylesheet" type="text/css" href="foglio_di_stile.css">
</head>

o

<html>
<head>
<title>Esempio</title>
<style type="text/css">
@import "foglio_di_stile.css";
</style>
</head>

• Inserendo, sempre all'interno dell'<head> tra gli specifici tag <style> e </style> le dichiarazioni css.

<html>
<head>
<title>Esempio</title>
<style type="text/css">
codice css
</style>
</head>

Le regole CSS sono strutturate secondo il seguente schema:

selettore {
proprietà : valore1, valore2;
}

Gli elementi sono illustrati di seguito.

Selettori

• Selettori di tipo: applicano la regola a tutti gli elementi della pagina del tipo determinato. Esempi:

body {
[...]
}

o

p {
[...]
}

• Classi: applicano la regola a tutti gli elementi della pagina che presentano la proprietà class="nome_classe". La sintassi CSS è la seguente:

.nome_classe {
[...]
}

• Identificatori (solitamente ID): applicano la regola a quell'elemento della pagina che presenta la proprietà id="nome_identificatore". Solo un elemento in tutta la pagina può corrispondere ad un identificatore. La sintassi CSS è la seguente:

#nome_identificatore {
[...]
}

• Pseudoclassi: identificano elementi in base alle loro proprietà.

• • first-child individua un elemento solo se è il primo figlio dell'elemento padre. Così quindi

div:first-child {
[...]
}

individuerà nel codice X(HTML) sottostante solo il primo paragrafo.

<body>
 <div>Lorem ipsum</div>
 <div>Lorem ipsum</div>
 <div>Lorem ipsum</div>
</body>

• • link e visited si applicano ai collegamenti. La prima identifica i collegamenti non visitati, la seconda quelli visitati. La sintassi CSS è:

a:link {
[...]
}

• • active, focus e hover identificano gli elementi solo in particolari condizioni, la prima se l'elemento è attivo, la seconda se è selezionato, la terza se il puntatore è sopra di lui. Quindi

p:hover {
[...]
}

si applicherà solo se il puntatore del mouse andrà sopra un paragrafo e solo per il tempo che vi rimarrà.

• • lang si utilizza per identificare gli elementi di una certa lingua ma il suo supporto è esiguo.

• Pseudoelementi

Gli pseudoelementi identificano solo una parte di un elemento, senza la necessità di utilizzare la marcatura (X)HTML.

• • first-line