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 (transitions et animations, multicolonnage,...).

Si vous débutez en CSS lisez d'abord les pages de la partie "révisions CSS2" dans ce tuto.
Un grand débutant en HTML & CSS doit d'abord visiter (dans le même site) l'autre tuto : 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 :

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.

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 quand même une bonne connaissance du CSS et nécessite un apprentissage du framework.

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) même si la documentation parle de "grilles" ...

Sommaire de ce tuto