Accueil

Traduction

Tutoriel CSS - sommaire

Tutoriel CSS3 - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Tutoriel CSS - 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, votre site aura forcément une ou plusieurs feuilles de style codées en CSS.

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 mises en forme. 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 on peut réaliser de véritables animations uniquement avec le couple HTML & CSS.
Cependant CSS a ses limites ; certaines modifications du DOM ne peuvent pas être réalisées en CSS. Par exemple, si vous voulez manipuler les attributs des éléments ou rajouter/supprimer des éléments, il faut recourir au JavaScript.
Vous trouverez dans mon site, un tuto sur JavaScript (et son framework jQuery) : Tutoriel JavaScript

Animer avec 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 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

Dessiner avec CSS

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.

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 :

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