BONJOUR, CSS
Les premiers chapitres de ce cours ont porté exclusivement sur le HTML. Maintenant, il est temps de faire des choses avec des feuilles de style en cascade (Cascading Style Sheet CSS). Vous pouvez penser à CSS comme un language définissant le «design» d’une page Web. Il détermine des choses comme la taille de la police, les marges et les couleurs en utilisant un language entièrement distinct du HTML.
Pourquoi un language distinct? Eh bien, il a un but complètement différent. HTML représente le contenu de votre page Web, tandis que CSS définit comment ce contenu est présenté à l’utilisateur. Il s’agit d’une distinction fondamentale du développement web moderne.
CSS fournit le vocabulaire pour dire à un navigateur web des choses comme « Je veux que mes titres soient vraiment grands et que ma barre latérale apparaisse à gauche de l’article principal ». HTML n’a pas la terminologie pour prendre ces types de décisions de mise en page, tout ce qu’il peut dire c’est « c’est un titre et c’est une barre latérale ».
Dans ce chapitre, nous explorerons la syntaxe de base de CSS, ainsi que la façon de la connecter à nos documents HTML. Le but n’est pas tellement de devenir un expert CSS ou de mémoriser tous les styles disponibles, mais plutôt de comprendre comment CSS et HTML interagissent. CSS vit généralement dans son propre fichier, de même que dans le chapitre précédent , une bonne organisation de fichiers sera primordiale.
Configuration
Pour garder les choses simples, nous allons enregistrer l’exemple de chaque chapitre de ce cours dans un dossier distinct. Créez un nouveau projet appelé hello-css. Nous allons utiliser une page nommée hello-css.html, alors allez-y et créez-la, puis ajoutez le balisage suivant:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Bonjour, CSS</title>
</head>
<body>
<h1>Bonjour, CSS</h1>
<p>CSS nous permet de styliser les élément HTML. Il y a également
<a href='dummy.html'>d'autre page</a> associé à cette exemple.</p>
<h2>List Styles</h2>
<p>Vous pouvez styliser une liste non ordonée:</p>
<ul>
<li>disc</li>
<li>circle</li>
<li>square</li>
</ul>
<p>Et vous pouvez afficher une liste ordonnée comme celle-ci:</p>
<ol>
<li>decimal</li>
<li>lower-roman</li>
<li>upper-roman</li>
<li>lower-alpha</li>
<li>upper-alpha</li>
<li>(and many more!)</li>
</ol>
</body>
</html>En outre, nous aurons besoin d’une petite page toute bête pour savoir comment les mêmes styles CSS peuvent être appliqués à plusieurs pages Web. Créez dummy.html et ajoutez ce qui suit:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Dummy</title>
</head>
<body>
<h1>Dummy</h1>
<p>Ceci est une dummy page. <a href='hello-css.html'>Revenir en arrière</a>.</p>
<p>Vous voulez essayer <a href='nowhere.html'>un lien obsolète</a>? Clic sur ce lien!</p>
</body>
</html>Feuilles de style CSS
Les feuilles de style CSS sont fichiers texte enregistré avec une extension .css. Créez un nouveau fichier appelé styles.css dans notre dossier hello-css. Celui ci contiendra tous nos codes css pour ce chapitre. Ajoutons une règle CSS afin que nous puissions dire si notre feuille de style est bien connectée à notre pages HTML.
body {
color: #FF0000;
}
Une «règle» CSS commence toujours par un «sélecteur» qui définit les éléments HTML auxquels elle s’applique. Dans ce cas, nous essayons de façonner l’élément <body>. Après le sélecteur, nous avons le « bloc de déclarations » à l’intérieur de deux accolades. Toutes les « propriétés » que nous alons définir entre ces accolades affecteront l’élément <body>.
color est une propriété définie par la spécification CSS qui détermine la couleur du texte de tous les éléments HTML sélectionnés. Il accepte une valeur hexadécimale représentant une couleur. Le code #FF0000 signifie rouge vif.
Les propriétés CSS sont comme des attributs HTML car ils utilisent tous les deux des paires de valeurs-clés. La différence ce situe dans le fait qu’ici, nous définissons les informations de présentation au lieu de contribuer à la signification sémantique du contenu sous-jacent.
Lier une feuille de style css
Si vous essayez de charger l’une des pages HTML dans un navigateur, vous ne verrez pas notre feuille de style en action. C’est parce que nous ne les avons pas encore reliés. C’est à cela que l’élément HTML est destiné. Dans le fichier hello-css.html, remplacer lepar le code suivant:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Bonjour, CSS</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<h1>Bonjour, CSS</h1>
<p>CSS nous permet de styliser les élément HTML. Il y a également
<a href='dummy.html'>d'autre page</a> associé à cette exemple.</p>
<h2>List Styles</h2>
<p>Vous pouvez styliser une liste non ordonée:</p>
<ul>
<li>disc</li>
<li>circle</li>
<li>square</li>
</ul>
<p>Et vous pouvez afficher une liste ordonnée comme celle-ci:</p>
<ol>
<li>decimal</li>
<li>lower-roman</li>
<li>upper-roman</li>
<li>lower-alpha</li>
<li>upper-alpha</li>
<li>(and many more!)</li>
</ol>
</body>
</html>L’élément <link/> indique aux navigateurs qu’ils doivent charger styles.css lorsqu’ils essaient de rendre notre fichier hello-css.html. Nous devrions maintenant voir partout un texte rouge:
L’élément <link/> est comme l’élément <a>, sauf qu’il est uniquement destiné à être utilisé à l’intérieur de <head>. Comme il se trouve à la tête du document, il se connecte aux métadonnées définies en dehors du document en cours. Notez également que c’est un élément vide , donc il n’a pas besoin d’une balise de fermeture.
L’attribut rel définit la relation entre la ressource et le document HTML. Sa valeur la plus courante est stylesheet, mais il y a quelques autres options . L’attribut href fonctionne de la même manière que dans le chapitre précédent, mais il pointe vers un fichier .css au lieu de pointer vers une autre page Web.
Notez qu’il n’y a pas de connexion directe entre le navigateur et notre feuille de style. C’est seulement grâce au balisage HTML que le navigateur peut le trouver. Les CSS, les images et même le JavaScript dépendent tous d’une page HTML pour les regrouper tous ensemble, ce qui fait du HTML le cœur de la plupart des sites Web.
Les commentaires en css
Maintenant que notre feuille de style est connectée, amusons nous un peu avec elle. Ce rouge est horrible, remplacez le par un beau gris:
body {
color: #414141; /* Gris sombre */
}Notez que les commentaires en CSS sont un peu différents de leurs homologues HTML. Au lieu de la syntaxe <!-- -->, CSS ignore tout entre les caractères /* et */.
définir plusieurs propriétés
Vous pouvez afficher autant de propriétés que vous le souhaitez dans le bloc de déclaration d’une règle CSS. Essayez de définir la couleur d’arrière-plan de l’ensemble de la page Web en modifiant la règle à suivante:
body {
color: #414141; /* Gris sombre */
background-color: #EEEEEE; /* Gris clair */
}La propriété background-color est très similaire à la propriété color, mais elle définit la couleur de fond de n’importe quel élément que vous avez sélectionné. Prenez une seconde pour admirer ces points-virgules à la fin de chaque déclaration. En les enlevant, vous casserez la règle CSS, alors gardez toujours à l’esprits qu’il faut finir chaque déclaration par un point-virgule!
Pourquoi avons-nous choisi des nuances de gris plutôt que du noir et blanc? L’utilisation d’un arrière – plan #000000 avec une couleur de texte #FFFFFF présente un contraste trop élevée. Il semble que la page vibre, ce qui peut être très distrayant pour les lecteurs.
Sélection de différents éléments
Bien sûr, vous voudrez appliquer des styles à des éléments autres que. Pour cela, ajoutez simplement d’autres règles CSS avec différents sélecteurs. Nous pouvons modifier la taille de la police de nos titres
par exemple:
body {
color: #414141; /* Gris sombre */
background-color: #EEEEEE; /* Gris clair */
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}unités de mesure
Beaucoup de propriétés CSS nécessitent une unité de mesure. Il y a beaucoup d’unités disponibles, mais les plus courantes que vous rencontrerez sont px (pixel) et em (prononcées comme la lettre m ). Le premier est ce que vous appelez intuitivement un pixel, que l’utilisateur ait ou non un affichage de la rétina, et le second est la taille de police actuelle de l’élément en question.
L’unité em est très utile pour définir des tailles relatives à certaines taille de fonte de base. Dans le diagramme ci-dessus, vous pouvez voir la mise à l’échelle des unités em pour correspondre à une taille de police de base de 12px , 16px et 20px. Pour un exemple concret, regardez l’extrait de code suivant:
body {
color: #414141; /* Gris sombre */
background-color: #EEEEEE; /* Gris clair */
font-size: 18px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}Cela définit notre taille de police de base pour le document à 18px , puis dit que nos éléments <h1> devraient être deux fois plus grand et que notre <h2> devrait être 1,6 fois plus grand. Si nous (ou l’utilisateur) voulont rendre la police de base plus grande ou plus petite, l’unité em permettra au reste des éléments de notre page d’être redimensionnée en conséquence.
Selecteurs multiples
Que faire si nous voulons ajouter le même style à toutes nos rubriques? Nous ne voulons pas avoir des règles redondantes, car cela finira par devenir un cauchemar à maintenir:
/* (Style redondant = mauvaise pratique) */
h1 {
font-family: "Helvetica", "Arial", sans-serif;
}
h2 {
font-family: "Helvetica", "Arial", sans-serif;
}
h3 {
font-family: "Helvetica", "Arial", sans-serif;
}
/* (etc) */Au lieu de cela, nous pouvons sélectionner plusieurs éléments HTML dans la même règle CSS en les séparant par des virgules. Ajoutez ceci à notre fichier styles.css :
body {
color: #414141; /* Gris sombre */
background-color: #EEEEEE; /* Gris clair */
font-size: 18px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica", "Arial", sans-serif;
}Cela définit la police à utiliser pour toutes nos rubriques avec une seule règle. C’est génial, car si nous voulons changer de police, il n’y a qu’une ligne a modifier.
Définition des polices
font-family est une autre propriété CSS intégrée qui définit la police de caractères pour n’importe quel élément que vous avez sélectionné. Il accepte plusieurs valeurs car tous les utilisateurs ne disposent pas des mêmes polices. Avec l’extrait ci-dessus, le navigateur tente de charger la première police ( Helvetica ), retourne à Arial si l’utilisateur ne l’a pas, et choisit enfin la police sans serif par défaut du système.
S’appuyer sur les polices intégrées de l’utilisateur a considérabelement limité le Wed Design pendant un long moment. De nos jours, les polices système ont été largement remplacées par des polices Web. Nous en apprendrons plus à ce sujet dans le chapitre sur la typographie Web de ce cours.
Styles de listes
La propriété list-style-type vous permet de modifier l’icône utilisée pour les éléments <li> . Vous voudrez généralement le définir sur l’élément parent <ul> ou <ol> :
body {
color: #414141; /* Gris sombre */
background-color: #EEEEEE; /* Gris clair */
font-size: 18px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica", "Arial", sans-serif;
}
ul {
list-style-type: circle;
}
ol {
list-style-type: lower-roman;
}Vous pouvez trouver d’autres valeurs communes dans la page d’exemple hello-css.html. Une valeur interessant est none , qui est couramment utilisé pour fabriquer une menu de navigation avec une liste <ul>. La valeur none permet de styliser les éléments de la liste du menu comme des boutons. Dans le chapitre sur le Positionnement avancé , nous utiliserons cette technique pour créer le menu de navigation ci-dessous.
C’est un bon exemple de la séparation du contenu de la présentation. Un menu de navigation est une liste non ordonnée, mais il est également logique d’afficher ces éléments en tant que boutons au lieu d’une liste à puces typique. Le code HTML permet aux moteurs de recherche de déduire la structure de notre contenu, tandis que CSS nous permet de l’afficher aux humains de façon adéquate.
Vous pouvez même créer des puces personnalisées pour les éléments <li> avec la propriété list-style-image (voir MDN pour plus de détails ).
Définir la couleur de votre texte et l’apparence de vos puces pourrait sembler banal. Mais il faut prendre de la hauteur, et comprendre que l’on a un contrôle total sur l’apparence d’un document HTML quand on multiplie les régles CSS.
Feuilles de style réutilisables
Nous avons simplement défini certains styles de base pour l’une de nos pages Web. Il serait très pratique de pouvoir les réutiliser pour nos autres pages. Pour cela, il nous faut tout simplement ajouter le même élément <link/> à toutes les autres pages que nous souhaitons styliser. Essayez d’ajouter la ligne suivante à <head> de dummy.html :
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Dummy</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<h1>Dummy</h1>
<p>Ceci est une dummy page. <a href='hello-css.html'>Revenir en arrière</a>.</p>
<p>Vous voulez essayer <a href='nowhere.html'>un lien obsolète</a>? Clic sur ce lien!</p>
</body>
</html>Maintenant, notre page dummy.html devraient avoir le même « style » que notre page hello-css.html. Chaque fois que nous modifions un style dans styles.css, ces changements seront automatiquement reflétés dans nos deux pages Web. C’est ainsi que vous obtenez un look cohérent entre les différentes page d’un site Web.
Vous aurez presque toujours au moins une feuille de style appliquée à l’ensemble du site. Il est généralement recommandé d’utiliser les chemins relatifs à la racine lors de la liaison de feuilles de style globales pour éviter les problèmes dans les pages imbriquées.
Plus de style pour les textes
Il y a tout un tas de propriétés CSS différentes que nous allons présenter au cours de ce cours, mais pour l’instant, terminons ce chapitre avec certaines des façons les plus courantes de formater du texte.
Souligner
La propriété text-decoration détermine si le texte est souligné ou non. En le définissant sur none, nous pouvons supprimer le soulignement par défaut de tous nos liens. Nous discuterons plus en profondeur des styles de liens dans un prochain chapitre.
body {
color: #414141; /* Gris sombre */
background-color: #EEEEEE; /* Gris clair */
font-size: 18px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica", "Arial", sans-serif;
}
ul {
list-style-type: circle;
}
ol {
list-style-type: lower-roman;
}
a {
text-decoration: none;
}Alignement de texte
La propriété text-align définie l’alignement du texte dans un élément HTML.
body {
color: #414141; /* Gris sombre */
background-color: #EEEEEE; /* Gris clair */
font-size: 18px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica", "Arial", sans-serif;
}
ul {
list-style-type: circle;
}
ol {
list-style-type: lower-roman;
}
a {
text-decoration: none;
}
p {
text-align: left;
}D’autres valeurs acceptées sont right, center, et justify , mais remarquez comment elle s’aligne toujours par rapport à la page entière:
Ce n’est pas ce que vous voulez pour la plupart des sites Web. Nous allons apprendre pourquoi dans le prochain chapitre lorsque nous allons parler des boîtes CSS.
Graisse et styles de police
La propriété font-weight définit la « graisse » du texte dans un élément, et la propriété font-style indique s’il est en italique ou non.
Disons que nous ne voulons pas que nos titres soient en gras. Mettez à jour notre règle de titre dans styles.css pour correspondre à ce qui suit:
body {
color: #414141; /* Gris sombre */
background-color: #EEEEEE; /* Gris clair */
font-size: 18px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica", "Arial", sans-serif;
font-weight: normal;
}
ul {
list-style-type: circle;
}
ol {
list-style-type: lower-roman;
}
a {
text-decoration: none;
}
p {
text-align: left;
}Ces propriétés démontrent clairement la séparation du contenu (HTML) de la présentation (CSS). Les règles suivantes échangent l’apparence des éléments <em> et <strong> :
/* (Uniquement à titre de démonstration) */
em {
font-weight: bold;
font-style: normal;
}
strong {
font-weight: normal;
font-style: italic;
}Je ne vous conseille pas de faire cela sur de « vrais » sites Web. Les graisses et les styles de police deviendront beaucoup plus importants lorsque nous commencerons à jouer avec des polices personnalisées dans le chapitre Typographie du Web.
La cascade
La partie « en cascade » de CSS est due au fait que les règles sont en cascade et peuvent provenir de sources multiples. Jusqu’à présent, nous n’avons vu qu’un endroit où le CSS pouvait être défini: de manière externe. Cependant, les feuilles de style externes ne sont que l’un des nombreux endroits où vous pouvez mettre votre code CSS.
La hiérarchie CSS pour chaque page Web ressemble à ceci:
- La feuille de style par défaut du navigateur
- La feuille de style définies par l’utilisateur
- Feuilles de style externes (c’est nous)
- Styles spécifiques à la page (c’est aussi nous)
- Styles en ligne (ce pourrait être nous, mais ce n’est pas une bonne pratique)
Ceci est ordonné de la priorité la moins forte à la priorité la plus forte, ce qui signifie que les styles définis dans chaque étape suivante remplacent les précédents. Par exemple, les styles en ligne feront toujours en sorte que le navigateur ignore ses styles par défaut. Les prochaines sections se concentrent sur les deux dernières options parce que c’est celles que nous devons maitriser en tant que développeurs web (en plus des styles externes avec lesquels nous avons déjà travaillé).
On a démarrer sur le bon chemin avec des feuilles de style externes. Il est important de comprendre les styles spécifiques à la page et en ligne, car vous les rencontrerez très certainement, mais les feuilles de style externes sont de loin le meilleur endroit pour définir l’apparence de votre site.
Styles spécifiques à la page
L’élément <style> est utilisé pour ajouter des règles CSS spécifiques à une page HTML spécifique. L’élément <style> vit toujours dans le <head> d’une page Web, ce qui est logique car il s’agit de métadonnées, pas de contenu réel.
Par exemple, appliquons certains styles à notre page dummy.html en mettant à jour son élément <head> comme ceci:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Dummy</title>
<link rel='stylesheet' href='styles.css'/>
<style>
body {
color: #0000FF; /* Blue */
}
</style>
</head>
<body>
<h1>Dummy</h1>
<p>Ceci est une dummy page. <a href='hello-css.html'>Revenir en arrière</a>.</p>
<p>Vous voulez essayer <a href='nowhere.html'>un lien obsolète</a>? Clic sur ce lien!</p>
</body>
</html>Ce style s’applique uniquement à dummy.html. Notre page hello-css.html ne sera pas affectée. Si vous avez fait les choses correctement, vous devriez voir un texte bleu clair lorsque vous chargez dummy.html dans un navigateur.
Tout ce que vous voudriez mettre dans notre fichier styles.css peut vivre dans cet élément <style>. Il utilise exactement la même syntaxe CSS qu’une feuille de style externe, mais tout ce qui est placé à cet endroit remplacera les règles de notre fichier styles.css. Dans cet exemple, nous indiquons au navigateur d’ignorer la propriété de color que nous avons définie pour <body> dans notre feuille de style externe et utilisez #0000FF à la place.
Le problème avec les styles spécifiques à la page est qu’ils sont incroyablement difficiles à maintenir. Comme le montre le diagramme ci-dessus, lorsque vous souhaitez appliquer ces styles à une autre page, vous devez les copier dans le <head> de ce document. Essayer de retrouver les règles CSS redondantes dans plusieurs fichiers .html est beaucoup plus difficile que d’éditer un seul fichier .css.
Les styles spécifiques à la page sont occasionnellement utiles lorsque vous êtes pressé, mais il est presque toujours préférable de stocker tous vos CSS dans des feuilles de style externes.
Style en ligne
Vous pouvez également utiliser les règles CSS dans l’attribut style d’un élément HTML. Dans dummy.html , nous avons un lien qui ne mène nul part. Stylisons le en rouge grâce à un style en ligne:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Dummy</title>
<link rel='stylesheet' href='styles.css'/>
<style>
body {
color: #0000FF; /* Blue */
}
</style>
</head>
<body>
<h1>Dummy</h1>
<p>Ceci est une dummy page. <a href='hello-css.html'>Revenir en arrière</a>.</p>
<p>Vous voulez essayer <a href='nowhere.html' style='color: #990000; text-decoration: line-through;'>un lien obsolète</a>? Clic sur ce lien!</p>
</body>
</html>Comme les styles spécifiques à la page, il s’agit de la même syntaxe CSS avec laquelle nous avons travaillé. Cependant, comme il s’agit d’un attribut, il doit être condensé sur une seule ligne. Les styles en ligne sont le moyen le plus spécifique de définir CSS. Les propriétés de color et text-decoration que nous avons définies ici dominent toutes les autres . Même si nous ajoutons un text-decoration: none à notre élément <style> , il n’aurait aucun effet.
Les styles en ligne doivent être évités à tout prix, car ils empêchent de modifier les styles par feuille de style externe. Si vous voulez re-styliser votre site Web, vous ne pouvez pas modifier que quelques règles dans votre fichier global styles.css ; vous devriez passer par toutes les pages une à une et mettre à jour tous les éléments HTML qui ont un attribut style . C’est horreur !.
Ceci étant dit, vous devrez, à de nombreuses reprises appliquer des styles à un élément HTML spécifique. Pour cela, vous devez toujours utiliser des classes CSS au lieu des styles inline. Nous allons explorer les classes CSS dans le chapitre sur les sélecteurs CSS.
Feuilles de style mutliples
Les règles CSS peuvent être réparties sur plusieurs feuilles de style externes en ajoutant plusieurs éléments <link/> à la même page. Un cas d’utilisation courante est de séparer les styles pour différentes sections de votre site. Cela vous permet d’appliquer sélectivement des styles cohérents à différentes catégories de pages Web.
Par exemple, si nous avions un tas de pages de produits qui étaient tout à fait différentes de celles de notre blog, nous pourrions utiliser ce qui suit. (Nous n’avons pas vraiment ces feuilles de style définies, alors n’hésitez pas à les ajouter à notre exemple de projet.)
<head>
<link rel='stylesheet' href='styles.css'/>
<link rel='stylesheet' href='product.css'/>
</head>
<head>
<link rel='stylesheet' href='styles.css'/>
<link rel='stylesheet' href='blog.css'/>
</head>L’ordre des éléments <link/> importe. Les feuilles de style qui viennent plus tard annuleront les styles des versions antérieures. En règle générale, vous mettez vos styles de « base » ou « par défaut » dans une feuille de style globale ( styles.css ) et les complétez avec des feuilles de style spécifiques à une section ( product.css et blog.css ). Cela vous permet d’organiser des règles CSS dans des fichiers gérables tout en évitant les risques des styles spécifiques aux pages et en ligne.
Résumé
Nous avons beaucoup parlé de la séparation du contenu de la présentation dans ce chapitre. Cela nous permet non seulement de réutiliser la même feuille de style CSS dans plusieurs documents HTML, mais aussi d’appliquer conditionnellement différentes règles CSS au même contenu HTML, selon que l’utilisateur est sur un téléphone portable, une tablette ou un ordinateur de bureau. Cette dernière partie s’appelle Responsive Design.
Ce chapitre s’est concentré principalement sur le formatage du texte, mais le CSS peut faire beaucoup plus. Dans le prochain chapitre, nous allons commencer à explorer comment CSS définit la mise en page de nos pages Web. Pour finir, n’oubliez pas que vous pouvez toujours vous référer à la Référence CSS de MDN lorsque vous ne savez pas comment fonctionne une propriété particulière.