Différences entre CSS et CSS3

La spécification originale des feuilles de style en cascade, ainsi que sa révision CSS3 beaucoup plus récente, sont des technologies utilisées pour améliorer et formater les pages Web HTML. CSS a été initialement conçu pour gérer la couche de présentation d'une page Web d'une manière plus efficace que le formatage avec HTML, qui n'a jamais été conçu pour gérer la construction complexe du Web contemporain. Parce que CSS2 est une extension universellement adoptée de CSS1, le terme CSS sans numéro implique l'inclusion de CSS2. La spécification CSS3 est toujours en cours de développement en juillet 2014, les développeurs Web doivent donc tenir compte de la prise en charge des fonctionnalités qui varie d'un navigateur à l'autre.

CSS3 est rétrocompatible avec CSS

CSS3 est une mise à jour de CSS2 qui maintient la compatibilité avec toutes les fonctionnalités de CSS - CSS3 ne déprécie aucun code CSS. Le code CSS3 est conçu pour améliorer l'apparence et le chargement des pages Web, ainsi que pour réduire le temps de développement nécessaire à la création de pages dans le navigateur d'un utilisateur. CSS3 rend la conception Web moins dépendante des fichiers image pour les éléments de conception de page et réduit les demandes de transfert de fichiers et le temps de téléchargement en utilisant moins d'images. CSS1 s'est concentré sur le formatage de l'apparence, tandis que CSS2 a ajouté des capacités de positionnement pour le texte et les objets. Les anciennes versions de navigateur comme IE 9 et les versions antérieures ne prennent pas largement en charge les fonctionnalités ajoutées de CSS3, ce qui peut nécessiter un temps de développement supplémentaire pour conserver le code de secours CSS.

CSS3 ajoute des coins arrondis et des dégradés

Avant CSS3, les développeurs Web devaient concevoir des fichiers image pour ajouter des éléments tels que des coins arrondis pour les bordures structurelles et les dégradés d'image d'arrière-plan ; CSS3 inclut des fonctionnalités comparables qui peuvent être ajoutées avec quelques lignes de code. En CSS, un développeur Web doit concevoir une bordure ou un dégradé, le télécharger sur le serveur d'images, placer l'image sur la page et utiliser CSS pour positionner correctement la bordure. En CSS3, le développeur Web peut accomplir quelque chose de similaire avec du code comme ".roundBorder{border-radius:10px;}". Les dégradés d'arrière-plan sont un peu plus compliqués et nécessitent un code différent pour différents navigateurs. Par exemple, un dégradé de blanc à noir pour Chrome et IE utilise un code tel que ".gradBG{background :liner-gradient(white,black);}".

CSS3 ajoute des fonctionnalités d'animation et des effets de texte

CSS3 a une poignée de fonctionnalités non présentes dans CSS pour améliorer l'apparence des éléments de votre page. Avec CSS3, les développeurs Web peuvent ajouter une ombre de texte au texte pour faciliter la lecture ou ajouter une touche visuelle et peuvent forcer des sauts de ligne dans des mots plus longs pour les faire tenir dans des colonnes avec retour à la ligne. Avant CSS3, les développeurs Web devaient coder l'animation dans des langages de script comme JavaScript et jQuery; CSS3 ajoute plusieurs fonctionnalités d'animation à la couche de conception. Le W3C travaille toujours sur une norme d'animation Web pour résoudre les problèmes de compatibilité entre les différentes techniques d'animation.

CSS3 définit les colonnes de texte

CSS3 ajoute la possibilité de diviser des sections de texte en plusieurs colonnes pour les lire comme un journal. Dans la spécification CSS2, les développeurs Web ont du mal à construire des sections de texte multi-colonnes car la norme n'est pas équipée pour diviser automatiquement le texte. En particulier avec les sites qui présentent une conception réactive, une technique de développement qui réorganise et redimensionne le contenu en fonction de la résolution de l'écran de l'appareil de visualisation, les personnes disposant d'écrans plus grands peuvent avoir du mal à lire les lignes de texte qui s'étalent sur l'écran.