Differenze tra CSS 2.1 e CSS3
Mercoledì 1 Settembre 2010 - 09:23
di Gabriele Romanato
I CSS 2.1 hanno rappresentato un pezzo di storia del Web degli ultimi dieci anni. Attualmente ancora in fase di ultimazione, essi hanno aperto la strada ai CSS3. I CSS3, infatti, presentano caratteristiche completamente nuove:
- Nuovi selettori, pseudo-classi e pseudo-elementi
I CSS3 si avvalgono ora di selettori più potenti che permettono di selezionare gli elementi in base alla presenza di nuovi token non contemplati nei CSS 2.1 e di nuovi contesti all’interno dell’albero del documento. Se prima potevamo selezionare un elemento in base alla presenza di un attributo:p[class] { }ora possiamo selezionarlo anche in base alla presenza di particolari stringhe al suo interno:
p[class^="html"] { }Ancora: possiamo selezionare elementi in base alla loro posizione nel DOM:
p:nth-child(3) {}o al loro essere in un particolare stato della UI (User Interface):
input:disabled {}L’unica differenza sintattica con i CSS 2.1 è che ora gli pseudo-elementi richiedono un doppio token due punti (::) invece che uno. Quindi se nei CSS 2.1 scrivevamo:
h1:before {}ora scriveremo:
h1::before {} - Supporto completo a XML
I CSS 2.1 non erano in grado di gestire i namespace XML. I CSS3 ora sono in grado di farlo tramite la regola @namespace:@namespace element "http://www.sito.it/ns/element/";
Inoltre i CSS3 consentono di gestire i nomi completi XML tramite il selettore ‘|’ che andrà a selezionare un elemento completo di suffisso:
element|suffix {} - Gestione completa del layout
I CSS3 consentono ora di avere il pieno controllo di un layout: posizionamento, colonne, sfondi multipli, trasparenze, angoli arrotondati, effetti sul testo e altro ancora.
- CSS per caratteristiche specifiche dei dispositivi
I CSS3 consentono ora di indirizzare gli stili non solo a dispositivi specifici, ma anche di specificare quali condizioni devono essere soddisfatte per l’applicazione di tali stili tramite le nuove regole @media:@media screen and (max-width: 800px) { }In questo caso gli stili andranno applicati a quei dispositivi la cui risoluzione di schermo non supera gli 800 pixel.
- Maggiore controllo sulla stampa
Con i CSS3 è ora possibile creare intestazioni, piè di pagina, note in calce e numerazione automatica delle pagine per la stampa.
Commenti
1
grazie per aver condiviso.
# - postato da simone - 01 Settembre 2010 - 16:06
2
Non c’è dubbio che i css3 migliorino la vita dei webengineer, ma il fatto che non siano supportati su tutti i browser attualmente installati, implica il dover creare doppiamente i propri fogli di stile (css2 e css3), mi sembra un lavoro troppo dispendioso ed aspetterei prima di iniziarli ad usare.
Forse sbaglio?
# - postato da Filippo - 03 Settembre 2010 - 08:22
3
I CSS3 contengono bellissime soluzioni.
Purtroppo, come ho scritto piu` volte nel forum CSS, non sono ancora praticamente utilizzabili nei siti generali, dato lo scarso supporto da parte dei browser.Pero` tutte queste “sperimentazioni” sono sicuramente valide: tra un paio d’anni forniranno una base di esempi corretti da cui tutti gli sviluppatori potranno prendere spunto per i loro lavori.
# - postato da Mich_ - 03 Settembre 2010 - 11:44