Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Differenze tra CSS 2.1 e CSS3

Link copiato negli appunti

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-) { }
    

    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.

Ti consigliamo anche