Différences entre CSS et CSS3

CSS (Cascading Style Sheets) et sa révision CSS3 sont des technologies pour mettre en forme des pages HTML. CSS a été créé pour gérer la présentation plus efficacement que le HTML pur. CSS2 étant universellement adopté, « CSS » sans numéro implique généralement CSS1+CSS2. CSS3 (en développement en 2014) ajoute des modules ; le support navigateur varie.

CSS3 est rétrocompatible avec CSS

CSS3 conserve toutes les fonctionnalités de CSS2 sans en déprécier. Il vise des pages plus belles, plus rapides à charger, et un développement plus court. CSS3 réduit la dépendance aux images pour le design (coins arrondis, dégradés), diminuant les requêtes HTTP et le temps de téléchargement. Les vieux navigateurs (IE9 et antérieurs) ne supportent pas bien les nouveautés CSS3, nécessitant parfois du code de repli.

CSS3 ajoute coins arrondis et dégradés

Avant CSS3, il fallait créer des images pour les bordures arrondies ou dégradés. En CSS3, quelques lignes suffisent :
.roundBorder { border-radius: 10px; }
Les dégradés demandent des préfixes navigateurs :
.gradBG { background: linear-gradient(white, black); } (syntaxe standard moderne).

CSS3 ajoute animations et effets de texte

CSS3 introduit text-shadow, word-wrap (coupure de mots longs), et des animations (transitions, keyframes) autrefois réservées à JavaScript/jQuery. Le W3C travaille encore sur la standardisation des animations web.

CSS3 définit les colonnes de texte

CSS3 permet de diviser un bloc de texte en plusieurs colonnes (style journal) via column-count, column-gap, etc. En CSS2, c'était très difficile à réaliser, surtout en design responsive où les lignes trop larges sur grand écran nuisent à la lisibilité.