Accueil

Tutoriel CSS version 3

Ci-dessous une animation réalisée uniquement en HTML & CSS - mais CSS version 3 : emploi des nouvelles propriétés d'animation et de transformation.

1
2
3
4
5
6

Objet du tuto "CSS version 3"

Les nouveautés apportées par la version 3 de CSS sont époustouflantes. Mais, et c'est le revers de la médaille, le CSS est de plus en plus complexe.
Dans de nombreux cas il se substitue à JavaScript. Ainsi on peut désormais réaliser des animations via CSS.
CSS3 révolutionne le positionnement (point faible du CSS2). Il propose aussi un outil simple pour que la page s'adapte à tous les écrans.
Si vous débutez en CSS lisez d'abord les pages de la partie "révisions CSS2".
Pour les grands débutants visitez d'abord (dans le même site) : débuter en HTML & CSS

Nouvelles fonctionnalités de la version 3

Les possibilités offertes par CSS3 sont impressionnantes. Citons quelques nouvelles fonctionnalités introduites par cette version :

Les frameworks CSS

Un framework CSS propose des feuilles de style donc des styles par défaut pour les différents éléments HTML mais aussi des classes.
Un framework CSS permet donc de développer plus rapidement un site.
Cependant l'utilisation d'un framework CSS suppose une bonne connaissance du CSS et nécessite un apprentissage.

Le framework CSS le plus célèbre est Boostrap qui est développé par Twitter.
Dès la version 4 (de 2014) l’outil permet de créer un site web réactif (adapté à tous les écrans). Il repose sur l'outil de positionnement flexbox (boites flexibles).

CSS3 et les vieilles versions des navigateurs

Même sur les versions récentes des navigateurs toutes les spécifications de la norme CSS3 ne sont pas encore implémentées.
La dernière version de MS Edge (qui date de 2020) a rattrapé un énorme retard qu'avait pris ce navigateur ; il était temps.

Il est facile de tester dans une feuille de style si le navigateur utilisé par l'internaute sait (ou pas) interpréter une nouvelle propriété CSS.
Exemple :

	.coupure {word-break : break-all ;}
	@supports (hyphens) {.coupure {word-break:none; hyphens : auto;}}

Dans le cadre de la classe "coupure" la césure sera effectuée par l'ancienne propriété word-break (qui coupe n'importe où). A moins que la nouvelle propriété hyphens (coupure intelligente du mot) soit supportée par le navigateur. Dans ce cas il faut désactiver la propriété word-break (word-break : none) et activer hyphens.

Sommaire de ce tuto