Differenze tra CSS e CSS3
La specifica originale Cascading Style Sheets, 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 rispetto alla formattazione con HTML, che non è mai stata concepita 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 è retrocompatibile con CSS
CSS3 è un aggiornamento di CSS2 che mantiene la compatibilità con tutte le funzionalità di CSS -- CSS3 non depreca il codice CSS. Il codice CSS3 è progettato per migliorare l'aspetto e il caricamento delle pagine Web, nonché per ridurre i tempi di sviluppo per creare pagine nel browser dell'utente. CSS3 rende il Web design meno dipendente dai file di immagine per gli elementi di progettazione della pagina e riduce le richieste di trasferimento di file e il tempo di download utilizzando un minor numero di immagini. CSS1 si è concentrato sulla formattazione dell'aspetto, mentre CSS2 ha aggiunto funzionalità 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 CSS di riserva.
CSS3 aggiunge angoli arrotondati e sfumature
Prima di CSS3, gli sviluppatori Web dovevano progettare file di immagine per aggiungere elementi come angoli arrotondati per bordi strutturali e gradienti dell'immagine 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 una sfumatura, caricarlo sul server di immagini, posizionare l'immagine sulla pagina e utilizzare 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 codice diverso per browser diversi. Ad esempio, una sfumatura da bianco a nero per Chrome e IE utilizza codice come ".gradBG{background:liner-gradient(white,black);}".
CSS3 aggiunge funzioni di animazione ed effetti di testo
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'ombreggiatura di testo al testo per semplificare la lettura o aggiungere un tocco visivo e possono forzare le interruzioni di riga all'interno di parole più lunghe per adattarle all'interno delle colonne con il ritorno a capo automatico. Prima di CSS3, gli sviluppatori Web dovevano 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 i problemi di compatibilità tra le diverse tecniche di animazione.
CSS3 definisce le colonne di testo
CSS3 aggiunge la possibilità di dividere sezioni di testo in più colonne da leggere come un giornale. Nelle specifiche CSS2, gli sviluppatori Web hanno difficoltà a costruire sezioni di testo a più colonne perché lo standard non è attrezzato per dividere automaticamente il testo. In particolare con i siti che presentano un design reattivo, una tecnica di sviluppo che riorganizza e ridimensiona i contenuti in base alla risoluzione dello schermo del dispositivo di visualizzazione, le persone con monitor più grandi potrebbero avere difficoltà a leggere le righe di testo che si estendono sullo schermo.