Tutoriel CSS3 - sommaire

Tutoriel CSS3 gratuit et en français - chapitre introductif

CSS est incontournable en matière de programmation web.
Même si vous développez avec des langages "côté serveur" comme PHP ou Python, vous avez besoin de solides notions en CSS (et HTML).

Pour les grands débutants en HTML & CSS, je leur conseille de visiter d'abord le tuto (dans le même site) : Débuter en programmation web (HTML & CSS & PHP)

Le présent tutoriel porte sur le CSS (Cascading Style Sheets) et plus précisément sur sa version 3. C'est grâce à des règles écrites avec la syntaxe CSS que les pages d'un site sont stylisées. En effet et à l'exception de quelques balises (B,S,I,U), le HTML ne gère plus la forme mais se contente de gérer le fond (sémantique et structure).
Le CSS ne cesse de s'enrichir de nouvelles fonctionnalités. Désormais pour de nombreux effets graphiques le JavaScript devient inutile ; les nouvelles propriétés CSS gèrent les transitions et animations.
Cependant CSS a ses limites ; certaines modifications du DOM ne peuvent pas être réalisées en CSS. Si vous voulez manipuler les attributs des éléments rajouter ou supprimer des éléments, il faut encore recourir au JavaScript.
Vous trouverez dans mon site, un tuto sur JavaScript (et son framework jQuery) : Tutoriel JavaScript

Des effets graphiques amusants via la version 3 de CSS

Compte tenu de la puissance de CSS3, il est possible désormais de dessiner et d'animer uniquement avec le couple HTML & CSS.
Ci-dessous des transformations 3D avec transitions réalisées via CSS3. Pour tout savoir sur les transformations 2D & 3D en CSS3

Animer avec CSS

On peut même réaliser des animations complexes sans devoir recourir au JavaScript.
Ci-dessous deux animations HTML & CSS (sans aucun script).

Première animation avec effet 3D

Un avion survole la piste d'atterisage en rase-motte. Et à la fin il "crève" l'écran.
Le code de cette animation 3D

Deuxième animation HTML5 & CCS3

Je tiens à préciser d'emblée que je suis l'auteur de la cette deuxième animation. Je me suis contenté de recopier le code sur un site très intéressant (lien ci-dessous).
Le code est un peu lourd mais c'est assez logique ; il faut dessiner la maison avec moultes détails, les arbres, les flocons, animer les flocons.
Et oui on peut dessiner avec CSS 3. L'élément DIV crée par défaut un rectangle mais avec certaines propriétés on peut transformer ledit rectangle en cercle (border-radius), en parallélogramme, losange (transformations). On peut superposer les éléments avec z-index, les ombrer, les colorier avec un dégradé, etc.
Suivez le lien : 24 animations CSS

Nouvelles fonctionnalités de la version 3

Les possibilités offertes par CSS3 sont "bluffantes".

Citons ci-dessous quelques outils introduits par cette version :
• de nouvelles unités de mesure très intéressantes : rem, vh, vw
• le positionnement des boites dans la page était en CSS 2 un vrai casse-tête.
  CSS 3 introduit deux nouveaux outils : grid-layout & flexbox.
• la norme CSS3 c'est aussi de nouvelles pseudo-classes utiles pour les tableaux, les formulaires et la numérotation des titres
• beaucoup de nouveautés aussi pour les boites avec les propriétés border-radius, box-shadow, clip-path, box-sizing, border-image, ...
• la propriété background est très enrichie
• le multicolonnage d'un texte se réalise désormais sans "prise de tête
• possibilité d'utiliser des "propriétés personnalisées" (variables)
• codage HSL des couleurs
• nouveaux effets pour le texte dont césure intelligente, sens de lecture, gestion des blancs, etc.
• dégradés radiaux et linéaires
• filtres sur les images
• découpage d'images et de zones de texte
• transformations 2D et 3D
• transitions et animations
• etc.

Dessiner avec CSS

Les possibilités graphiques de CSS sont toujours plus étendues. Citons quelques exemples :
• les boites ne sont pas forcément des rectangles mais peuvent prendre des formes diverses
• l'arrière-plan d'un boite peut être un superbe dégradé
• les images peuvent être découpées de façon originale
• les images et boites peuvent être ombrées

Une superbe toile impressionniste

Vous pensez que j'affiche une image (un fichier JPEG) et bien pas du tout.
Cette image est obtenue uniquement avec un instruction HTML et des règles de style CSS.
Je vous communique le code ci-dessous. ... <style> #cadre { border-image-source:url("border2.png"); border-image-width:50px; border-image-repeat:stretch; border-image-slice:100; } #cadre {height : 500px ; width : 60%; margin : 10px auto ; box-shadow : -20px -20px 20px gray; } ... <div id ="cadre" style ="background-image : radial-gradient(farthest-corner circle at center, yellow 0%, aqua 25%, skyblue 50%);"> </div>

Si vous ne comprenez rien à ce code, le parcours de ce tuto est nécessaire.

Objet du tuto "CSS"

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.
Il faut noter en parallèle la formidable évolution de HTML (avec la norme HTML 5).
Désormais les choses sont claires : le HTML ne s'occupe que du contenu et le CSS gère la mise en forme et entre autres l'affichage sur les petits écrans.

L'implémentation de HTML 5 & CSS 3 par les navigateurs est progressive.
L’usage de nouveaux éléments/attributs HTML OU de nouvelles propriétés CSS non reconnus par votre navigateur ne bloquera pas l'affichage de la page. Ce dernier ignora les nouvelles propriétés CSS et adoptera un mode dégradé pour le HTML inconnu.

Conseils

Si vos connaissances en CSS sont sommaires, lisez d'abord les pages de la partie "révisions CSS2".
Si vous êtes grand débutant, vous vous êtes trompé de tuto. Visitez d'abord (dans le même site) : Débuter en programmation web

CSS3 et les vieilles versions des navigateurs

Même sur les versions récentes des navigateurs toutes les nouveautés postérieures à la version 2.1 ne sont pas encore implémentées.
Il est facile de tester dans une feuille de style si le navigateur sait (ou ne sait pas) interpréter une nouvelle propriété CSS en écrivant du "CSS conditionnel" :
Exemple de style conditionnel : .coupure {word-break : break-all ;} @supports (hyphens :auto) {.coupure {word-break:normal; hyphens : auto;}}

Il faut produire deux règles de style et la deuxième démarre avec @support(propriété) (règle de style conditionnelle).
Ici on définit une classe "coupure" puis on pose un test dans la deuxième règle qui peut s'énoncer ainsi :
pour la classe 'coupure', si hyphens implémentée alors propriété word-break désactivée et propriété hyphens réglée à "auto"

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.
Quelques mots sur Boostrap

Les préprocesseurs CSS

On peut reprocher au CSS actuel de ne pas être assez ergonomique. La maintenance d'une feuille de style peut s'avérer chronophage. Aussi des préprocesseurs CSS sont proposés aux développeurs web.
Un préprocesseur CSS est un programme qui permet de générer du CSS standard ; un préprocessur propose quelques fonctionnalités qui qui ne sont pas encore implémentées dans le CSS standard.
Le plus célèbre est SASS. Le développeur écrit un pseudo code CSS simplifié et structuré (règles de style imbriquées, variables, etc. ) puis procède à la compilation de ce fichier (extension .scss) pour obtenir la feuille de style interprétable par le navigateur (fichier css).

Dans un futur proche ces outils devraient nativement être disponibles dans le CSS. C'est déjà le cas du module "custom properties". qui permet d'utiliser des variables CSS et d'un autre module qui permet de factoriser le code.
Chapitre sur les améliorations récentes du CSS