Differenze tra CSS 2.1 e CSS3

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:

1. 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 {}
   

2. 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 {}
   

3. 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.

4. 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.

5. 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.