LAU

1. Introduzione

Con la definizione delle specifiche CSS livello 3 [link esterno] saranno introdotte alcune modifiche.
I membri del CSS&FP Working Group del W3C, per facilitare la comprensione delle diverse parti del nuovo documento, hanno deciso di suddividere in moduli le specifiche.
La flessibilità di tale soluzione comporta un grosso vantaggio per i programmi utente che avranno la possibilità di gestire solo alcuni sottoinsiemi di moduli. Per esempio, un browser di tipo vocale può essere maggiormente interessato al modulo riguardante i CSS di tipo auditivo e non invece al modulo riguardante i colori; viceversa, un browser di tipo visuale sarà maggiormente interessato al supporto dei moduli riguardanti il colore e non invece a quelli riguardanti i CSS di tipo auditivo.

I CSS3 introdurranno alcune funzionalità aggiuntive, anche se ovviamente la loro applicazione dipenderà dal supporto dei browser che, ad oggi, non sono ancora in grado di supportare parte delle novità introdotte.

Le principali novità introdotte dai CSS3 riguarderanno:

• i selettori di attributo
• le pseudo-classi strutturali
• il box model
• le proprietà per gli sfondi e i bordi
• i collegamenti ipertestuali
• il controllo del colore
• la definizione delle liste
• effetti particolari per il testo e i box
• la disposizione del testo su colonne multiple

Altri moduli previsti riguarderanno i diversi tipi di media, la capacità di interrogare il dispositivo sui suoi aspetti tecnici, l'interfaccia utente e così via.

Di seguito verranno brevemente accennate alcune novità riguardanti 3 moduli:

• il box model
• effetti particolari per il testo e i box
• la disposizione del testo su colonne multiple

torna su

2. Novità riguardanti alcuni moduli

a) Il box model

Le specifiche CSS3 prevedono un modulo relativo al box-model ("CSS3 module: The box model [link esterno]").
La proprietà width, nei CSS2, definisce la larghezza dei contenuti in un elemento di blocco (div, p, etc.). Alla larghezza dei contenuti è possibile aggiungere l'ampiezza del padding, lo spessore dei bordi e un margine.
Di seguito viene fornita un'immagine dimostrativa del corretto funzionamento del box-model con i CSS2 (tratto dall'articolo "Il box model di IE5/Win [link esterno]" di Gianluca Troiani):

Invece, Internet Explorer 5.x (e Internet Explorer 6 operante in quirks mode) ha un'interpretazione diversa del box-model. In questo caso, infatti, la proprietà width è interpretata come la larghezza totale del box, comprese le ampiezze del padding, dei bordi e dei margini.
L'immagine sottostante illustra l'errata interpretzione del box-model da parte di Internet Explorer:

Si consideri il seguente esempio:

Questo box è stato realizzato con la seguente tecnica:

Codice XHTML:

<div class="box-model>box-model</div>

CSS:

div.box-model{
width:300px;
padding:10px;
border:3px solid #333;
}

Tale box sarà visualizzato in 2 modi diversi dai browser Mozilla Firefox e Internet Explorer.
Internet Explorer visualizzerà il box con una larghezza di 300px, poichè sottrae a 300px (larghezza dei contenuti), il padding di 20px (10 per il lato sinistro e 10 per il lato destro) e 6px per il bordo (3 per il lato sinistro e 3 per il lato destro).
Firefox, invece, alla larghezza dei contenuti (300px) aggiunge 20px per il padding e 6px per il bordo.
Pertanto, se la larghezza del box in Explorer sarà di 300px, quella in Firefox sarà di 326px.

Per risolvere il baco di Internet Explorer (e fare in modo che i due box risultino della medesima larghezza) di solitano si utilizzano diverse tecniche.
Di seguito mostriamo come sia possibile, grazie alla direttiva !important, correggere il mal funzionamento del box-model dell'esempio precedente in Internet Explorer:

div.box-model{
width:300px!important;
width:326px;
padding:10px;
border:3px solid #333;
}

In questo modo la larghezza del box sarà di 326px per tutti e due i browser.

Lo stesso risultato con i CSS3 potrà essere ottenuto senza hack, attraverso l'utilizzo della proprietà box-width.
Tale proprietà, infatti, (ridondante per Firefox, ma necessaria per Explorer) consentirà di sovrascrivere la proprietà width definendo la larghezza totale del box, compresi i bordi, i margini e il padding.

Si potrà, cioè, impostare il foglio di stile nel seguente modo:

div.box-model{
width:300px;
box-width:326px;
padding:10px;
border:3px solid #333;
}

b) Effetti particolari per il testo e i box

Le proprietà riguardanti le ombre applicate al testo sono comprese nel modulo "CSS3 Text Module [link esterno]" delle specifiche CSS3.
Grazie alla proprietà text-shadow è possibile applicare l'ombra ad un testo.
È possibile definire l'ombra attraverso l'utilizzo di tre lunghezze e un colore. Vediamo come si utilizza tale proprietà:

p{
text-shadow: 2px 2px 2px #069;
}

il primo valore indica lo spostamento orizzontale dell'ombra, il secondo valore indica lo spostamento verticale dell'ombra, il terzo valore indica il raggio della sfumatura e infine l'ultimo valore indica il colore dell'ombra.

Lo stesso identico effetto può essere ottenuto per i box tramite la proprietà box-shadow.

box{
box-shadow: 7px 7px 12px #069;
}

c) La disposizione del testo su colonne multiple

Le specifiche CSS3 prevedono un modulo riguardante la disposizione del testo su colonne multiple ("CSS3 module: Multi-column layout [link esterno]").
Le proprietà introdotte da questo modulo posono essere suddivise in tre gruppi.

Il primo gruppo definisce il numero e l'ampiezza delle colonne:

• column-count (definisce il numero di colonne in cui il contenuto deve essere suddiviso)
• column-width (definisce la larghezza ottimale per le colonne)
• column-width-policy (regola la gestione dello spazio quando il numero e la larghezza delle colonne sono tali da non coprire per intero lo spazio a disposizione)

Il secondo gruppo definisce lo spazio esistente tra le colonne :

• column-gap (definisce l'ampiezza dello spazio vuoto tra due colonne)
• column-rule-style (definisce lo stile della linea di separazione tra due colonne)
• column-rule-width (definisce la larghezza della linea di separazione tra due colonne)
• column-rule-color (definisce il colore della linea di separazione tra due colonne)
• column-rule (è una sintesi abbreviata delle precedenti proprietà).

Il terzo gruppo definisce il modo in cui un elemento può occupare due o più colonne:

• column-span (definisce il numero di colonne che un elemento occupa)

Esempio:

body{ 
column-count: 3;
}

torna su

3. I moduli delle specifiche CSS3

Di seguito è fornita una lista di link attraverso i quali è possibile accedere ai moduli in Working Draft delle specifiche CSS3.

• Introduction to CSS3 [link esterno]
• CSS3 Advanced Layout Module [link esterno]
• CSS3 Backgrounds and Borders Module [link esterno]
• CSS3 Basic User Interface Module [link esterno]
• CSS3 module: The box model [link esterno]
• CSS3 module: Cascading and inheritance [link esterno]
• CSS3 Color Module [link esterno]
• CSS3 module: Fonts [link esterno]
• CSS3 module: Generated Content for Paged Media [link esterno]
• CSS3 Generated and Replaced Content Module [link esterno]
• CSS3 Hyperlink Presentation Module [link esterno]
• CSS3 module: line layout [link esterno]
• CSS3 module: Lists [link esterno]
• CSS3 module: Multi-column layout [link esterno]
• CSS Namespace Enhancements (Proposal) [link esterno]
• CSS3 Paged Media Module [link esterno]
• CSS3 module: Presentation Levels [link esterno]
• The CSS 'Reader' Media Type [link esterno]
• CSS3 Ruby Module [link esterno]
• CSS3 Speech Module [link esterno]
• CSS3 module: Syntax [link esterno]
• CSS3 Text Effects Module [link esterno]
• CSS3 Values and Units [link esterno]
• CSS3 module: Web Fonts [link esterno]

torna su