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 en HTML). Votre site écrit en PHP utilise aussi des feuilles de style ...
Les propriétés CSS d'un élément HTML peuvent être manipulées via le JavaScript.

Par ailleurs le CSS ne s'applique pas qu'aux éléments HTML mais aussi aux objets SVG (le SVG est un langage du web qui permet de réaliser de superbes dessins vectoriels pour le web).
Mon tuto sur le langage SVG

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. Ainsi si vous voulez modifier les attributs d'éléments existants OU rajouter ou supprimer des éléments au DOM, il faut alors recourir au JavaScript.
Vous trouverez dans mon site, un tuto sur JavaScript : mon tuto sur JavaScript
À lire en paralèlle avec ce tuto : didacticiel sur HTML5

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

Nouvelles fonctionnalités de la version 3 de CSS

Les possibilités offertes par CSS3 sont époustouflantes.

Citons ci-dessous quelques outils introduits par cette version :
• de nouvelles unités de mesure très intéressantes : rem, vh, vw,fr
• le positionnement des boites dans la page était en CSS2 un vrai casse-tête. CSS 3 introduit deux nouveaux outils : grid-layout & flexbox.
• la norme CSS3 c'est aussi de nouvelles pseudo-classes très utiles
• beaucoup de nouveautés aussi pour les boites et images avec de nouvelles propriétés pour découper, ombrer ces éléments
• 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" ; des variables, si vous préférez
• imbrication possible des sélecteurs afin de réduire sensiblement le nombre de règles de style
• codage HSL des couleurs
• nouveaux effets pour le texte dont césure intelligente, sens de lecture, gestion des blancs, etc.
• les dégradés linéaires et radiaux
• filtres sur les images, boites
• 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, floutées,etc.

Exemple : 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 une unique 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.

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, en parallélogramme, losange, etc. On peut superposer les éléments, les ombrer, les colorier avec un dégradé, etc.
Suivez le lien : 24 animations CSS

Substituer du CSS au JavaScript

Dans de nombreux cas on peut désormais utiliser le CSS 3 plutôt qu'un script JS.
Ci-dessous deux contextes où CSS3 peut remplacer JS.

Intercepter des événements

Comme le JavaScript, le CSS3 est capable lui aussi d'intercepter certains événements.
Exemple : un élément du DOM doit changer de couleur lorsqu'il est survolé par le curseur ; il faut bâtir une règle de style basée sur la pseudo-classe :hover.
Exemple 2 : un élément du DOM doit être agrandi lorqu'il est cliqué ; il faut construire une règle de style à partir de la pseudo-classe :active.
Par contre il n'est pas possible en CSS d'intercepter des événements comme double-clic, focus, blur, etc.

Protéger votre site du plagiat

La propriété CSS user-select permet de spécifier si l'élément HTML est sélectionnable.
Donc pour interdire au visiteur de sélectionner du texte dans votre site afin de le copier, il suffit d'écrire dans la feuille de style la règle suivante : body / * /main {user-select : none; }

Ce qui signifie que le contenu de BODY ou tout le contenu ou celui de MAIN n'est pas sélectionnable.
Mais un clic droit sur une image (qui donne accès au menu contextuel pour "copier l'image") est encore possible ...
Donc le texte est protégé techniquement mais pas les images. Le plus simple pour dissuader le plagieur potentiel de vouloir s'approprier vos images est d'ajouter sur celles-ci un filigrane.

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.

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é.

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 en programmation web, 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"

Frameworks et préprocesseurs CSS

Les frameworks

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 temps d'apprentissage de l'outil.
Le framework CSS le plus célèbre est 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 outils 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é puis procède à la compilation de ce fichier (extension .scss) pour obtenir la feuille de style interprétable par le navigateur (fichier css).

Certaines fonctionnalités des préprocesseurs CSS sont en cours de transposition dans le CSS standard.
Ainsi tous les navigateurs récents comprennent désormais les "propriétés personnalisées" et l'imbrication des sélecteurs. Par contre les "mixins" et les fonctions ne sont pas encore implémentées.
CSS standard : propriétés personnalisées & imbrication des sélecteurs