Differenze tra CSS e CSS3

La specifica originale dei fogli di stile a cascata, così come la sua revisione CSS3 molto più recente, sono tecnologie utilizzate per migliorare e formattare le pagine Web HTML. I CSS sono stati inizialmente progettati per gestire il livello di presentazione di una pagina Web in modo più efficiente di formattazione con HTML, che non è mai stata pensata 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. Le specifiche CSS3 sono ancora in fase di sviluppo a partire da luglio 2014, quindi gli sviluppatori Web devono considerare che il supporto delle funzionalità varia tra i browser.

CSS3 è un aggiornamento di CSS2 che mantiene la compatibilità con tutte le funzionalità CSS: CSS3 non depreca alcun codice CSS. Il codice CSS3 è progettato per migliorare l'aspetto delle pagine Web e caricarle più velocemente, oltre a ridurre i tempi di sviluppo per creare pagine nel browser di un utente. CSS3 rende il Web design meno dipendente dai file di immagine per gli elementi di design della pagina e riduce le richieste di trasferimento di file e il tempo di download utilizzando meno immagini. CSS1 si è concentrato sulla formattazione dell'aspetto, mentre CSS2 ha aggiunto capacità di posizionamento per testo e oggetti. Le versioni precedenti del browser come IE 9 e precedenti non supportano ampiamente le funzionalità aggiuntive di CSS3, che possono richiedere tempi di sviluppo aggiuntivi per mantenere il codice di fallback CSS.

Prima dei CSS3, gli sviluppatori Web dovevano progettare file di immagine per aggiungere elementi 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 Web deve progettare un bordo o un gradiente, caricarlo sul server di immagini, posizionare l'immagine sulla pagina e utilizzare i CSS per posizionare correttamente il bordo. In CSS3, lo sviluppatore Web può realizzare qualcosa di simile con codice come ".roundBorder{border-radius: 10px;}". I gradienti di sfondo sono un po' più complicati e richiedono un codice diverso per browser diversi. Ad esempio, un gradiente da bianco a nero per Chrome e IE utilizza codice come ".gradBG{background: liner-gradient (white, black);}".

CSS3 ha una manciata di funzionalità non presenti nei CSS per migliorare l'aspetto degli elementi della tua pagina. Con CSS3, gli sviluppatori Web possono aggiungere un'ombra di testo al testo per renderlo più facile da leggere o aggiungere un tocco visivo e possono forzare le interruzioni di riga all'interno di parole più lunghe per adattarle alle colonne con ritorno a capo. Prima di CSS3, gli sviluppatori Web avevano bisogno di codificare l'animazione in linguaggi di scripting come JavaScript e jQuery; CSS3 aggiunge diverse funzionalità di animazione al livello di progettazione. Il W3C sta ancora lavorando su uno standard di animazione Web per risolvere problemi di compatibilità tra le diverse tecniche di animazione.

CSS3 aggiunge la capacità di dividere le sezioni di testo in più colonne per leggerle come un giornale. Nelle specifiche CSS2, gli sviluppatori Web hanno difficoltà a costruire sezioni di testo multi-colonna perché lo standard non è attrezzato per dividere automaticamente il testo. In particolare con i siti che presentano un design responsive, una tecnica di sviluppo che riorganizza e ridimensiona i contenuti in base al visualizzando la risoluzione dello schermo del dispositivo, le persone con monitor più grandi potrebbero avere difficoltà a leggere le righe di testo che si estendono schermo.