CSS

Da Wikipedia, l'enciclopedia libera.
(Reindirizzamento da Fogli di stile a cascata)
bussola Disambiguazione – Se stai cercando altri significati dell'acronimo CSS, vedi CSS (disambigua).
Cascading Style Sheets
Crystal Clear app stylesheet.svg
Estensione .css
Tipo MIME text/css
Sviluppato da W3C
1ª pubblicazione 17 dicembre 1996
Sito web www.w3.org/TR/CSS

Il CSS (Cascading Style Sheets, in italiano fogli di stile), in informatica, è un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML ad esempio in siti web e relative pagine web. Le regole per comporre il CSS sono contenute in un insieme di direttive (Recommendations) emanate a partire dal 1996 dal W3C.

L'introduzione del CSS si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti, garantendo contemporaneamente anche il riuso di codice ed una sua più facile manutenibilità.

Storia[modifica | modifica wikitesto]

Per permettere agli autori di poter plasmare liberamente l'aspetto delle pagine web, 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> che va a definire il 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 presentavano 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.

Un'ulteriore questione era, nelle pagine web non standard, 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. Oltre a questo, l'uso delle tabelle comporta anche svantaggi pratici: aumento del peso delle pagine, come già indicato al problema 1, e peggioramento dell'accessibilità, in quanto l'ordine logico dei dati può dover essere sacrificato per motivi di layout. Nonostante tutto, alcuni sostengono l'uso delle tabelle per la loro maggior facilità di implementazione.

CSS 1[modifica | modifica wikitesto]

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 linguaggio, infatti, consisteva nel fatto che il contenuto sarebbe stato sempre definito dal codice (X)HTML, mentre la formattazione si sarebbe trasferita 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 delle 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 (i palmari) 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[modifica | modifica wikitesto]

Per includere le nuove funzionalità e rendere i CSS un linguaggio ben supportato, nel 1998 il W3C emanò le specifiche CSS 2 e nel 2004 iniziarono i lavori sulle specifiche CSS 2.1 che divennero raccomandazione ufficiale il 7 giugno 2011. I CSS 2 sono la naturale evoluzione dei CSS 1 ed offrono potenti soluzioni per risolvere soprattutto il terzo problema, con la possibilità di creare fogli di stile separati per i dispositivi portatili. Anche il secondo problema è 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[modifica | modifica wikitesto]

Le specifiche CSS 3 non sono state ancora pubblicate, sebbene il W3C pubblichi costantemente informazioni sulle novità in fase di sviluppo. I CSS 3 dovrebbero presentare soluzioni per la correzione di alcuni bug di interpretazione di Internet Explorer[senza fonte], migliorie nella gestione degli sfondi e una soluzione per realizzare i bordi arrotondati la cui realizzazione affligge i webdesigner da tempo.

Caratteristiche[modifica | modifica wikitesto]

Il codice[modifica | modifica wikitesto]

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

  • Inserendo nel tag <head> della pagina in codice HTML un collegamento ad un foglio di stile esterno, cioè un file contrassegnato dall'estensione .css come negli esempi seguenti, tramite il tag link o tramite la direttiva import, che può essere utilizzata anche negli stessi file .css per collegare più file tra loro:
 <html>
 <head>
 <title>Esempio</title>
 <link rel="stylesheet" type="text/css" href="foglio_di_stile.css"/>
 </head>
oppure
 <html>
 <head>
 <title>Esempio</title>
 <style type="text/css">
 @import url(foglio_di_stile.css);
 </style>
 </head>

questa soluzione garantisce il massimo riuso di codice possibile potendo essere richiamato in ciascuna delle pagine web HTML desiderate.

  • 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>

Questa soluzione garantisce un minor riuso di codice rispetto al precedente potendo essere utilizzato solo all'interno della pagina HTML in cui è dichiarato.

  • In linea all'interno degli elementi
<tag style="dichiarazioni CSS">...</tag>

Questa soluzione garantisce un riuso di codice ancora minore rispetto al precedente.

Le regole CSS[modifica | modifica wikitesto]

Il codice CSS da inserire o referenziare è strutturato sotto forma di una o più regole ovvero istruzioni di tipo proprietà : valore che vengono applicate dal browser in fase di rendering agli elementi HTML interessati opportunamente specificati tramite un selettore, il tutto strutturato secondo il seguente schema sintattico (gli spazi sono tutti facoltativi):

selettore{
  proprietà1:valore1;
  proprietà2:valore2,valore3;
}

Gli elementi sono illustrati di seguito.

Selettori[modifica | modifica wikitesto]

Selettori di tipo[modifica | modifica wikitesto]

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

 body {
 [...]
 }

o

 p {
 [...]
 }
Classi[modifica | modifica wikitesto]

Le 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[modifica | modifica wikitesto]

Gli identificatori (comunemente ID) applicano la regola a quell'elemento della pagina che presenta la proprietà id="nome_identificatore". Gli ID contraddistinguono elementi unici. La sintassi CSS è la seguente:

 #nome_identificatore {
 [...]
 }
Pseudoclassi[modifica | modifica wikitesto]

Le pseudoclassi identificano elementi in base alle loro proprietà.

  • first-child individua un elemento solo se è il primo figlio dell'elemento padre. Così quindi
 p:first-child {
 [...]
 }

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

 <body>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
 </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[modifica | modifica wikitesto]

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

  • first-line individua solo la prima linea di un paragrafo. Se la finestra del browser cambia dimensione si adatterà automaticamente alla nuova dimensione della linea. La sintassi CSS è la seguente:
 p:first-line {
 [...]
 }
  • first-letter individua solo il primo carattere di un elemento.
  • before e after sono due pseudoclassi utilizzate nella creazione dei contenuti generati. Non individuano un elemento, ma una posizione dove creare i contenuti. Sono poco utilizzate, dato il mancato supporto di Internet Explorer.
Selettore di discendenza, figlio e fratello[modifica | modifica wikitesto]

Identificano solamente gli elementi che si trovino in una particolare condizione di discendenza nella struttura (X)HTML della pagina.

  • Il selettore di discendenza identifica solo gli elementi contenuti in altri elementi. Così
 p span {
 [...]
 }

identifica solo gli elementi <span> contenuti in elementi <p>.

  • Il selettore figlio identifica invece solo gli elementi che siano contenuti direttamente nell'elemento padre. Così
 div > p {
 [...]
 }

individua solo i <p> contenuti direttamente in un <div>.

  • Il selettore fratello identifica il primo elemento immediatamente successivo ad un altro con cui condivida lo stesso padre. Così
 h1 + p {
 [...]
 }

individua solo il primo <p> fratello di <h1>

Selettore di attributi[modifica | modifica wikitesto]

Il selettore di attributi permette, tramite la sintassi che segue, di identificare elementi (X)HTML in base ai loro attributi.

 a[title=Esempio]{
 [...]
 }

Questa regola si applica solo agli elementi <a> che presentano l'attributo title="Esempio". I selettori di attributi sono molti e permetterebbero un controllo eccellente della pagina, ma Internet Explorer non li supporta ed il loro uso è quindi molto limitato.

Proprietà[modifica | modifica wikitesto]

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

  • background. Definisce lo sfondo di un elemento. È una scorciatoia (shorthand properties) per background-attachment, background-color, background-image, background-position e background-repeat.
  • border. Definisce il bordo di un elemento. È una scorciatoia (shorthand properties) per 'border-color, border-style e border-width.
  • color. Definisce il colore del testo di un elemento. Per definire lo sfondo si utilizza la proprietà background.
  • float. Questa proprietà definisce un blocco flottante, ovvero che permette la disposizione di altri elementi ai suoi lati.
  • font. Definisce le proprietà del carattere. È una scorciatoia (shorthand properties) per font-family, font-size e font-weight.
  • margin e padding. Definiscono lo spazio circostante gli elementi. La prima lo spazio esterno ai bordi, la seconda quello interno.
  • text-align. Definisce l'allineamento degli elementi, tra cui il testo.

Valori[modifica | modifica wikitesto]

Se non specificata, una proprietà assume i valori predefiniti di ogni browser, o in seconda istanza lo stile utente scelto, altrimenti può assumere uno dei seguenti:

  • inherit
  • auto
  • numero
  • percentuale
  • colore
  • URI
  • font
  • altri valori tipici di ogni proprietà

La stringa inherit specifica che la proprietà deve ereditare il valore dagli elementi da cui l'elemento discende. La stringa auto ha significati molto diversi a seconda della proprietà a cui viene assegnata.

Se i numeri sono contraddistinti da un'unità di misura è necessario che tale unità sia espressa (tranne che nel caso dello zero). Tra il numero e l'unità non devono esserci spazi, come nell'esempio che segue:

 p {
 margin : 5px;
 border: 1em;
 padding: 0;
 }

I colori possono essere indicati con più di un sistema. Ad esempio il colore arancione può essere indicato con:

 #ff6600
 #f60
 rgb(255,102,0)
 rgb(100%,40%,0%)

L'URL viene indicato nelle forme

 url(http://esempio.it/file.html)
 url("http://esempio.it/file.html")

I CSS permettono di indicare nella proprietà font-family più di un font, o una famiglia di font (serif e sans). In questo modo il browser utilizzerà il primo che troverà installato sul sistema operativo. La dichiarazione utilizza questa sintassi:

 p {
 font-family : "Arial", "Verdana", serif; 
}

Il supporto dei Browser e CSS[modifica | modifica wikitesto]

Il supporto completo e corretto delle specifiche CSS non è offerto da nessun browser attuale. Tuttavia esistono browser che si avvicinano molto a questo risultato ed altri che invece ne sono molto lontani. La lista che segue è di motori di rendering perché a loro è assegnato il compito di formattare la pagina secondo le istruzioni CSS.

Gecko (Mozilla Firefox e Netscape Navigator)
Gecko ha un ottimo supporto dei CSS 1 e 2 ed è per questo spesso utilizzato nella verifica della resa delle pagine web. Gecko, Mozilla Firefox e Netscape_Navigator sono software libero.
Trident (Internet Explorer e AOL Browser)
Internet Explorer è attualmenteQuando? il browser più diffuso[senza fonte] e il suo supporto ai CSS è sensibilmenteIn che modo? migliorato[senza fonte] e dalla versione 9 supporta CSS 3. Una peculiarità di Internet Explorer sono i cosiddetti commenti condizionali che consentono di applicare delle regole di CSS soltanto a una determinata versione di Internet Explorer. Questa funzionalità è ampiamente utilizzata laddove si presume un'utenza che utilizzi ancora vecchie versioni di Internet Explorer e che perciò richiedono frequentemente alcune regole di CSS addizionali per la corretta visualizzazione della pagina web.[1] In molti casi è necessario utilizzare regole di stile CSS ad-hoc esclusivamente per Internet Explorer a causa delle differenze sostanziali nel modo in cui alcune versioni di Internet Explorer si discostano dagli standard, come per esempio nel "box model non-standard" utilizzato da alcune versioni di Internet Explorer e che differisce sostanzialmente da quello imposto dagli standard del World Wide Web Consortium.[2][3] La sintassi dei commenti condizionali è la seguente:
<!--[if IE]>
regole CSS ad-hoc per Internet Explorer
<![endif]-->
poiché <!-- introduce di norma un commento, i browser diversi da Explorer 5.0 o superiori non interpretano il codice. I commenti condizionali permettono di specificare un foglio di stile specifico per Internet Explorer nel modo che segue:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="foglio_di_stile_ad-hoc_per_IE.css">
<![endif]--> 

Trident e Internet Explorer sono software proprietario.

Presto (Opera)
Presto offre un ottimo supporto dei CSS 1 e 2. Opera offre inoltre un'opzione che permette all'utente di disattivare i fogli di stile o usarne di propri. Presto e Opera sono software proprietario.
KHTML e WebKit (Safari, Google Chrome e Konqueror)
KHTML è attualmente il motore che offre il maggior supporto ai CSS, offrendo una parziale interpretazione anche dei CSS 3. KHTML e WebKit sono software libero; Safari è software proprietario.

Oltre alle differenze di compatibilità, ogni motore di rendering aggiunge ai CSS standard alcuni nuovi elementi o nuove proprietà. Esempi di queste situazioni sono tutte le proprietà CSS che offre Gecko inizianti per "-moz", come per esempio: -moz-border-radius (una proprietà per arrotondare i bordi di un elemento) o -moz-grabbing (un valore di cursor che fa apparire il mouse come una manina). Tutte queste proprietà però dovrebbero essere utilizzate esclusivamente quando si desidera esclusivamente utilizzare quel browser con quel determinato motore di rendering poiché tutte queste proprietà sono caratteristiche aggiuntive valide solo per quel determinato motore di rendering e non sono proprietà standard definite dal World Wide Web Consortium.

Utilizzo su diversi dispositivi[modifica | modifica wikitesto]

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"/>

Il codice precedente associa il foglio di stile solo (in teoria) ai browser standard per computer desktop e portatili. I valori dell'attributo media sono i seguenti:

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[modifica | modifica wikitesto]

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 <title> come nell'esempio che segue:

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

A questo punto possiamo specificare fogli di stile alternativi cioè non attivi al caricamento, ma attivabili dall'utente, come nell'esempio che segue:

<link rel="alternate stylesheet" type="text/css" href="foglio_alternativo.css" title="Esempio2"/>

Per attivare e disattivare i fogli di stile l'utente può ricorrere all'apposito menu del suo browser, tuttavia Internet Explorer non offre questa possibilità quindi è necessario creare uno script Javascript che svolga la funzione di sostituire i fogli. Il codice è stato pubblicato la prima volta su (EN) A List Apart ed è ora comunemente utilizzato. Tuttavia se questo script è facile da mettere in opera per gli sviluppatori, richiede un browser moderno con un buon supporto del DOM, oltre che avere attivati sia Javascript e i cookie. Un sistema più complesso ma molto più robusto può essere uno script lato server come PHP. Un esempio è disponibile sempre sullo stesso sito.

Note[modifica | modifica wikitesto]

  1. ^ (EN) CSS Conditional comments. URL consultato il 10 giugno 2014.
    «Older IE versions frequently need some extra CSS in order to show your pages right. Conditional comments are the best way to add this CSS, since the system is explicitly designed for this use case».
  2. ^ (EN) Internet Explorer and the CSS box model. URL consultato il 10 giugno 2014.
    «Internet Explorer’s non-standard way of calculating box dimensions».
  3. ^ (EN) CSS2 Box model, W3C.

Voci correlate[modifica | modifica wikitesto]

Altri progetti[modifica | modifica wikitesto]

Collegamenti esterni[modifica | modifica wikitesto]

Specifiche e strumenti[modifica | modifica wikitesto]

Guide ed esempi[modifica | modifica wikitesto]