Comment apprendre le CSS

Je reçois beaucoup de gens qui me demandent de leur recommander des tutoriels sur différentes parties de CSS, ou me demandent comment apprendre CSS. Je vois aussi beaucoup de gens qui sont confus à propos de certains morceaux de CSS, en partie à cause d'idées dépassées sur le langage. Étant donné que CSS a beaucoup changé ces dernières années, c'est un très bon moment pour rafraîchir vos connaissances. Même si CSS n'est qu'une petite partie de ce que vous faites (parce que vous travaillez ailleurs dans la pile), CSS est la façon dont les choses finissent par apparaître comme vous le souhaitez à l'écran, il vaut donc la peine d'être raisonnablement à jour.

Par conséquent, cet article vise à décrire les principes fondamentaux de CSS et les ressources pour une lecture plus approfondie sur les domaines clés du développement CSS moderne. Beaucoup de ces choses sont ici sur Smashing Magazine, mais j'ai également sélectionné d'autres ressources et aussi des personnes à suivre dans les domaines clés du CSS. Ce n'est pas un guide complet pour débutant ou destiné à couvrir absolument tout. Mon objectif est de couvrir l'étendue du CSS moderne en mettant l'accent sur quelques domaines clés, qui vous aideront à déverrouiller le reste du langage pour vous.

Fondamentaux de la langue

Pour la plupart des CSS, vous n'avez pas à vous soucier d'apprendre par cœur les propriétés et les valeurs. Vous pouvez les consulter lorsque vous en avez besoin. Cependant, il existe certains fondements clés du langage, sans lesquels vous aurez du mal à lui donner un sens. Cela vaut vraiment la peine de consacrer du temps à vous assurer que vous comprenez ces choses, car cela vous fera économiser beaucoup de temps et de frustration à long terme.

Sélecteurs, plus qu'une simple classe

Un sélecteur fait ce qu'il dit sur la boîte, il sélectionne une partie de votre document afin que vous puissiez lui appliquer des règles CSS. Alors que la plupart des gens sont familiers avec l'utilisation d'une classe ou le style d'un élément HTML tel que body directement, 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, peut-être parce qu'ils viennent directement après un élément, ou sont les lignes impaires d'un tableau.

Les sélecteurs qui font partie de la spécification de niveau 3 (vous les avez peut-être entendus appelés sélecteurs de niveau 3) ont une excellente prise en charge du navigateur. Pour un aperçu 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 à quelque chose dans le document. Par exemple p:first-child se comporte comme si vous ajoutiez une classe au premier élément p , ceux-ci sont appelés sélecteurs de pseudo-classe . Les sélecteurs de pseudo-éléments agissent comme si un élément était inséré dynamiquement, par exemple ::first-line agit de la même manière que vous enveloppez une span autour de la première ligne de texte. Cependant, il s'appliquera à nouveau si la longueur de cette ligne change, ce qui ne serait pas le cas si vous insériez l'élément. Vous pouvez devenir assez complexe avec ces sélecteurs. Ci-dessous, CodePen est 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 avait été ajouté autour de cette première ligne afin de la rendre en gras et changer la couleur.

L'héritage et la cascade

La cascade définit quelle règle l'emporte lorsqu'un certain nombre de règles peuvent s'appliquer à un élément. Si vous vous êtes déjà trouvé dans une situation où vous ne pouvez pas comprendre pourquoi certains CSS ne semblent pas s'appliquer, il est probable que la cascade vous fasse trébucher. La cascade est étroitement liée à l'héritage, qui définit les propriétés héritées par les éléments enfants de l'élément auquel elles s'appliquent. Elle est également liée à la spécificité ; différents sélecteurs ont une spécificité différente qui contrôle qui gagne lorsqu'il y a plusieurs sélecteurs qui pourraient s'appliquer à un élément.

Note : Pour comprendre tout cela, je suggérerais de lire The Cascade and Inheritance, dans le MDN Introduction to CSS.

Si vous avez du mal à appliquer du CSS à un élément, les DevTools de votre navigateur sont le meilleur endroit pour commencer, jetez un œil à l'exemple ci-dessous dans lequel j'ai un élément h1 ciblé par le sélecteur d'élément h1 et rendant l'en-tête orange. J'utilise également une classe, qui définit le h1 sur rebeccapurple. La classe est plus spécifique et donc le h1 est violet. Dans DevTools, vous pouvez voir que le sélecteur d'élément est barré car il ne s'applique pas. Une fois que vous pouvez voir que le navigateur obtient votre CSS (mais quelque chose d'autre l'a annulé), vous pouvez commencer à comprendre pourquoi.

Le modèle de boîte

CSS est tout au sujet des boîtes. Tout ce qui est affiché à l'écran a une boîte, et le modèle de boîte décrit comment la taille de cette boîte est calculée - en tenant compte des marges, du remplissage 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 rembourrage 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 sur l'élément comme largeur de l'élément visible à l'écran. Tout rembourrage ou bordure insérera le contenu de la boîte à partir des bords. Cela a beaucoup plus de sens pour de nombreuses mises en page.

Dans la démo ci-dessous, j'ai deux cases. Les deux ont une largeur de 200 pixels, avec une bordure de 5 pixels et un rembourrage de 20 pixels. La première boîte utilise le modèle de boîte standard, elle occupe donc une largeur totale de 250 pixels. Le second utilise le modèle de boîte alternatif, donc fait en fait 200 pixels de large.

Browser DevTools peut encore une fois vous aider à comprendre le modèle de boîte utilisé. Dans l'image ci-dessous, j'utilise Firefox DevTools pour inspecter une boîte en utilisant le modèle de boîte content-box par défaut. Les outils me disent qu'il s'agit du modèle de boîte utilisé, et je peux voir le dimensionnement et comment la bordure et le rembourrage sont ajoutés à la largeur que j'ai attribuée.

Remarque : Avant IE6, Internet Explorer utilisait le modèle de boîte alternatif, avec un rembourrage et des bordures insérant le contenu en dehors de la largeur donnée. Ainsi, pendant un certain temps, les navigateurs ont utilisé différents modèles de boîtes ! Lorsque vous êtes frustré par les problèmes d'interopérabilité aujourd'hui, soyez heureux que les choses se soient améliorées afin que nous n'ayons pas affaire à des navigateurs qui calculent la largeur des choses différemment.

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

Débit normal

Si vous avez un document avec du HTML marquant le contenu et que vous l'affichez dans un navigateur, il sera, espérons-le, lisible. Les titres et les paragraphes commenceront sur une nouvelle ligne, les mots s'affichent comme une phrase avec un seul espace blanc entre eux. Les balises de formatage, telles que em, ne rompent pas le flux de la phrase. Ce contenu est affiché en flux normal ou en flux de blocs. Chaque partie du contenu est décrite comme « in flow » ; il connaît le reste du contenu et ne se chevauche donc pas.

Si vous travaillez avec plutôt que contre ce comportement, votre vie est beaucoup plus facile. C'est l'une des raisons pour lesquelles commencer avec un document HTML correctement balisé a beaucoup de sens, car en raison du flux normal et des feuilles de style intégrées que les navigateurs ont qui le respectent, votre contenu commence à partir d'un endroit lisible.

Contextes de mise en forme

Une fois que vous avez un document avec un contenu en flux normal, vous souhaiterez peut-être modifier l'apparence d'une partie de ce contenu. Pour ce faire, modifiez le contexte de formatage de l'élément. À titre d'exemple très simple, si vous vouliez que tous vos paragraphes s'exécutent ensemble et ne commencent pas sur une nouvelle ligne, vous pouvez modifier l'élément p pour display: inline passer d'un bloc à un contexte de formatage en ligne.

Les contextes de formatage définissent essentiellement un type externe et un type interne. L'extérieur contrôle le comportement de l'élément avec les autres éléments de la page, l'intérieur contrôle l'apparence des enfants. Ainsi, par exemple, lorsque vous dites display: flex , vous définissez l'extérieur comme un contexte de formatage de bloc et les enfants comme un contexte de formatage flexible.

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 pourriez dire display: block flex; (le block étant l'extérieur et le flex étant l'intérieur).

En savoir plus sur l' display sur MDN.

Être dans ou hors flux

Les éléments en CSS sont décrits comme étant "en flux" ou "hors flux". Les éléments en flux reçoivent de l'espace et cet espace est respecté par les autres éléments en flux. Si vous retirez 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 du flux.

Ceci est particulièrement visible avec des éléments absolument positionnés. Si vous donnez une position: absolute , il est supprimé du flux, vous devrez alors vous assurer que vous n'avez pas une situation dans laquelle l'élément hors flux se chevauche et rend illisible une autre partie de votre mise en page.

Cependant, les éléments flottants sont également supprimés du flux, et tandis que le contenu suivant s'enroulera autour des boîtes de ligne raccourcies d'un élément flottant, vous pouvez voir en plaçant une couleur d'arrière-plan sur la boîte des éléments suivants qu'ils se sont levés et ignorent le espace utilisé par l'élément flottant.

Vous pouvez en savoir plus sur les éléments de flux entrants et sortants sur MDN. La chose importante à retenir est que si vous retirez un élément du flux, vous devez gérer vous-même les chevauchements car les règles habituelles de mise en page du flux de blocs ne s'appliquent plus.

Mise en page

Depuis plus de quinze ans, nous faisons de la mise en page en CSS sans système de mise en page conçu pour le travail. Cela a changé. Nous avons maintenant un système de mise en page parfaitement capable qui comprend Grid et Flexbox, mais aussi la mise en page à colonnes multiples et les anciennes méthodes de mise en page utilisées pour leur véritable objectif. Si CSS Layout est un mystère pour vous, rendez-vous sur le didacticiel MDN Learn Layout ou lisez mon article Getting Started With CSS Layout ici sur Smashing Magazine.

N'imaginez pas que des méthodes telles que grid et flexbox sont en quelque sorte en concurrence . Afin de bien utiliser Layout, vous constaterez parfois qu'un composant est préférable en tant que composant flexible et parfois en tant que Grid. À l'occasion, vous voudrez le comportement d'écoulement de colonne de multicol. Tous ces choix sont valables. Si vous sentez que vous vous battez contre la façon dont quelque chose se comporte, c'est en général un très bon signe qu'il vaut peut-être la peine de prendre du recul et d'essayer une approche différente. Nous sommes tellement habitués à pirater CSS pour lui faire faire ce que nous voulons que nous oublions probablement que nous avons un certain nombre d'autres options à essayer.

La mise en page est mon principal domaine d'expertise et j'ai écrit un certain nombre d'articles ici sur 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 toute une série sur Flexbox - commencez par Que se passe-t-il lorsque vous créez un conteneur flexible Flexbox. Sur Grid By Example, j'ai tout un tas de petits exemples de CSS Grid - plus un didacticiel de screencast vidéo.

De plus, et en particulier pour les concepteurs, consultez 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 parce que même si la plupart d'entre nous ont é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 vaut la peine de les comprendre dans ce contexte plutôt que de penser à "l'alignement Flexbox" ou "Alignement de la grille CSS." Nous avons un ensemble de propriétés d'alignement qui fonctionnent de manière commune lorsque cela est possible ; ils présentent alors quelques différences dues au comportement des différentes méthodes de mise en page.

Sur MDN, vous pouvez creuser dans Box Alignment et comment il est implémenté pour Grid, Flexbox, Multicol et Block Layout. Ici, sur Smashing Magazine, j'ai un article traitant spécifiquement de l'alignement dans Flexbox : Tout ce que vous devez savoir sur l'alignement dans Flexbox.

Dimensionnement

J'ai passé une grande partie de 2018 à parler de la spécification de dimensionnement intrinsèque et extrinsèque, et de son lien avec Grid et Flexbox en particulier. Sur le Web, nous avons l'habitude de définir le dimensionnement en longueurs ou en pourcentages, car c'est ainsi que nous avons pu créer des mises en page de type Grid à l'aide de flottants. Cependant, les méthodes de disposition modernes peuvent faire une grande partie de la distribution de l'espace pour nous - si nous les laissons faire. Comprendre comment Flexbox attribue l'espace (ou l'unité Grid fr fonctionne) vaut votre temps.

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

Conception réactive

Nos nouvelles méthodes de mise en page de Grid et Flexbox signifient souvent que nous pouvons nous en sortir avec moins de requêtes multimédias que nous n'en avions besoin avec nos anciennes méthodes, car elles sont flexibles et réagissent aux changements de la fenêtre d'affichage ou de la taille des composants sans que nous ayons besoin de changer le largeurs des éléments. Cependant, il y aura des endroits où vous voudrez ajouter des points d'arrêt pour améliorer encore vos conceptions.

Voici quelques guides simples sur la conception réactive, et pour les requêtes multimédias, en général, consultez mon article Utiliser les requêtes multimédias pour la conception réactive en 2018. J'examine à quoi servent les requêtes multimédias et montre également les nouvelles fonctionnalités à venir Media Queries au 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 au cours de la dernière année. Les polices variables, permettant à un seul fichier de police d'avoir des variations illimitées, sont ici. Pour avoir un aperçu de ce qu'ils sont et de leur fonctionnement, regardez cet excellent court exposé de Mandy Michael : les polices variables et l'avenir de la conception Web. En outre, je recommanderais 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 jeux pour essayer 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 s'avérera incroyablement utile. Pour savoir comment implémenter une solution de secours pour les navigateurs qui ne prennent pas en charge les polices variables, lisez Implémentation d'une police variable avec des polices Web de secours par Oliver Schondorfer. L'éditeur de polices de Firefox DevTools prend également en charge l'utilisation de polices variables.

Transformations et animation

Les transformations et l'animation CSS sont définitivement quelque chose que je recherche en cas de besoin. Je n'ai pas souvent besoin de les utiliser, et la syntaxe semble me sortir de la tête entre les utilisations. Heureusement, la référence sur MDN m'aide et je suggérerais de commencer par les guides sur l'utilisation des transformations CSS et l'utilisation des animations CSS. Zell Liew a également un bel article qui fournit une excellente explication des transitions CSS.

Pour découvrir certaines des choses qui sont possibles, jetez un oeil sur le site Animista.

L'approche à adopter est l'une des choses qui peuvent prêter à confusion avec les animations. En plus de ce qui est pris en charge dans CSS, vous devrez peut-être impliquer JavaScript, SVG ou l'API d'animation Web, et ces éléments ont tous tendance à être regroupés. Dans son discours, Choisissez votre aventure d'animation enregistrée à An Event Apart, Val Head explique les options.

Utilisez les feuilles de triche comme rappel, pas comme outil d'apprentissage

Lorsque je mentionne les ressources Grid ou Flexbox, je vois souvent des réponses disant qu'elles ne peuvent pas faire Flexbox sans une certaine feuille de triche. Je n'ai aucun problème avec les feuilles de triche comme aide-mémoire pour rechercher la syntaxe, et j'en ai publié quelques-unes. Le problème de se fier entièrement à ceux-ci est que vous pouvez manquer pourquoi les choses fonctionnent lorsque vous copiez la syntaxe. Ensuite, lorsque vous rencontrez un cas où cette propriété semble se comporter différemment, cette incohérence apparente semble déroutante ou un défaut du langage.

Si vous vous trouvez dans une situation où CSS semble faire quelque chose de très étrange, demandez pourquoi . Créez un cas de test réduit qui met en évidence le problème, demandez à quelqu'un qui connaît mieux la spécification. Bon nombre des problèmes CSS qui me sont posés sont dus au fait que cette personne pense qu'une propriété fonctionne d'une manière différente de la manière dont elle fonctionne dans la réalité. C'est pourquoi je parle beaucoup de choses comme l'alignement et le dimensionnement, car ce sont des endroits où cette confusion vit souvent.

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 à ce sujet que nous ne pouvons pas changer - jusqu'à ce que nous inventions une machine à voyager dans le temps. Cependant, une fois que vous maîtrisez les bases et que vous comprenez pourquoi les choses se comportent comme elles le font, vous aurez beaucoup plus de facilité avec les endroits les plus délicats.