l10n-fr | CREATE stylesheet + css box models tasks + tracking protection (#972)

* l10n-fr | CREATE stylesheet FR version

* l10n-fr | CREATE css box models tasks - FR version

* l10n-fr | CREATE Tracking protection - until L72

* l10n-fr | Tracking Protection - translation completed

* Review Stylesheet glossary

* Review LA - Box model assessment

* Review - Tracking Protection

Co-authored-by: julieng <julien.gattelier@gmail.com>

3 files changed, 203 insertions, 0 deletions

diff --git a/files/fr/glossary/stylesheet/index.html b/files/fr/glossary/stylesheet/index.html
new file mode 100644
index 0000000000..6e7d53a6f8
--- /dev/null
+++ b/files/fr/glossary/stylesheet/index.html
@@ -0,0 +1,20 @@
+---
+title: Feuille de style
+slug: Glossary/Stylesheet
+tags:
+  - Glossary
+  - StyleSheet
+translation_of: Glossary/Stylesheet
+---
+<p>Une <strong>feuille de style</strong> est un ensemble de règles CSS utilisé pour contrôler la mise en page et le style d'une page web ou d'un document. Les feuilles de style <em>internes</em> sont disposées au sein d'une balise HTML <a href="/fr/docs/Web/HTML/Element/style"><code>&lt;style&gt;</code></a> dans la section <a href="/fr/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a> du document web ; les feuilles de style <em>externes</em> sont quant à elles placées dans un fichier <code>.css</code> distinct : elles sont appliquées au document grâce à une référence au fichier dans un élément <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> dans l'en-tête du document, entre les balises <a href="/fr/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a></p>
+
+<p>On préfèrera utiliser des feuilles de style externes, car elles permettent de contrôler le style de plusieurs pages à partir d'un seul endroit, plutôt que d'avoir à répéter le même code CSS sur chaque page.</p>
+
+<h2 id="learn_more">En savoir plus</h2>
+
+<h3 id="general_knowledge">Connaissances générales</h3>
+
+<ul>
+ <li><a href="/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a></li>
+ <li>Les feuilles de style sur <a href="https://fr.wikipedia.org/wiki/Feuille_de_style">Wikipédia</a></li>
+</ul>
diff --git a/files/fr/learn/css/building_blocks/box_model_tasks/index.html b/files/fr/learn/css/building_blocks/box_model_tasks/index.html
new file mode 100644
index 0000000000..eb968b8e31
--- /dev/null
+++ b/files/fr/learn/css/building_blocks/box_model_tasks/index.html
@@ -0,0 +1,85 @@
+---
+title: 'Testez vos connaissances : le modèle de boîte'
+slug: Learn/CSS/Building_blocks/Box_Model_Tasks
+tags:
+  - Beginner
+  - CSS
+translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks
+---
+<div>{{LearnSidebar}}</div>
+
+<p>L'objectif de cet exercice est de vous aider à vérifier votre compréhension du modèle de boîte CSS.</p>
+
+<div class="notecard note">
+<p><strong>Note</strong> : Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut toutefois être plus utile de télécharger le code et de passer par un éditeur en ligne comme <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">JSFiddle</a> ou <a href="https://glitch.com/">Glitch</a> pour travailler sur les exercices.</p>
+<p>Si vous bloquez, demandez-nous de l'aide : voir la section <a href="#assessment_or_further_help">Évaluation et aide</a> en bas de cette page.</p>
+</div>
+
+<h2 id="the_box_model_one">Modèle de boîte : numéro 1</h2>
+
+<p>Regardez les deux boîtes ci-dessous : l'une utilise le modèle standard, tandis que l'autre utilise le modèle alternatif. Changez la largeur de la seconde boîte en ajoutant des règles à la classe .alternate, de façon à ce que sa largeur corresponde à la largeur visuelle de la première boîte. Le résultat final doit ressembler à l'image ci-dessous :</p>
+
+<p><img alt="Deux boîtes de la même taille" src="mdn-box-model1.png"></p>
+
+<p>Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}</p>
+
+<div class="notecard note">
+<p>Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p>
+</div>
+
+<h2 id="the_box_model_two">Modèle de boîte : numéro 2</h2>
+
+<p>Dans cet exercice, ajoutez à la boîte :</p>
+
+<ul>
+ <li>une bordure pointillée, noire, de 5px d'épaisseur ;</li>
+ <li>une marge supérieure de 20px ;</li>
+ <li>une marge à droite de 1em ;</li>
+ <li>une marge inférieure de 40px ;</li>
+ <li>une marge gauche de 2em ;</li>
+ <li>un espace intérieur sur tous les côtés de 1em.</li>
+</ul>
+
+<p><img alt="Une boîte avec une bordure pointillée" src="mdn-box-model2.png"></p>
+
+<p>Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}</p>
+
+<div class="notecard note">
+<p>Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p>
+</div>
+
+<h2 id="the_box_model_three">Modèle de boîte : numéro 3</h2>
+
+<p>Dans cet exemple, l'élément en ligne possède une marge, un espacement intérieur et une bordure ; toutefois, les lignes au-dessus et en dessous débordent. Que pouvez-vous ajouter à votre code CSS pour que la taille de la marge, de l'espacement intérieur et de la bordure soient respectée par les autres lignes, tout en gardant l'élément en ligne ?</p>
+
+<p><img alt="Une boîte en ligne avec un espace entre elle et le texte qui l'entoure" src="mdn-box-model3.png"></p>
+
+<p>Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}</p>
+
+<div class="notecard note">
+<p>Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p>
+</div>
+
+<h2 id="assessment_or_further_help">Évaluation et aide</h2>
+
+<p>Vous pouvez essayer ces exemples dans les éditeurs interactifs présents sur cette page.</p>
+
+<p>Si vous souhaitez obtenir une évaluation de votre travail, ou si vous bloquez et que vous souhaitez obtenir de l'aide :</p>
+
+<ol>
+ <li>Enregistrez votre travail dans un éditeur en ligne partageable, du type <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">JSFiddle</a> ou <a href="https://glitch.com/">Glitch</a>. Vous pouvez soit écrire le code vous-même, soit utiliser les fichiers de départ fournis dans chacune des sections ci-dessus.</li>
+ <li>Écrivez un message demandant une évaluation et/ou de l'aide dans la catégorie <a href="https://discourse.mozilla.org/c/mdn/learn">"Apprentissage" (Learning) du forum Discourse de MDN</a>. Votre message doit inclure :
+  <ul>
+   <li>Un titre explicite, par exemple "Évaluation demandée pour le test de modèle de boîte CSS 1".</li>
+   <li>Des détails sur ce que vous avez déjà tenté, et ce que vous attendez de nous : par exemple, si vous bloquez et avez besoin d'aide, ou si vous souhaitez obtenir une évaluation de votre travail.</li>
+   <li>Un lien vers l'exemple que vous souhaitez voir évalué ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne partageable (comme mentionné dans l'étape 1 au-dessus). C'est une bonne habitude à prendre : il est très difficile d'aider quelqu'un qui rencontre un problème de codage… si vous ne pouvez pas voir leur code!</li>
+   <li>Un lien vers l'exercice en cours ou la page d'évaluation, de façon à ce qu'on puisse trouver la question pour laquelle vous avez besoin d'aide.</li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/fr/web/privacy/tracking_protection/index.html b/files/fr/web/privacy/tracking_protection/index.html
new file mode 100644
index 0000000000..2f1aab1678
--- /dev/null
+++ b/files/fr/web/privacy/tracking_protection/index.html
@@ -0,0 +1,98 @@
+---
+title: Protection contre le pistage
+slug: Web/Privacy/Tracking_Protection
+tags:
+  - Privacy
+  - Private browsing
+  - blocking
+  - tracking
+translation_of: Web/Privacy/Tracking_Protection
+---
+
+<h2 id="what_is_tracking_protection">La protection contre le pistage, qu'est-ce que c'est ?</h2>
+
+<p>Firefox Desktop et Firefox pour Android intègrent des protections natives contre le pistage. Dans les fenêtres de navigation privée (des onglets dans Firefox pour Android), Firefox bloquera le contenu provenant de domaines qui pistent les utilisateurs sur différents sites.</p>
+
+<p>Si le contenu bloqué fait partie intégrante de la page, les utilisatrices et utilisateurs peuvent remarquer des incohérences et bugs dans la mise en page aux endroits où Firefox bloque les chargements. Parfois, en revanche, on ne remarquera rien du tout, par exemple lorsque la structure de la page est telle que d'autres éléments de la page glissent pour remplir les espaces laissés par les éléments bloqués.</p>
+
+<p>Lorsque Firefox bloque du contenu, on aura un message de ce type enregistré dans la Console web :</p>
+
+<pre>La ressource située à "http://telle/adresse/" a été bloqué parce que la protection contre le pistage est activée.</pre>
+
+<p>Notez qu'avec Firefox pour Android, vous pouvez accéder aux résultats de la console en utilisant un débogueur distant.</p>
+
+<p><img alt="Page d'information indiquant un potentiel contenu bloqué." src="blocked_content.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Cliquez sur le symbole ⓘ dans la barre d'adresse pour voir les informations concernant la page actuellement chargée. La fenêtre contextuelle qui apparaît vous notifiera lorsque du contenu aura été bloqué. Si vous le souhaitez, vous aurez également la possibilité de désactiver complètement la protection contre le pistage en accédant aux réglages relatifs au pistage.</p>
+
+<p>Si des cookies de pistage étaient présents, vous auriez la possibilité d'en voir la liste en cliquant sur "Bloquer les cookies de pistage" dans l'image ci-dessus pour voir la fenêtre contextuelle suivante :</p>
+
+<p><img alt="" src="tracking_cookies.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Vous pouvez cliquer sur "Gérer le contenu bloqué" pour modifier les réglages de blocage :</p>
+
+<p><img alt="" src="content_blocking.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h2 id="how_does_firefox_choose_what_to_block">Comment Firefox détermine ce qui doit être bloqué ?</h2>
+
+<p>Le contenu est bloqué en fonction du domaine depuis lequel il est chargé.</p>
+
+<p>Firefox est fourni avec une liste de sites qui ont été identifiés comme participant au pistage multi-sites des utilisateurs. Lorsque la protection contre le pistage est activée, Firefox bloque le contenu provenant des sites de cette liste.</p>
+
+<p>Les sites qui suivent les utilisateurs sont la plupart du temps des annonceurs tiers et des sites d'analyse statistique.</p>
+
+<h2 id="what_does_this_mean_for_your_website">Qu'est-ce que cela implique pour votre site web ?</h2>
+
+<p>De façon évidente, cela signifie que lorsque la protection contre le pistage est activée :</p>
+
+<ul>
+ <li>le contenu provenant de traqueurs tiers ne sera pas visible par vos utilisateurs</li>
+ <li>votre site ne pourra pas utiliser de publicités tierces ou de services d'analyse d'audience qui font du pistage</li>
+</ul>
+
+<p>De façon plus subtile, si d'autres parties de votre site dépendent des traqueurs utilisés, ces parties peuvent se retrouver hors d'usage lorsque la protection contre le pistage est activée. En pratique : imaginons que votre site intègre du contenu provenant d'un site qui suit les utilisateurs, et qu'un callback est lancé dès que ce contenu est chargé. Si la protection est activée, l'appel retour ne sera pas exécuté.</p>
+
+<p>Par exemple, vous ne devriez pas utiliser Google Analytics de la façon suivante :</p>
+
+<pre class="brush:html example-bad">&lt;a href="http://www.exemple.com" onclick="trackLink('http://www.exemple.com', event);"&gt;
+  Visiter exemple.com
+&lt;/a&gt;
+
+&lt;script&gt;
+function trackLink(url,event) {
+  event.preventDefault();
+  ga('send', 'event', 'outbound', 'click', url, {
+    'transport': 'beacon',
+    'hitCallback': function() {
+      document.location = url;
+    }
+  });
+}
+&lt;/script&gt;</pre>
+
+<p>Au lieu de cela, prenez en compte le cas où Google Analytics est absent, en vérifiant si l'objet <code>ga</code> a été initialisé :</p>
+
+<pre class="brush:html example-good">&lt;a href="http://www.exemple.com" onclick="trackLink('http://www.exemple.com', event);"&gt;
+  Visiter exemple.com
+&lt;/a&gt;
+
+&lt;script&gt;
+function trackLink(url,event) {
+  event.preventDefault();
+  if (window.ga &amp;&amp; <span class="pl-smi">ga</span>.loaded) {
+    ga('send', 'event', 'outbound', 'click', url, {
+      'transport': 'beacon',
+      'hitCallback': function() { document.location = url; }
+    });
+  } else {
+      document.location = url;
+  }
+}
+&lt;/script&gt;
+</pre>
+
+<p>Pour plus d'information sur cette technique, regardez l'article sur <a href="https://hacks.mozilla.org/2016/01/google-analytics-privacy-and-event-tracking/">Google Analytics, Vie privée et Suivi d'événements</a> (en anglais).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Dépendre d'un élément tiers de cette façon n'est dans tous les cas pas une bonne pratique, car votre site peut se retrouver hors d'usage si la partie tierce est lente ou indisponible, ou si le traqueur a été bloqué par une extension.</p>
+</div>
\ No newline at end of file