Beaucoup de gens me demandent de leur recommander des tutoriels sur divers aspects de CSS ou me demandent comment apprendre CSS. Je vois aussi beaucoup de personnes qui ont du mal à comprendre certaines parties de CSS, en raison parfois d'idées dépassées sur le langage. Le langage CSS a considérablement évolué ces dernières années, c'est donc le moment idéal pour rafraîchir nos connaissances. Même si le CSS ne représente qu'une petite partie de votre travail, c'est grâce au CSS que les choses finissent par ressembler à ce que nous voulons à l'écran, et il vaut donc la peine d'être raisonnablement à jour.

Cet article a pour but de présenter les principes fondamentaux de CSS et les ressources à consulter pour approfondir les domaines essentiels du développement CSS moderne. La plupart de ces ressources se trouvent ici même (sur Smashing Magazine), mais j'ai également sélectionné d'autres ressources et des personnes à suivre dans des domaines-clés du CSS. Il ne s'agit pas d'un guide complet pour les débutants, ni d'un guide destiné à couvrir absolument tous les aspects de CSS. Mon objectif est de couvrir l'essentiel du CSS moderne en me concentrant sur quelques domaines qui vous aideront à accéder au reste du langage.

Notions fondamentales du langage

Pour l'essentiel de CSS, vous n'avez pas à vous soucier d'apprendre les propriétés et les valeurs par cœur, vous pourrez les retrouver (NdT : sur MDN par exemple) lorsque vous en aurez besoin. Cependant, il existe certains fondamentaux du langage, sans lesquels vous aurez du mal à vous y retrouver. Il vaut vraiment la peine de consacrer un peu de temps à vous assurer que vous comprenez ces éléments, vous gagnerez du temps et vous éviterez beaucoup de frustration à long terme.

Les sélecteurs, plus qu'une simple classe

Un sélecteur fait ce qu'il est censé faire : il sélectionne une partie de votre document afin que vous puissiez lui appliquer des règles CSS. L'utilisation d'une classe ou l'application d'un style à un élément HTML tel que body, est généralement familière à tous, mais il existe un grand nombre de sélecteurs plus avancés qui peuvent sélectionner des éléments en fonction de leur emplacement dans le document, par exemple parce qu'ils viennent directement après un élément ou que ce sont les rangées impaires d'un tableau.

Les sélecteurs faisant partie de la spécification de niveau 3 (vous avez peut-être déjà entendu parler d'eux sous le nom de sélecteurs de niveau 3) sont très bien pris en charge par les navigateurs. Pour un examen détaillé des différents sélecteurs que vous pouvez utiliser, consultez la référence MDN.

Certains sélecteurs agissent comme si vous aviez appliqué une classe à un élément du document. Par exemple, p:first-child se comporte comme si vous aviez ajouté une classe au premier élément p. Ces sélecteurs sont connus sous le nom de sélecteurs de pseudo-classe.

Les sélecteurs de pseudo-éléments quant à eux agissent comme si un élément était inséré dynamiquement, par exemple ::first-line agit de la même manière que si vous aviez enveloppé la première ligne de texte dans un span. Toutefois, il s'applique à nouveau si la longueur de la ligne change, ce qui ne serait pas le cas si vous insériez l'élément. Ces sélecteurs peuvent être assez complexes. Dans le CodePen ci-dessous, vous trouverez un exemple de pseudo-élément enchaîné avec une pseudo-classe. Nous ciblons le premier élément p avec une pseudo-classe :first-child, puis le sélecteur ::first-line sélectionne la première ligne de cet élément, agissant comme si un span était ajouté autour de cette première ligne afin de la mettre en gras et d'en changer la couleur.

voir first-line de rachelandrew dans CodePen

L'héritage et la cascade

La cascade définit la règle qui l'emporte lorsque plusieurs règles peuvent s'appliquer à un élément. Si vous avez déjà été dans une situation où vous ne compreniez pas pourquoi certains CSS ne semblaient pas s'appliquer, il est probable que la cascade en soit responsable. La cascade est étroitement liée à l'héritage, qui définit quelles propriétés sont héritées par les éléments enfants de l'élément auquel elles sont appliquées. Elle est également liée à la spécificité ; les différents sélecteurs ont une spécificité différente qui détermine lequel l'emporte lorsque plusieurs sélecteurs peuvent s'appliquer à un élément.

Remarque : pour bien comprendre toutes ces notions, je vous suggère de lire la section Cascade et héritage dans l'intro à CSS de MDN.

👉🏿  La Cascade recommande aussi la lecture de Cascade et priorité des sélecteurs de Laurent Denis dans openweb.

Si vous avez du mal à appliquer un CSS à un élément, les DevTools de votre navigateur sont le meilleur endroit pour commencer vos investigations. Regardez l'exemple ci-dessous dans lequel j'ai un élément h1 ciblé par le sélecteur d'élément h1 et qui rend le titre orange. J'utilise également une classe, qui donne à l'élément h1 la couleur rebeccapurple. La classe est plus spécifique et le h1 est donc violet et non orange. Dans DevTools, vous pouvez voir que le sélecteur d'élément est barré car il ne s'applique pas. Une fois que vous avez constaté que le navigateur reçoit votre CSS (mais que quelque chose d'autre a pris le dessus), vous pouvez commencer à chercher à savoir pourquoi.

voir spécificité de rachelandrew dans CodePen

Le modèle de boîte

Les CSS sont des boîtes. Tout ce qui est affiché à l'écran a une boîte, et le modèle de boîte décrit la façon dont la taille de cette boîte est calculée, en tenant compte des marges, du padding et des bordures. Le modèle de boîte CSS standard prend la largeur que vous avez donnée à un élément, puis ajoute à cette largeur le padding et la bordure, ce qui signifie que l'espace occupé par l'élément est plus grand que la largeur que vous lui avez donnée.

Plus récemment, nous avons pu choisir d'utiliser un autre modèle de boîte qui utilise la largeur donnée à l'élément comme la largeur de l'élément visible à l'écran. Tout padding ou bordure insère le contenu de la boîte à partir des bords. Cela est beaucoup plus logique pour de nombreuses mises en page.

Dans la démo ci-dessous, j'ai deux boîtes. Elles ont toutes deux une largeur de 200 pixels, une bordure de 5 pixels et un padding de 20 pixels. La première boîte utilise le modèle de boîte standard et occupe donc une largeur totale de 250 pixels. La seconde utilise le modèle de boîte alternatif et a donc une largeur de 200 pixels.

voir modèle de boîte de rachelandrew dans CodePen

Là encore, les DevTools du navigateur peuvent nous aider à comprendre le modèle de boîte utilisé. Dans l'image ci-dessous, j'utilise Firefox DevTools pour inspecter une boîte utilisant le modèle de boîte content-box par défaut. Les outils m'indiquent qu'il s'agit du modèle de boîte utilisé, et je peux voir le dimensionnement et la façon dont la bordure et le remplissage sont ajoutés à la largeur que j'ai attribuée.

Remarque : avant IE6, Internet Explorer utilisait un autre modèle de boîte, avec un padding et des bordures insérant le contenu en dehors de la largeur donnée. Pendant un certain temps, les navigateurs ont donc utilisé des modèles de boîtes différents ! Lorsque vous rencontrez des problèmes d'interopérabilité aujourd'hui, réjouissez-vous que les choses se soient améliorées et que les navigateurs ne calculent pas la largeur des objets de manière différente.

Vous trouverez une bonne explication du modèle de boîte et du dimensionnement des boîtes dans CSS Tricks, ainsi qu'une explication de la meilleure façon d'utiliser globalement le modèle de boîte alternatif dans votre site.

👉🏿  La Cascade recommande aussi la lecture de Contrôler le modèle de boîte d'Ire Aderinokun, et de Box-sizing pour les nuls de Paula Borowska, publiés ici même.

Flux normal

Si vous avez un document dont le contenu est balisé par du HTML et que vous le visualisez dans un navigateur, il sera, avec un peu de chance, lisible. Les titres et les paragraphes commencent sur une nouvelle ligne, les mots s'affichent comme une phrase avec un seul espace blanc entre eux. Les balises de mise en forme, telles que em, n'interrompent pas le flux de la phrase. Ce contenu s'affiche en mode Normal Flow ou Block Flow Layout. Chaque partie du contenu est décrite comme étant "en flux" ; elle connaît le reste du contenu et ne se chevauche donc pas.

Si vous travaillez avec ce comportement plutôt que contre lui, votre vie sera beaucoup plus facile. C'est l'une des raisons pour lesquelles il est très utile de commencer par un document HTML correctement balisé. En effet, grâce au flux normal et aux feuilles de style intégrées des navigateurs qui le respectent, votre contenu commence à être lisible.

Contextes de formatage

Une fois que vous avez un document dont le contenu est en flux normal, vous pouvez souhaiter modifier l'apparence d'une partie de ce contenu. Pour ce faire, vous devez modifier le contexte de mise en forme de l'élément. Par exemple, si vous souhaitez que tous vos paragraphes soient regroupés et ne commencent pas sur une nouvelle ligne, vous pouvez changer l'élément p en display : inline, ce qui le fait passer d'un contexte de bloc à un contexte de mise en forme en ligne.

Les contextes de mise en forme définissent essentiellement un type externe et un type interne. Le type externe contrôle le comportement de l'élément par rapport aux autres éléments de la page, tandis que le type interne contrôle l'apparence des enfants. Ainsi, par exemple, lorsque vous dites display : flex, vous définissez le contexte extérieur comme étant un contexte de formatage de bloc et les enfants comme ayant un contexte de formatage de flex.

Remarque : La dernière version de la spécification d'affichage modifie les valeurs de display pour déclarer explicitement la valeur intérieure et extérieure. Par conséquent, à l'avenir, vous pourrez dire display : block flex ; (block étant la valeur externe et flex la valeur interne).

Pour en savoir plus sur l'affichage, rendez-vous sur MDN.

Être dans ou hors du flux

Les éléments CSS sont décrits comme étant "dans le flux" ou "hors du flux". Les éléments dans le flux sont dotés d'un espace et cet espace est respecté par les autres éléments dans le flux. Si vous sortez un élément du flux, en le faisant flotter ou en le positionnant, l'espace de cet élément ne sera plus respecté par les autres éléments dans le flux.

Cela se remarque surtout avec les éléments positionnés de manière absolue. Si vous donnez à un élément une position : absolute, il est sorti du flux, vous devrez alors vous assurer que vous n'avez pas une situation dans laquelle l'élément hors du flux chevauche et rend illisible une autre partie de votre mise en page.

voir positionnement absolu hors du flux de rachelandrew dans CodePen

Quant aux éléments flottants, ils sont également retirés du flux et, même si le contenu qui suit semble s'enrouler autour d'eux, on peut voir en plaçant une couleur de fond sur la boîte des éléments suivants qu'en réalité ils se sont élevés, ont raccourci leurs lignes, et ignorent l'espace utilisé par l'élément flottant.

voir élément flottant hors du flux de rachelandrew dans CodePen

Vous pouvez en savoir plus sur les éléments en flux et hors flux sur MDN. Ce qu'il faut retenir, c'est que si vous retirez un élément du flux, vous devez gérer vous-même le chevauchement, car les règles habituelles de mise en page du flux de blocs ne s'appliquent plus.

Mise en page

Pendant plus de quinze ans, nous avons fait de la mise en page en CSS sans système de mise en page conçu pour ce travail. Cela a changé. Nous disposons désormais d'un système de mise en page parfaitement adapté, qui comprend la grille (Grid) et le Flexbox, mais aussi la mise en page en colonnes multiples et les anciennes méthodes de mise en page utilisées à bon escient. Si la mise en page CSS est un mystère pour vous, rendez-vous sur le tutoriel MDN Learn Layout, ou lisez mon article Getting Started With CSS Layout dans Smashing Magazine.

N'imaginez pas que des méthodes telles que Grid et Flexbox soient de quelque façon concurrentes. Pour bien utiliser Layout, vous constaterez parfois qu'un composant est meilleur en tant que composant Flexbox et parfois en tant que Grid. À l'occasion, vous voudrez le comportement de flux de colonnes de multicol. Tous ces choix sont valables. Si vous avez l'impression de vous battre contre le comportement d'un élément, c'est en général un très bon signe qu'il vaut sans doute la peine de prendre du recul et d'essayer une approche différente. Nous avons tellement l'habitude de bidouiller les CSS pour leur faire faire ce que nous voulons que nous risquons d'oublier que nous avons pas mal d'autres options à disposition.

La mise en page est mon principal domaine d'expertise et j'ai écrit un certain nombre d'articles dans Smashing Magazine et ailleurs pour essayer d'aider à apprivoiser le nouveau paysage de la mise en page. En plus de l'article sur la mise en page mentionné ci-dessus, j'ai tout une série d'articles sur Flexbox - commencez par Que se passe-t-il quand on crée un Flexbox Flex Container. Dans l'article Grid By Example, je propose toute une série de petits exemples de CSS Grid, ainsi qu'un tutoriel vidéo.

En outre, et surtout pour les designers, jetez un coup d'œil à Jen Simmons et à sa série de vidéos Layout Land.

Alignement

J'ai séparé l'alignement de la mise en page en général car, bien que la plupart d'entre nous aient été initiés à l'alignement dans le cadre de Flexbox, ces propriétés s'appliquent à toutes les méthodes de mise en page et il est utile de les comprendre dans ce contexte plutôt que de penser à "l'alignement Flexbox" ou "l'alignement CSS Grid". Nous disposons d'un ensemble de propriétés d'alignement qui fonctionnent de manière commune dans la mesure du possible ; elles présentent ensuite quelques différences dues au comportement des différentes méthodes de mise en page.

Sur MDN, vous pouvez étudier l'alignement des boîtes et la manière dont il est mis en œuvre pour la grille, Flexbox, Multicol et la disposition en blocs. Dans Smashing Magazine, j'ai un article qui traite spécifiquement de l'alignement dans Flexbox : CSS Flexbox et l'alignement, guide complet.

Dimensionnement

J'ai passé une grande partie de 2018 à parler de la spécification de dimensionnement intrinsèque et extrinsèque, et de la façon dont elle se rapporte à Grid et à Flexbox en particulier. Sur le web, nous sommes habitués à définir le dimensionnement en longueurs ou en pourcentages, car c'est ainsi que nous avons pu réaliser des mises en page de type Grid à l'aide de nombres flottants. Toutefois, les méthodes de mise en page modernes peuvent effectuer une grande partie de la répartition de l'espace à notre place, si nous les laissons faire. Il vaut la peine de comprendre comment Flexbox attribue l'espace (ou comment fonctionne l'unité fr Grid).

Dans Smashing Magazine, j'ai écrit sur le dimensionnement dans la mise en page en général et aussi pour Flexbox dans How Big Is That Flexible Box ?

Conception réactive

Nos nouvelles méthodes de mise en page (Grid et Flexbox) nous permettent souvent d'utiliser moins de media queries qu'avec nos anciennes méthodes, car elles sont flexibles et répondent aux changements de taille des fenêtres ou des composants sans que nous ayons besoin de modifier la largeur des éléments. Cependant, il y aura des endroits où vous voudrez ajouter des breakpoint pour améliorer votre design.

Pour les media queries, en général, consultez mon article Utiliser les media queries pour le Responsive Design en 2018. J'y jette un coup d'œil à ce que les media queries peuvent faire pour nous, et je montre également les nouvelles fonctionnalités à venir pour les media queries dans le niveau 4 de la spécification.

Polices et typographie

Parallèlement à la mise en page, l'utilisation des polices sur le web a subi d'énormes changements l'année dernière. Les polices variables, qui permettent à un seul fichier de police d'avoir des variations illimitées, sont là. Pour avoir un aperçu de ce qu'elles sont et de leur fonctionnement, regardez cet excellent exposé de Mandy Michael : Variable Fonts and the Future of Web Design . Je vous recommande également Dynamic Typography With Modern CSS and Variable Fonts de Jason Pamental.

Pour explorer les polices variables et leurs capacités, il existe une démo amusante de Microsoft ainsi qu'un certain nombre de terrains de jeu pour tester les polices variables - Axis Praxis étant le plus connu (j'aime aussi le Font Playground).

Une fois que vous aurez commencé à travailler avec des polices variables, ce guide sur MDN vous sera d'une grande utilité. Pour apprendre à mettre en œuvre une solution de repli pour les navigateurs qui ne prennent pas en charge les polices variables, lisez Implementing a Variable Font With Fallback Web Fonts d'Oliver Schöndorfer. L'éditeur de polices de Firefox DevTools permet également de travailler avec des polices variables.

Transformations et animations

Les transformations et les animations CSS sont des sujets que je consulte en fonction de mes besoins. Je n'ai pas souvent besoin de les utiliser, et la syntaxe semble me sortir de la tête entre deux utilisations. Heureusement, la référence sur MDN m'aide et je suggère de commencer par les guides sur l'utilisation des transformations CSS et l'utilisation des animations CSS. Zell Liew a également rédigé un article intéressant qui explique en détail les transitions CSS.

Pour avoir une idée de tout ce qu'on peut faire, jetez un coup d'œil au site d'Animista.

L'une des choses qui peut prêter à confusion avec les animations, c'est l'approche à adopter. En plus de ce qui est pris en charge par CSS, vous pouvez avoir besoin d'impliquer JavaScript, SVG ou l'API d'animation Web, et tous ces éléments ont tendance à être mis dans le même panier. Dans son exposé intitulé "Choose Your Animation Adventure" enregistré à An Event Apart, Val Head explique les différentes options.

Utilisez les antisèches comme un aide-mémoire, pas comme un outil d'apprentissage !

Lorsque je mentionne des ressources relatives à Grid ou Flexbox, je reçois souvent des réponses indiquant qu'il est impossible d'utiliser Flexbox sans une antisèche. Je n'ai aucun problème avec les antisèches en tant qu'aide-mémoire pour consulter la syntaxe, et j'en ai publié quelques-unes moi-même. Le problème, si l'on s'en remet entièrement à elles, c'est que l'on risque de ne pas comprendre pourquoi les choses fonctionnent en copiant la syntaxe. Ensuite, lorsque vous rencontrez un cas où cette propriété semble se comporter différemment, cette incohérence apparente semble déconcertante, ou un défaut du langage.

Si vous vous trouvez dans une situation où CSS semble faire quelque chose de très étrange, demandez-vous pourquoi. Créez un scénario de test réduit qui met en évidence le problème, demandez à quelqu'un qui connaît mieux la spécification. La plupart des problèmes CSS sur lesquels on me pose des questions sont dus au fait que la personne concernée pense qu'une propriété fonctionne d'une manière différente de celle qu'elle utilise en réalité. C'est la raison pour laquelle je parle beaucoup de choses comme l'alignement et le dimensionnement, car c'est là que réside souvent cette confusion.

Oui, il y a des choses étranges dans CSS. C'est un langage qui a évolué au fil des ans, et il y a des choses que nous ne pouvons pas changer - jusqu'à ce que nous inventions une machine à remonter le temps. Cependant, une fois que vous aurez acquis quelques notions de base et que vous comprendrez pourquoi les choses se comportent comme elles le font, vous aurez beaucoup plus de facilité avec les notions plus pointues.

👉🏿  NdT : La Cascade a traduit de nombreux articles de Rachel Andrew, dont vous trouverez la liste dans la page de l'auteur. Par ailleurs, les pages de tags sont enrichies de nombreuses ressources (autrefois listées dans la page Ressources de La Cascade), voyez par exemple la page CSS ou la page Flexbox.