Credo che molti web designer, come me daltronde, non aspettino altro che dalla tanto agognata storia dei CSS3 scompaia definitivamente la parola Draft per lasciare il posto a quella molto più invitante qual è Specification

Ma perchè CSS3?
Vi sono alcune importanti novità che potrebbero risolvere molte noie intrinseche dei fogli di stile, vedasi compatibilità tra browser, necessità di definire più immagini di sfondo contemporaneamente, ecc… e queste ritengo siano risposte più che esaurienti.

I moduli che saranno oggetto di cambiamento sono principalmente quelli riguardanti:

• gli sfondi, backgrounds
• i bordi, borders
• i colori, colors
• il box-model
• e altri moduli, come il multi-column layout

Vediamo le principali novità di ogni modulo.

Backgrounds
Per quanto riguarda gli sfondi, sarà finalmente possibile utilizzare più immagini di sfondo, indicando per la proprietà background-image gli URI separati da virgola, ad esempio
background-image: url(immagine1.gif), url(immagine2.gif), url(immagine3.gif);

Ovviamente le diverse caratteristiche di ognuna delle immagini sarà definita con la stessa tecnica (separazione tramite virgola), quindi:
background-position: left top, right bottom, 30px 200px;

Dove left top è la posizione di immagine1.gif, e così via.
Stessa cosa per la proprietà background (che è somma delle altre) e la singola background-repeat.
Ulteriori proprietà inserite nei CSS3 sono:
- background-size per definire le dimensioni dell’immagine di sfondo;
- background-origin per calcolare la posizione dell’immagine di sfondo in base a border, padding e content;
- background-clip che determina come si dispone l’immagine di sfondo, se in base a border, al padding o al content

Borders
Le novità sicuramente più stuzzicanti riguardano la proprietà border.
A quanto pare sarà data la possibilità di arrotondare i bordi attraverso le proprietà border-radius. L’arrotondamento coinvelgerà anche lo sfondo del box, anche in assenza di un bordo (border: none).
Sarà inoltre introdotta la possibilità di definire un’immagine da utilizzare per i bordi attraverso la proprietà border-image. L’immagine così potrà quindi essere suddivisa in nove parti:
quattro porzioni per gli angoli, quattro porzioni per i quattro lati (superiore, inferiore, sinistro e destro) e per un eventuale immagine di sfondo.
Tutto ciò semplificherà di molto il lavoro del web designer, che attualmente si deve scontrare o con un layout tabellare o con la gestione di div supplementari, puramente utilizzati per questioni di puro layout, e senza una vera e propria semantica.
Attraverso box-shadow sarà invece possile definire l’ombra di un box, specificando offset orizzontale, verticale e il raggio di sfocatura.
box-shadow: 5px 5px 10px #CCCCCC;
/*la prima lunghezza indica l'offset orizzontale dell'ombra, la seconda l'offset verticale, la terza il raggio della sfumatura, in ultimo il colore dell'ombra*/

Colors
Per quanto riguarda i colori, i Css3 introdurranno gli spazi di colore:

• HLS (Hue, Luminosity, Saturation)
• HLSA, che aggiunge il canale alpha per definire l’opacità del colore

A titolo d’esempio
background-color: hsla(0,100%,50%,0.2) /* indica colore rosso, al 20% di opacità*/

Box-model
Il box-model è sempre stato un problema per voi?
Grazie alla nuova proprietà box-sizing, le cose si semplificheranno, e di molto.
Di default, questa proprietà calcola la grandezza del box, come per i CSS 2.1 aggiungendo a width e height, la dimensione dei bordi, e il padding. Con la seguente dichiarazione però:
box-sizing: border-box

il browser visualizzerà il box con la width e height, specificate, andando a inserire all’interno di queste dimensioni i bordi e i padding!

Uno tra i selettori maggiormenti utili e fondamentali per lo sviluppo di layout complessi è float: a quanto pare i CSS di terzo livello introdurranno nuovi valori possibili per questa proprietà.
I valori top e bottom per i testi scritti in verticale (come ad esempio i testi giapponesi) si comporteranno come left e right. I valori inside e outside corrisponderanno invece a left e right per i media non impaginati (anche lo schermo quindi); per la stampa invece inside equivarrà a left nella pagina destra e a right nella pagina sinistra, mentre outside corrisponderà a right nella pagina destra e a left per quella sinistra.
Infine start per indicare il left/top nei sistemi di scrittura da sinistra a destra oppure il right/bottom per le scritture da destra a sinistra.
Ovviamente tutti questi valori saranno associati direttamente anche alla proprietà clear (proprietà che ristabilisce il flusso normale dei box inseriti). A clear si aggiungerà anche il valore clear-after, che agendo sul bordo inferiore, evitarà di utilizzare particolari accorgimenti per permettere al box contenitore di espandersi in altezza fino a contenere completamente i blocchi flottanti al suo interno.

Multi-columns layout
Al momento si tratta di un modulo a sè stante, e permetterà di definire in quante colonne si dispone il contenuto. Ciò sarà possibile o definendo la larghezza per ogni colonna, o semplicemente definendo il numero di colonne.
Al momento queste proprietà sono supportate da Safari 3 e Mozilla

Sembra che i tempi per l’effettiva applicazione di queste proposte siano ancora lunghi, visto che dal W3C non sono ancora arrivate delle specifiche complete e definitive, e soprattutto, la strada per la compatibilità multi-browser, è ancora tutta in salita.

Tags: css, draft