L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Comment apprendre le CSS
À propos de l'auteur
Rachel Andrew est non seulement la rédactrice en chef de Smashing Magazine, mais également une développeuse Web, une écrivaine et une conférencière. Elle est l'auteur de nombreux ouvrages, notamment…
Pour en savoir plus sur Rachel
Il n’est pas nécessaire de s’engager à mémoriser chaque propriété et valeur CSS, car il existe de bons endroits pour les consulter. Cependant, certains éléments fondamentaux faciliteront grandement l'utilisation de CSS. Cet article a pour but de vous guider tout au long de votre parcours d’apprentissage CSS.
Beaucoup de gens me demandent de leur recommander des tutoriels sur différentes parties de CSS, ou demandent comment apprendre les CSS. Je vois aussi beaucoup de gens qui sont déroutés par des morceaux de CSS, en partie à cause d’idées dépassées sur le langage. Étant donné que CSS a considérablement changé au cours des dernières années, le moment est donc bien choisi pour actualiser vos connaissances. Même si les CSS ne représentent qu'une petite partie de ce que vous faites (parce que vous travaillez ailleurs dans la pile), CSS est ce que vous avez comme résultat à l'écran, il vaut donc la peine d'être mis à jour en conséquence.
Cet article vise à décrire les principes fondamentaux de la CSS et des ressources pour une lecture plus approfondie des domaines clés du développement de la CSS moderne. Smashing Magazine contient souvent des éléments de ce type, mais j’ai également sélectionné d’autres ressources et des personnes à suivre dans des domaines clés de la CSS. Ce n'est pas un guide complet pour débutant ni destiné à couvrir absolument tout. Mon objectif est de couvrir l'étendue du CSS moderne en mettant l'accent sur quelques domaines clés, qui aideront à déverrouiller le reste de la langue pour vous.
Principes de base du langage
Pour la plupart des CSS, vous n'avez pas besoin de se préoccuper d'apprendre des propriétés et des valeurs par cœur. Vous pouvez les rechercher quand vous en avez besoin. Cependant, il y a quelques fondements clés du langage, sans lesquels vous aurez du mal à le comprendre. Il vaut vraiment la peine de consacrer un peu de temps à la compréhension de ces choses, car cela vous épargnera beaucoup de temps et de frustration à long terme.
Selectors, Plus que juste la classe
Un sélecteur fait ce qu’il indique sur l’étain, il sélectionne une partie de votre document afin que vous puissiez y appliquer les règles CSS. Alors que la plupart des gens savent utiliser une classe ou mettre en forme 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
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 ils sont connus sous le nom de pseudo-classes . 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 enroulez une autour de la première ligne de texte. Cependant, il sera réappliqué si la longueur de cette ligne change, ce qui ne serait pas le cas si vous avez inséré l'élément. Vous pouvez devenir assez complexe avec ces sélecteurs. Ci-dessous, CodePen est un exemple de pseudo-élément enchaîné à une pseudo-classe. Nous ciblons le premier p avec un sélecteur : premier enfant psuedo-class, puis le sélecteur :: first-line sélectionne la première ligne de cet élément, agissant comme si une étendue était ajoutée autour de cette première ligne afin de la rendre audacieuse et de changer de couleur.
Voir le stylo de première ligne de Rachel Andrew ( @rachelandrew . sur CodePen .
Héritage et la cascade
La cascade définit la règle gagnante 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 postuler, il est probable que la cascade vous fasse perdre la tête. 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 sont appliquées. Elle est également liée à la spécificité, différents sélecteurs ayant une spécificité différente qui permet de choisir entre plusieurs sélecteurs pouvant s'appliquer à un élément.
Note : Pour comprendre tous ces éléments Je suggérerais de lire The Cascade and Héritage dans l’Introduction au MDN de CSS (1965), si vous avez du mal à appliquer du CSS à un élément, votre navigateur DevTools est le meilleur endroit pour commencer , regardez 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 configure 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 reçoit votre CSS (mais que quelque chose d'autre l'a annulé), vous pouvez alors commencer à comprendre pourquoi.
Voir la spécificité du stylo de Rachel Andrew ( @ rachelandrew ) sur CodePen .
Le modèle de boîte
CSS concerne uniquement les 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 remplissage et la bordure, ce qui signifie que l'espace occupé par l'élément est plus grand que la largeur que vous lui avez indiquée.
ont été en mesure de choisir d’utiliser un autre modèle de boîte qui utilise la largeur donnée de l’élément comme largeur de l’élément visible à l’écran. Tout remplissage ou bordure insérera le contenu de la boîte à partir des bords. Cela est beaucoup plus logique pour de nombreuses dispositions.
Dans la démo ci-dessous, j'ai deux boîtes. Les deux ont une largeur de 200 pixels, une bordure de 5 pixels et un remplissage 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 le modèle de boîte alternatif et a donc une largeur de 200 pixels.
Voir les modèles de stylo Pen de Rachel Andrew ( @rachelandrew ) sur CodePen .
Le navigateur DevTools peut à nouveau 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 par défaut content-box . Les outils me disent que c'est le modèle de boîte utilisé et que je peux voir le dimensionnement et comment la bordure et le remplissage sont ajoutés à la largeur que j'ai attribuée.
Note : Avant IE6, Internet Explorer utilisait le modèle de boîte alternatif avec le rembourrage et les bordures insérant le contenu à l'écart de la largeur donnée. Pendant un certain temps, les navigateurs ont utilisé différents modèles de boîtes! Quand vous êtes frustré par des problèmes d’interopérabilité aujourd’hui, soyez heureux de voir que les choses se sont améliorées afin que les navigateurs ne calculent pas la largeur différemment.
Il existe une bonne explication de Box Model and Box Sizing [Taille du boîtier]. sur les astuces CSS, ainsi qu'une explication sur la meilleure façon de d'utiliser globalement le modèle de boîte alternative sur votre site.
Flux normal
Si vous disposez d'un document avec du HTML marquant le contenu et visualisez-le dans un navigateur, il devrait être lisible. Les en-têtes et les paragraphes commencent sur une nouvelle ligne, les mots s'affichent sous forme de phrase avec un seul espace blanc entre eux. Les liens de formatage tels que em ne rompent pas le flux de phrases. Ce contenu est affiché dans Flux normal ou Mise en page de flux. Chaque partie du contenu est décrite comme «en flux»; il connaît le reste du contenu et ne se chevauche pas.
Si vous travaillez avec plutôt que contre ce comportement, votre vie en sera rendue beaucoup plus facile. C’est l’une des raisons pour lesquelles commençant par un document HTML correctement balisé a beaucoup de sens, car en raison du flux normal et des feuilles de style incorporées par les navigateurs qui le respectent, votre contenu commence à partir d’un endroit lisible. .
Mise en forme des contextes
Une fois que vous avez un document dont le contenu est en flux normal, vous souhaiterez peut-être modifier l'aspect de ce contenu. Pour ce faire, vous modifiez le contexte de formatage de l'élément. Comme exemple très simple, si vous souhaitez que tous vos paragraphes fonctionnent ensemble et ne commencent pas sur une nouvelle ligne, vous pouvez modifier l'élément p en : inline en passant d'un bloquer à un contexte de formatage en ligne.
Les contextes de formatage définissent essentiellement un type externe et un type interne. Le contrôle externe du comportement de l'élément aux côtés des autres éléments de la page, le contrôle interne de l'apparence des enfants. Ainsi, par exemple, lorsque vous dites display: flex vous définissez le contexte externe comme étant un contexte de formatage de bloc et les enfants comme ayant 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 les valeurs interne et externe. Par conséquent, dans le futur, vous pourriez dire afficher: bloc flex; ( bloc étant l’extérieur et flex étant l’intérieur).
Lire En savoir plus sur afficher sur MDN .
Être dans ou hors du flux
Les éléments en CSS sont décrits comme étant «en flux» ou «en flux». espace donné et cet espace est respecté par les autres éléments en flux. Si vous prenez un élément hors du flux, en le faisant flotter ou en le positionnant, l'espace pour cet élément ne sera plus respecté par les autres éléments du flux.
Ceci est particulièrement visible pour les éléments en position absolue. Si vous attribuez à un élément position: absolute celui-ci est supprimé du flux, vous devrez alors vous assurer que vous n'avez pas une situation dans laquelle l'élément de manque de flux se superpose et rend illisible une autre partie de votre mise en page.
Voir le stylo Out of Flow: positionnement absolu de Rachel Andrew ( @rachelandrew ) sur CodePen .
Toutefois, des éléments flottants sont également disponibles. retiré du flux, et tout en suivant le contenu qui entoure les zones de lignes raccourcies d'un élément flottant, vous pouvez voir en plaçant une couleur d'arrière-plan sur la zone des éléments suivants qu'elles se sont levées et ignorent l'espace utilisé par l'élément flottant.
Voir le stylo Hors circuit: float de Rachel Andrew ( @rachelandrew ) sur CodePen .
Vous pouvez en savoir plus sur ] dans les éléments en écoulement et en écoulement sur MDN . Il est important de se rappeler que si vous supprimez un élément du flux, vous devez gérer vous-même les chevauchements, car les règles habituelles relatives à la disposition des flux de blocs ne s'appliquent plus.
Layout
Cela fait plus de quinze ans que nous faisons la disposition. en CSS sans conçu pour le système de mise en page. Cela a changé Nous disposons maintenant d'un système de présentation parfaitement fonctionnel comprenant Grid et Flexbox, mais également de la disposition en plusieurs colonnes et des méthodes de présentation plus anciennes utilisées dans le but réel. Si CSS Layout est un mystère pour vous, rendez-vous sur le didacticiel MDN Learn Layout ou lisez mon article Prise en main de CSS Layout dans Smashing Magazine.
] N'imaginez pas que des méthodes telles que grid et flexbox se font concurrence . Afin de bien utiliser Layout, vous constaterez parfois qu'un composant est préférable en tant que composant flex et parfois en tant que grille. À l’occasion, vous voudrez que le comportement de la colonne s’écoule 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 pourrait être utile de prendre du recul et d'essayer une approche différente. Nous sommes tellement habitués à manipuler CSS pour le forcer à faire ce que nous voulons, de sorte que nous oublierons probablement que nous avons plusieurs autres options à essayer.
La mise en page est mon domaine de prédilection et j'ai écrit un Smashing Magazine et d’autres articles pour tenter d’apprivoiser le nouveau paysage de Layout. Outre l'article Layout mentionné ci-dessus, j'ai toute une série sur Flexbox – commencez par Que se passe-t-il lorsque vous créez un conteneur Flexbox Flex . Sur Grid By Example j'ai tout un tas de petits exemples de CSS Grid – plus un didacticiel de capture vidéo.
De plus, et surtout pour les concepteurs, consultez Jen Simmons . et sa série de vidéos Layout Land .
Alignment
J'ai séparé Alignment de Layout en général car, si la plupart d'entre nous avons été initiés à Alignment dans le cadre de Flexbox, ces propriétés s'appliquent à tous les modèles. méthodes, et il vaut la peine de les comprendre dans ce contexte plutôt que de penser à «Alignement Flexbox» ou «Alignement sur la grille CSS». Nous avons un ensemble de propriétés d’alignement qui fonctionnent de manière commune autant que possible; ils ont ensuite certaines différences en raison du comportement des différentes méthodes de présentation.
Sur MDN, vous pouvez accéder à Alignement de boîtes et à la façon dont 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 .
Sizing
J'ai passé une grande partie de 2018 à parler du dimensionnement intrinsèque et extrinsèque. cahier des charges et 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 mise en page modernes peuvent faire beaucoup de la distribution de l'espace pour nous – si nous les laissons. Comprendre comment Flexbox affecte l’espace (ou la grille fr fonctionne, vaut la peine.]
Ici, dans Smashing Magazine, j’ai écrit sur Sizing in Layout en général et aussi pour Flexbox dans Quelle est la taille de cette boîte flexible? .
Responsive Design
Nos nouvelles méthodes de mise en forme de Grid et de Flexbox signifient souvent que nous pouvons nous passer de moins de requêtes multimédia que nécessaire. méthodes plus anciennes, en raison de leur souplesse et de leur adaptation aux modifications de la taille de la fenêtre ou du composant, sans nécessiter de modification de la largeur des éléments. Cependant, il y aura des endroits où vous voudrez ajouter des points de rupture pour améliorer vos conceptions.
Voici quelques guides simples sur Responsive Design et pour les requêtes des médias en général, consultez mon article Utilisation des requêtes de médias pour une conception sensible en 2018 . J'examine en quoi les requêtes multimédia sont utiles et montre également les nouvelles fonctionnalités de Media Queries au niveau 4 de la spécification
Polices et typographie
Parallèlement à Layout, l'utilisation de polices sur le Web a subi d'énormes changements au cours de la dernière année. Les polices variables, permettant à un fichier de police unique 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 discours de Mandy Michael : Les polices de caractères variables et l’avenir du web design . De plus, je recommanderais Typographie dynamique avec les polices de caractères variables modernes et CSS de de Jason Pamental .
Pour explorer les polices de caractères variables et leurs fonctionnalités, il existe une démonstration de Microsoft plus 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 commencez à travailler avec Variable Fonts, puis ce guide sur MDN s'avérera extrêmement utile. Pour apprendre à mettre en œuvre une solution de secours pour les navigateurs ne prenant pas en charge les polices de caractères variables, lisez Implémentation d'une police de caractères variable avec des polices Web de secours de Oliver Schöndorfer. L'éditeur de polices Firefox DevTools prend également en charge le travail avec les polices variables.
Transforms and Animation
Les transformations et les animations CSS sont définitivement quelque chose que je considère comme une base du besoin de savoir. Je n’ai pas souvent besoin de les utiliser, et la syntaxe semble sortir de ma tête entre deux utilisations. Heureusement, la référence sur MDN m'aide et je suggère de commencer par les guides sur Utilisation de CSS Transforms et sur l'utilisation des animations CSS . Zell Liew propose également un bel article qui fournit une bonne explication des transitions CSS .
Pour découvrir certaines des possibilités, visitez le Animista. site.
Une des choses qui peut prêter à confusion à propos des animations est l'approche à adopter. En plus de ce qui est pris en charge en CSS, vous devrez peut-être utiliser JavaScript, SVG ou l'API Web Animation, et tous ces éléments ont tendance à être regroupés. Dans son exposé, Choisissez votre aventure d'animation enregistrée lors d'un événement isolé, de Val Head en explique les options.
Utilisez des feuilles de mise en garde comme rappel, pas comme un outil d'apprentissage
Si je mentionne les ressources Grid ou Flexbox, je vois souvent des réponses dire qu’elles ne peuvent pas faire Flexbox sans une certaine feuille de calcul. Je n'ai aucun problème avec les aide-mémoire en tant qu'assistant mémoire pour rechercher la syntaxe, et j'en ai publié une partie. Le seul problème avec ces méthodes est que vous pouvez rater la raison pour laquelle les choses fonctionnent lorsque vous copiez la syntaxe. Ensuite, lorsque vous vous trouvez dans une affaire où cette propriété semble se comporter différemment, cette incohérence apparente semble déroutante, ou une faute de la langue.
Si vous vous trouvez dans une situation où CSS semble faire quelque chose de très étrange, demandez pourquoi . Créez un scénario de test réduit qui met en évidence le problème, demandez à quelqu'un qui est plus familier avec les spécifications. La plupart des problèmes de CSS auxquels on m'interroge sont dus au fait que cette personne pense qu'une propriété fonctionne différemment de la réalité. C’est la raison pour laquelle je parle beaucoup de choses comme l’alignement et le dimensionnement, car ce sont des endroits où cette confusion règne souvent.
Oui, il existe des choses étranges dans CSS. C’est un langage qui a évolué au fil des ans et il ya des choses que nous ne pouvons pas changer – tant que nous n’avons pas inventé un timemachine . Cependant, une fois que vous avez quelques notions de base et que vous comprenez pourquoi les choses se comportent comme elles le sont, vous aurez beaucoup plus de facilité avec les endroits les plus délicats.
(il) Source link