La specifica originale di Cascading Style Sheets, così come la sua revisione CSS3 molto più recente, sono tecnologie utilizzate per migliorare e formattare le pagine Web HTML. Il CSS è stato inizialmente progettato per gestire il livello di presentazione di una pagina Web in modo più efficiente rispetto alla formattazione con HTML, che non è mai stato concepito per gestire la complessa costruzione del Web contemporaneo. Poiché CSS2 è un'estensione universalmente adottata di CSS1, il termine CSS senza un 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.

Donna che lavora allo scrittorio in ufficio creativo occupato

CSS3 è retrocompatibile con CSS

CSS3 è un aggiornamento a CSS2 che mantiene la compatibilità con tutte le funzionalità CSS - CSS3 non deprezza qualsiasi codice CSS. Il codice CSS3 è progettato per migliorare l'aspetto e il caricamento delle pagine Web, nonché per ridurre i tempi di sviluppo per la creazione di pagine nel browser dell'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 dei file e i tempi di download utilizzando meno immagini. CSS1 si è concentrato sulla formattazione dell'aspetto, mentre CSS2 ha aggiunto funzionalità di posizionamento per testo e oggetti. Le versioni di browser precedenti come IE 9 e precedenti non supportano ampiamente le funzionalità aggiunte di CSS3, che possono richiedere tempi di sviluppo aggiuntivi per mantenere il codice di fallback CSS.

CSS3 aggiunge angoli arrotondati e sfumature

Prima di CSS3, gli sviluppatori Web dovevano progettare file di immagini per aggiungere elementi come angoli arrotondati per bordi strutturali e sfumature 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 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 un codice come ".gradBG {background: liner-gradient (bianco, nero);}".

CSS3 aggiunge funzionalità di animazione ed effetti di testo

CSS3 ha una manciata di funzioni non presenti nei CSS per migliorare l'aspetto dei tuoi elementi di pagina. Con CSS3, gli sviluppatori Web possono aggiungere un'ombra 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 animazioni 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 per leggere 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. Soprattutto con i siti che presentano un design reattivo, una tecnica di sviluppo che riorganizza e ridimensiona il contenuto 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.