Traduction
Tutoriel CSS - sommaire
Sommaire partiellement masqué - faites défiler !
Tutoriel CSS - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Sommaire partiellement masqué - faites défiler !
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Le présent tutoriel porte sur le CSS (Cascading Style Sheets).
C'est grâce à des règles écrites avec la syntaxe CSS que les pages d'un site sont mises en forme.
A l'exception de quelques balises telles B,I,S,U, le HTML ne gère plus le style mais se focalise sur le contenu de la page
(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.
Le champ d'application du CSS est de plus en plus étendu ; vous pouvez animer des objets SVG via le CSS. Je précise que le SVG est un langage XML, pas assez connu, qui permet de dessiner dans des pages web. Vous trouverez dans ce même site un tutoriel sur SVG : dessinez avec SVG
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 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
Compte tenu de la puissance de CSS 3, 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).
Ci-dessous une animation réalisée uniquement en HTML & CSS mais CSS version 3 avec emploi des nouvelles propriétés d'animation et de transformation.
Pour visualiser le code de cette animation
Vous connaissez tous les "boules de neige" que l'on trouve dans les boutiques de souvenirs.
Je tiens à préciser d'emblée que je ne suis pas l'auteur de ce code. Je me suis contenté de le recopier 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
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.
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 le didacticiel (dans le même site) :
Débuter en HTML & CSS
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. 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 sait (ou ne sait pas) interpréter une nouvelle propriété CSS en
écrivant du "CSS conditionnel" :
Exemple de style conditionnel :
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 interprétée par le navigateur. Dans ce cas il faut désactiver
la propriété word-break (word-break : none) et activer hyphens (hyphens :auto).
Le CSS conditionnel est bien sûr évoqué dans ce tuto. Il est particulièrement utilisé pour tester la largeur (en pixels) du terminal : "responsive design".
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
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 dispose de quelques fonctionnalités qui
n'existent pas actuellement telles que variables, sélecteur d'imbrication, etc.
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.