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 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 considérer que la prise en charge des fonctionnalités varie selon les navigateurs.

CSS3 est une mise à jour de CSS2 qui maintient la compatibilité avec toutes les fonctionnalités de CSS -- CSS3 ne désapprouve 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 pour créer des 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 la mise en forme 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 maintenir le code de secours CSS.

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 des 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. Dans 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é du blanc au noir pour Chrome et IE utilise un code tel que ".gradBG{background: liner-gradient (white, black);}".

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 le rendre plus facile à lire ou ajouter une touche visuelle et peuvent forcer les sauts de ligne dans les mots plus longs pour les faire tenir dans les colonnes avec un retour à la ligne. Avant CSS3, les développeurs Web devaient coder l'animation dans des langages de script tels que 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 ajoute la possibilité de diviser les 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 un design réactif, une technique de développement qui réorganise et redimensionne le contenu en fonction du affichage de la résolution de l'écran de l'appareil, les personnes équipées de moniteurs plus grands peuvent avoir du mal à lire les lignes de texte qui s'étendent sur le filtrer.