17
feb 2010

Tutte le nuove caratteristiche dei CSS3

Pubblicato da Mattia Biancardi in Browser, CSS | commenti(2)

Questa nuova versione dei fogli di stile non è ancora stata ufficializzata, ma molte delle ultime release dei moderni browser supportano i CSS3 in maniera non ufficiale: quanto si è visto fino ad ora lascia ben sperare perchè le nuove caratteristiche che sono state introdotte permetto di realizzare dei layout che fino a prima sarebbero stati impossibili, o estremamente complicati da implementare.

Attualemente il supporto alle nuove caratteristiche dei CSS3 è limitato alle ultime release dei più moderni browser, ma anche nella migliore delle situazioni il supporto è ancora parziale.
Qui sotto una tabella comparativa sul supporto ai CSS3 sulle ultime versioni dei browser:

Firefox 3.5 Google Chrome Internet Explorer 8 Safari 4 Opera 10
PROPRIETA
@font-face SI NO SI SI SI
Canvas SI SI NO SI SI
Canvas Text SI SI NO SI NO
HTML5 Audio SI SI NO NO NO
HTML5 Video SI SI NO NO NO
rgba() SI SI NO SI SI
hsla() SI SI NO SI SI
border-image SI SI NO SI NO
border-radius SI SI NO SI NO
box-shadow SI SI NO SI NO
Multiple backgrounds NO SI NO SI NO
opacity SI SI NO SI SI
CSS Animations NO SI NO SI NO
CSS Columns SI SI NO SI NO
CSS Gradients NO SI NO SI NO
CSS Reflections NO SI NO SI NO
CSS 2D Transorms SI SI NO SI NO
CSS 3D Transforms NO SI NO SI NO
CSS Transitions NO SI NO SI NO
Geolocation API SI SI NO NO NO

Come si può vedere dalla tabella qui sopra a farla da leone è Google Chrome, seguito da Firefox 3.5 e Safari 4 che offrono un supporto solo discreto. Deludono invece Opera 10 e soprattutto Internet Explorer 8…com’era facile aspettarsi!
Non essendo ancora state confermate le specifiche dei CCS3 è normale che il supporto possa essere parziale o addirittura inesistente: la speranza è che dopo l’ufficializzazione di tutte le specifiche tutti i browser si aggiornino per fornire un pieno supporto.
Di seguito una breve carrellata sulle nuove funzionalità.

Selectors

I selettori servono per individuare all’interno della vostra pagina elementi a cui poter poi applicare degli stili: il vantaggio è che tramite questi nuovi strumenti avanzati è possibile lasciare il codice molto più pulito, con meno ID e classi associate agli elementi, ottenendo una migliore separazione tra la struttura e la presentazione della pagina.

Attribute selectors

  • [att^="value"]
    Individua gli elementi che hanno un attributo che inizia con il valore specificato
  • [att$="value"]
    Individua gli elementi che hanno un attributo che finisce con il valore specificato
  • [att*="value"]
    Individua gli elementi che hanno un attributo che contiene il valore specificato

Pseudo-Classes

  • :nth-child(n)
    Permette di individuare un elemento basandosi sulla sua posizione all’interno della lista degli elementi figli di un elemento padre. Può essere utilizzato un numero, un’espressione o le keywords odd e even.
  • :nth-last-child(n)
    Individua l’ultimo figlio di un elemento padre. Anche in questo caso utilizzare espressioni numeriche.
  • :last-child
    Individua l’ultimo figlio di un elemento padre. E’ equivalende alla formula :nth-last-child(1)
  • :checked
    Individua gli elementi che sono selezionati come ad esempio checkbox e radio button.
  • :empty
    Individua gli elementi che non hanno figli o sono vuoti
  • :not(s)
    Individua tutti gli elementi che non corrispondono alla dichiarazione s.

Pseudo-Elements

L’unico elemento introdotto è il selettore ::selection che permette di individuare gli elementi selezionati dall’utente.

Link utili

RGBA e opacità

Questa nuova caratteristica permette di specificare un colore con il suo codice RGBA e la relativa opacità.

Esempio:

p{
background: rgba(164, 173, 183, .15);
}

Link utili:

Layout a più colonne

E possibile creare un layout a più colonne utilizzando un solo DIV specificando il numero delle colonne, la loro larghezza, la spaziatura e un eventuale elemento da utilizzare come separatore verticale.

Link utili:

Background multipli

Questa proprietà permette di applicare allo stesso elemento più di un’immagine di sfondo, potendo specificare per ognuna di esse le seguenti caratteristiche:

  • background-image
  • background-repeat
  • background-size
  • background-position
  • background-origin
  • background-clip

Link utili:

Word wrap

Questa proprietà permette di specificare se utilizzare il classico comportamento o se permettere di dividere una parola per evitare che esca dai margini prestabiliti.

Link utili:

Ombre dei testi

La possibilità di applicare ombreggiature ai testi era già presente nella versione 2 dei fogli di stile, ma ora il supporto è migliorato e con la release definitiva dei CSS3 dovrebbe essere supportato da tutti i browser.

Link utili:

L’attributo @font-face

Anche questa proprietà è supportata non ufficialmente dai browser già dalla versione 2 dei fogli di stile ma il supporto ufficiale dovrebbe arrivare solo con la nuova versione. I problemi collegati a questa proprietà, che permette di utilizzare font non di sistema all’interno delle proprie pagine web, riguardano i diritti d’autore sull’utilizzo di alcuni font.

Link utili:

Bordi arrotondati

Questa proprietà permette di arrontondare i bordi degli elementi HTML senza dover utilizzare Javascript, immagini o introducendo codice superfluo solo per ottenere questo effetto.

Link utili:

Bordi delle immagini

Questa proprietà permette di specificare dei bordi personalizzati da utilizzare per le proprie immagini: bordi molto più articolati di quelli che fino ad ora potevano essere definiti con l’attributo border.

Link utili:

Ombre dei box

Come per altre proprietà appena viste quest’ultima permette di implementare in modo molto più semplice, pulito per il markup e soprattutto veloce ombre per i box.

Link utili:

Dimensionamento dei box

Questa proprietà, assieme ad un futuro pensionamento di Internet Explorer 6, risolverà molti grattacapi per noi sviluppatori web. Infatti benchè introdotta già dalla versione 2.1 dei CSS, la futura versione 3 dovrebbe ufficializzare e rattificare le regole sul dimensionamento dei box: padding e bordi dovranno essere considerati quando si specificano le dimensioni di un box.

Link utili:

Media queries

Queste regole condizionali permetteranno di specificare all’interno dei fogli di stile caratteristiche differenti a seconda della tipologia di dispositivo che sta navigando all’interno del sito.

Link utili:

Speech

Sarà possibile specificare le caratteristiche dell’audio per i programmi che si occupano di leggere il contenuto delle pagine web come volume, bilanciamento, velocità e molte altre.

Link utili:

Risorse

Tag: ,

Questo articolo è stato pubblicato il mercoledì, 17 febbraio 2010 alle 09:48 e classificato in Browser, CSS. È possibile seguire tutte le repliche a questo articolo tramite il feed RSS 2.0. Puoi lasciare un commento, oppure fare il trackback dal tuo sito.

2 Commenti a “Tutte le nuove caratteristiche dei CSS3”

  1. egizio scrive:
    17 febbraio 2010 alle 17:42

    complimenti IE8!

  2. Mattia Biancardi scrive:
    17 febbraio 2010 alle 18:12

    Come accennavo nell’articolo le specifiche CSS3 non sono ancora state ratificate, per cui il supporto a queste funzionalità dovrebbe essere solo ufficioso.

Lascia un Commento

«
»