Differenze tra CSS e CSS3
La specifica originale dei Cascading Style Sheets, così come la sua revisione CSS3 molto più recente, sono tecnologie usate per migliorare e formattare pagine web HTML. CSS fu inizialmente progettato per gestire il livello di presentazione di una pagina web in modo più efficiente che formattando con HTML, che non fu mai pensato per gestire la complessa costruzione del web contemporaneo. Poiché CSS2 è un'estensione universalmente adottata di CSS1, il termine CSS senza numero implica l'inclusione di CSS2. La specifica CSS3 è ancora in sviluppo a luglio 2014, quindi gli sviluppatori web devono considerare che il supporto delle funzionalità varia tra browser.
CSS3 è retrocompatibile con CSS
CSS3 è un aggiornamento a CSS2 che mantiene la compatibilità con tutte le funzionalità di CSS – CSS3 non depreca nessun codice CSS. Il codice CSS3 è progettato per far apparire le pagine web meglio e caricarle più velocemente, nonché ridurre il tempo di sviluppo per costruire pagine nel browser dell'utente. CSS3 rende il web design meno dipendente dai file immagine per elementi di design delle pagine e riduce le richieste di trasferimento file e i tempi di download usando meno immagini. CSS1 si concentrava sulla formattazione dell'aspetto, mentre CSS2 aggiungeva capacità di posizionamento per testo e oggetti. Versioni browser vecchie come IE 9 e precedenti non supportano ampiamente le funzionalità aggiunte di CSS3, che può richiedere tempo extra di sviluppo per mantenere codice fallback CSS.
CSS3 aggiunge angoli arrotondati e gradienti
Prima di CSS3, gli sviluppatori web dovevano progettare file immagine per aggiungere cose come angoli arrotondati per bordi strutturali e gradienti di immagini di sfondo; CSS3 include funzionalità comparabili che possono essere aggiunte con poche righe di codice. In CSS, uno sviluppatore deve progettare un bordo o gradiente, caricarlo sul server immagini, posizionare l'immagine sulla pagina e usare CSS per posizionare correttamente il bordo. In CSS3, lo sviluppatore può fare qualcosa di simile con codice come ".roundBorder{border-radius:10px;}". I gradienti di sfondo sono un po' più complicati e richiedono codice diverso per browser diversi. Ad esempio, un gradiente bianco-nero per Chrome e IE usa codice come ".gradBG{background: linear-gradient(white,black);}".
CSS3 aggiunge funzionalità di animazione ed effetti testo
CSS3 ha una manciata di funzionalità non presenti in CSS per migliorare l'aspetto degli elementi della pagina. Con CSS3, gli sviluppatori possono aggiungere text-shadow al testo per renderlo più leggibile o aggiungere stile visivo e possono forzare interruzioni di riga dentro parole più lunghe per farle stare dentro colonne con word wrap. Prima di CSS3, gli sviluppatori dovevano codificare animazioni in linguaggi di scripting come JavaScript e jQuery; CSS3 aggiunge diverse funzionalità di animazione al livello di design. Il W3C sta ancora lavorando su uno standard per animazioni web per risolvere problemi di compatibilità tra diverse tecniche di animazione.
CSS3 definisce colonne di testo
CSS3 aggiunge la capacità di dividere sezioni di testo in colonne multiple per leggere come un giornale. Nella specifica CSS2, gli sviluppatori hanno difficoltà a costruire sezioni di testo multi-colonna perché lo standard non è equipaggiato per dividere automaticamente il testo. Particolarmente con siti che presentano design responsive, una tecnica di sviluppo che riordina e ridimensiona contenuti basandosi sulla risoluzione dello schermo del dispositivo di visualizzazione, persone con monitor grandi potrebbero avere difficoltà a leggere righe di testo che si estendono attraverso lo schermo.