L10N: Translation of the Supporting_older_browers page (#250)

* L10N: Translation of the Supporting_older_browers page

* Fix typo and img link

* Minor rewordings

Co-authored-by: SphinxKnight <SphinxKnight@users.noreply.github.com>

1 files changed, 114 insertions, 92 deletions

diff --git a/files/fr/learn/css/css_layout/supporting_older_browsers/index.html b/files/fr/learn/css/css_layout/supporting_older_browsers/index.html
index 7a2fc30b98..b7eea3d877 100644
--- a/files/fr/learn/css/css_layout/supporting_older_browsers/index.html
+++ b/files/fr/learn/css/css_layout/supporting_older_browsers/index.html
@@ -1,6 +1,19 @@
 ---
 title: Prise en charge des anciens navigateurs
 slug: Learn/CSS/CSS_layout/Supporting_Older_Browsers
+tags:
+  - Apprendre
+  - Beginner
+  - CSS
+  - Débutant
+  - Guide
+  - Layout
+  - Learn
+  - feature queries
+  - flexbox
+  - float
+  - grid
+  - legacy
 translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers
 original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs
 ---
@@ -8,53 +21,56 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs
 
 <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p>
 
-<p class="summary">In this module, we recommend using Flexbox and Grid as the main layout methods for your designs. However, there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.</p>
+<p class="summary">Dans ce module, nous vous recommandons d'utiliser Flexbox et les grilles CSS comme principales méthodes de mise en page de vos créations. Cependant, certains visiteurs de votre site utilisent des navigateurs plus anciens ou qui ne prennent pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web : au fur et à mesure que de nouvelles fonctionnalités sont développées, les différents navigateurs donnent la priorité à certaines fonctionnalités plutôt qu'à d'autres. Cet article explique comment utiliser les techniques modernes du Web sans exclure les utilisateurs de technologies plus anciennes.</p>
 
 <table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> and <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To understand how to provide support for your layouts on older browsers that might not support the features you want to use.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis&nbsp;:</th>
+      <td>Les bases du HTML (étudiez <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une idée du fonctionnement de CSS (étudiez <a href="/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a> et <a href="/fr/docs/Learn/CSS/Building_blocks">Blocs de base en CSS</a>.)</td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif :</th>
+      <td>Comprendre comment assurer la prise en charge, de vos mises en page, sur les anciens navigateurs qui pourraient ne pas supporter les fonctionnalités que vous souhaitez utiliser.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="What_is_the_browser_landscape_for_your_site">What is the browser landscape for your site?</h2>
+<h2 id="What_is_the_browser_landscape_for_your_site">Quel est le terrain des navigateurs pour votre site ?</h2>
 
-<p>Every website is different in terms of target audience. Before deciding on the approach to take, find out the number of visitors coming to your site using older browsers. This is straightforward if you have an existing website which you are adding to or replacing, as you probably have analytics available which can tell you the technology people are using. If you have no analytics or this is a brand new site, then there are sites such as <a href="http://gs.statcounter.com/">Statcounter</a> that can provide statistics filtered by location.</p>
+<p>Chaque site web est différent en termes de public ciblé. Avant de décider de l'approche à adopter, déterminez le nombre de visiteurs qui arrivent sur votre site en utilisant d'anciens navigateurs. Cette démarche est simple si vous avez un site existant que vous souhaitez compléter ou remplacer, car vous disposez probablement d'outils d'analyse qui peuvent vous indiquer la technologie utilisée par les visiteurs. Si vous n'avez pas de système d'analyse ou s'il s'agit d'un tout nouveau site, il existe des sites tels que <a href="http://gs.statcounter.com/">Statcounter</a> qui peuvent fournir des statistiques filtrées par région.</p>
 
-<p>You should also consider the type of devices and the way people use your site, for example, you may expect a higher than an average number of mobile devices. Accessibility and people using assistive technology should always be considered, but for some sites that may be even more critical. In my experience, developers are often very worried about the experience of 1% of users in an old version of Internet Explorer, while not considering at all the far greater number who have accessibility needs.</p>
+<p>Vous devez également tenir compte du type d'appareils et de la façon dont les visiteurs utilisent votre site. Par exemple, vous pouvez vous attendre à un nombre d'appareils mobiles supérieur à la moyenne. L'accessibilité et les personnes utilisant des technologies d'assistance doivent toujours être prises en compte, mais pour certains sites, cela peut être encore plus critique.</p>
 
-<h2 id="What_is_the_support_for_the_features_you_want_to_use">What is the support for the features you want to use?</h2>
+<h2 id="What_is_the_support_for_the_features_you_want_to_use">Quelle est la prise en charge des fonctionnalités que vous souhaitez utiliser ?</h2>
 
-<p>Once you know the browsers that come to your site, you can assess any technology that you want to use against how well it is supported and how easily you can provide an alternative for visitors who do not have that technology available. We are trying to make this easy for you at MDN, by providing browser compatibility information on each page detailing a CSS property. For example, take a look at the page for {{cssxref("grid-template-columns")}}. At the bottom of this page is a table, which lists major browsers along with the version they began supporting this property.</p>
+<p>Une fois que vous connaissez les navigateurs utilisés pour accéder à votre site, vous pouvez évaluer toute technologie que vous souhaitez utiliser, en fonction de sa prise en charge dans les différents navigateurs et de la facilité avec laquelle vous pouvez proposer une alternative aux visiteurs qui ne disposent pas de cette technologie. Nous essayons de vous faciliter la tâche sur le MDN, en fournissant des informations sur la compatibilité des navigateurs sur chaque page détaillant une propriété CSS. Par exemple, jetez un œil à la page de {{cssxref("grid-template-columns")}}. Au bas de cette page se trouve un tableau qui répertorie les principaux navigateurs avec la version dans laquelle ils ont commencé à prendre en charge cette propriété.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/16047/browser-table.png" style="height: 1178px; width: 2102px;"></p>
+<p><img alt="Capture d'un tableau de compatibilité d'une page sur MDN où on voit en vert les versions initiales compatibles et en rouge les navigateurs sans prise en charge" src="browser-table.png"></p>
 
-<p>Another popular way to find out about how well a feature is supported is the <a href="https://caniuse.com/">Can I Use</a> website. This site lists the majority of Web Platform features with information about their browser support status. You can view usage statistics by location — useful if you work on a site that has users mostly for a specific area of the world. You can even link your Google Analytics account to get analysis based on your user data.</p>
+<p>Un autre moyen qui est fréquemment utilisé pour savoir dans quelle mesure une fonctionnalité est prise en charge est le site <a href="https://caniuse.com/">Can I Use</a>. Ce site répertorie la majorité des fonctionnalités de la plate-forme web avec des informations sur leur statut de prise en charge par les navigateurs. Vous pouvez afficher les statistiques d'utilisation par emplacement — utile si vous travaillez sur un site qui a des utilisateurs principalement pour une région spécifique du monde. Vous pouvez même relier votre compte Google Analytics pour obtenir une analyse basée sur vos données d'utilisateur.</p>
 
-<p>Understanding the technology your users have, and the support for things you might want to use puts you in a good place to make all of your decisions and to know how best to support all of your users.</p>
+<p>Comprendre la technologie dont disposent vos utilisateurs et la prise en charge des fonctionnalités que vous pourriez vouloir utiliser vous place dans une bonne position pour prendre toutes vos décisions et savoir comment servir au mieux tous vos utilisateurs.</p>
 
-<h2 id="Support_doesnt_mean_looks_the_same">Support doesn't mean "looks the same"</h2>
+<h2 id="Support_doesnt_mean_looks_the_same">Prendre en charge ne veut pas dire « ressembler à la même chose »</h2>
 
-<p>A website can’t possibly look the same in all browsers, because some of your users will be viewing the site on a phone and others on a large desktop screen. Similarly, some of your users will have an old browser version, and others the latest browser. Some of your users might be hearing your content read out to them by a screen reader, or have zoomed in on the page to be able to read it. Supporting everyone means serving a version of your content that is designed defensively, so that it will look great on modern browsers, but will still be usable at a basic level for users of older browsers.</p>
+<p>Un site web ne peut pas avoir le même aspect dans tous les navigateurs, car certains de vos utilisateurs consulteront le site sur un téléphone et d'autres sur un grand écran de bureau. De même, certains de vos utilisateurs auront une ancienne version du navigateur, et d'autres la dernière. Certains de vos utilisateurs pourront lire votre contenu à l'aide d'un lecteur d'écran, ou auront zoomé sur la page pour pouvoir la lire. La prise en charge de tous les utilisateurs signifie que vous devez fournir une version de votre contenu conçue de manière défensive, afin qu'elle soit parfaite sur les navigateurs modernes, tout en restant utilisable à un niveau de base pour les utilisateurs de navigateurs plus anciens.</p>
 
-<p>A basic level of support comes from structuring your content well so that the normal flow of your page makes sense. A user with a very limited feature phone might not get much of your CSS, but the content will flow in a way that makes reading easy. Therefore, a well-structured HTML document should always be your starting point. <em>If you remove your stylesheet, does your content make sense?</em></p>
+<p>Une prise en charge basique consiste à bien structurer votre contenu afin que le flux de votre page ait un sens. Un utilisateur disposant d'un téléphone aux fonctionnalités très limitées ne comprendra peut-être pas grand-chose à votre CSS, mais le contenu s'écoulera de manière à faciliter la lecture. Par conséquent, un document HTML bien structuré devrait toujours être votre point de départ. <em>Si vous supprimez votre feuille de style, votre contenu a-t-il un sens ?</em></p>
 
-<p>One option is to leave this plain view of the site as the fallback for people using very old or limited browsers. If you have a tiny number of people coming to the site in these browsers it may not make commercial sense to pour time into trying to give them a similar experience to people on modern browsers. It would be better to spend the time on things which make the site more accessible, thus serving far more users. There is a middle ground between a plain HTML page and all the bells and whistles, and CSS has actually made creating these fallbacks pretty straightforward.</p>
+<p>Une option consiste à laisser cette vue simple du site comme solution de repli pour les personnes utilisant des navigateurs très anciens ou limités. Si le nombre de personnes qui consultent le site à l'aide de ces navigateurs est minime, il n'est peut-être pas judicieux, d'un point de vue commercial, de consacrer du temps à essayer de leur offrir une expérience similaire à celle des utilisateurs de navigateurs modernes. Il vaudrait mieux consacrer ce temps à des choses qui rendent le site plus accessible afin qu'il bénéficie à un plus grand nombre d'utilisateurs. Il existe un monde une page HTML basique et un site rutilant de fonctionnalités ; CSS permet la création de ces solutions de repli assez simplement.</p>
 
-<h2 id="Creating_fallbacks_in_CSS">Creating fallbacks in CSS</h2>
+<h2 id="Creating_fallbacks_in_CSS">Création de substituts en CSS</h2>
 
-<p>CSS specifications contain information that explains what the browser does when two layout methods are applied to the same item. This means that there is a definition for what happens if a floated item, for example, is also a Grid Item using CSS Grid Layout. Couple this information with the knowledge that browsers ignore CSS that they don’t understand, and you have a way to create simple layouts using the <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">legacy techniques</a> we have already covered, which are then overwritten by your Grid layout in modern browsers that understand it.</p>
+<p>Les spécifications CSS contiennent des informations qui expliquent ce que fait le navigateur lorsque deux méthodes de mise en page sont appliquées au même élément. Cela signifie qu'il existe une définition de ce qui se passe si un élément flottant, par exemple, est également un élément de grille utilisant la mise en page de grille CSS. Associez ces informations au fait que les navigateurs ignorent les CSS qu'ils ne comprennent pas, et vous disposez d'un moyen de créer des mises en page simples à l'aide des <a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">techniques historiques</a> que nous avons déjà abordées, qui sont ensuite écrasées par votre mise en page « Grid » dans les navigateurs modernes qui la comprennent.</p>
 
-<p>In the below example, we have floated three <code>&lt;div&gt;</code>s so they display in a row. Any browser that does not support <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">CSS Grid Layout</a> will see the row of boxes as a floated layout. A floated item that becomes a grid item loses the float behaviour, which means that by turning the wrapper into a Grid Container, the floated items become Grid Items. If the browser supports Grid Layout it will display the grid view, if not it ignores the and<code>display: grid</code> related properties and the floated layout is used.</p>
+<p>Dans l'exemple ci-dessous, nous avons fait flotter trois <code>&lt;div&gt;</code> pour les afficher en ligne. Tout navigateur qui ne prend pas en charge <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">CSS Grid Layout</a> verra la rangée de cases comme une disposition flottante. Un élément flottant qui devient un élément de grille perd le comportement flottant, ce qui signifie qu'en transformant le conteneur en conteneur de grille, les éléments flottants deviennent des éléments de grille.Si le navigateur prend en charge la mise en page de la grille, il affichera la vue de la grille, sinon il ignore les propriétés liées à ce dernier, en plus de <code>display : grid</code>, et la mise en page flottante est utilisée.</p>
 
-<div id="Example1">
-<pre class="brush: css">* {box-sizing: border-box;}
+<h3 id="Example_1">Exemple</h3>
+<h4 id="CSS_1">CSS</h4>
+<pre class="brush:css">* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   background-color: rgb(79,185,227);
@@ -72,6 +88,7 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs
 }
 </pre>
 
+<h4 id="HTML_1">HTML</h4>
 <pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div class="item"&gt;Item One&lt;/div&gt;
   &lt;div class="item"&gt;Item Two&lt;/div&gt;
@@ -79,36 +96,38 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs
 &lt;/div&gt;
 </pre>
 
-<p>{{ EmbedLiveSample('Example1', '100%', '200') }}</p>
-</div>
+{{EmbedLiveSample('Example_1', '', '150')}}
 
-<div class="note">
-<p><strong>Note</strong>: The {{cssxref("clear")}} property also has no effect once the cleared item becomes a grid item, so you could have a layout with a cleared footer, which is then turned into a Grid Layout.</p>
+<div class="notecard note">
+  <p><strong>Note :</strong> La propriété {{cssxref("clear")}} n'a également aucun effet une fois que l'élément dégagé devient un élément de grille. Vous pouvez donc avoir une mise en page avec un pied de page dégagé, qui est ensuite transformée en une mise en page sur une grille CSS.</p>
 </div>
 
-<h3 id="Fallback_Methods">Fallback Methods</h3>
+<h3 id="Fallback_Methods">Méthodes de substitution</h3>
 
-<p>There are a number of layout methods which can be used in a similar way to this float example. You can choose the one that makes the most sense for the layout pattern you need to create.</p>
+<p>Il existe un certain nombre de méthodes de mise en page qui peuvent être utilisées de manière similaire à cet exemple d'éléments flottants. Vous pouvez choisir celle qui convient le mieux selon le modèle de présentation que vous devez créer.</p>
 
 <dl>
- <dd>Float and <strong><strong>clear</strong></strong></dd>
- <dd>As shown above, the float and clear properties cease to affect the layout if floated or cleared items become flex or grid items.</dd>
- <dt>display: inline-block</dt>
- <dd>This method can be used to create column layouts, if an item has <code>display: inline-block</code> set but then becomes a flex or grid item, the inline-block behaviour is ignored.</dd>
- <dt>display: table</dt>
- <dd>The method of creating CSS Tables described in the <a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">introduction</a> to these lessons can be used as a fallback. Items that have CSS table layouts set on them will lose this behaviour if they become flex or grid items. Importantly, the anonymous boxes created to fix up the table structure are not created.</dd>
- <dt>Multiple-column Layout</dt>
- <dd>For certain layouts you could use <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">multi-col</a> as a fallback, if your container has any of the <code>column-*</code> properties defined on it and then becomes a grid container, the multicol behaviour will not happen.</dd>
- <dt>Flexbox as a Fallback for Grid</dt>
- <dd><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> has greater browser support than Grid due to being supported by IE10 and 11, although do check out the information later in this lesson explaining the rather patchy and confusing support for Flexbox in older browsers. If you make a flex container into a grid container, any <code>flex</code> property applied to the children will be ignored.</dd>
+  <dt><code>float</code> et <code>clear</code></dt>
+  <dd>Comme indiqué ci-dessus, les propriétés <code>float</code> et <code>clear</code> cessent d'affecter la mise en page si les éléments ciblés par <code>float</code> ou <code>clear</code> deviennent des éléments d'une grille ou d'une zone flexible.</dd>
+  <dt><code>display : inline-block</code></dt>
+  <dd>Cette méthode peut être utilisée pour créer des mises en page en colonnes, si un élément a <code>display : inline-block</code> défini mais devient ensuite un élément flexible ou d'une grille, le comportement <i>inline-block</i> est ignoré.</dd>
+  <dt><code>display: table</code></dt>
+  <dd>La méthode de création de tableaux CSS décrite dans l'<a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">introduction</a> de ces leçons peut être utilisée comme solution de substitution. Les éléments sur lesquels des dispositions de tableau CSS ont été définies perdront ce comportement s'ils deviennent des éléments flex ou des éléments de grille. Il est important de noter que les boîtes anonymes créées pour fixer la structure de la table ne sont pas créées.</dd>
+  <dt>Mise en page à colonnes multiples</dt>
+  <dd>Pour certaines mises en page, vous pourriez utiliser <a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">multi-col</a> comme solution de substitution, si votre conteneur a l'une des propriétés <code>column-*</code> définies sur lui et devient ensuite un conteneur de grille, le comportement multicolonne ne se produira pas.</dd>
+  <dt>Flexbox comme solution de repli pour la grille</dt>
+  <dd><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> bénéficie d'une meilleure prise en charge par les navigateurs que les grilles CSS en raison de sa prise en charge par IE10 et 11, même si vous devez consulter les informations plus loin dans cette leçon expliquant la prise en charge plutôt inégale et confuse de Flexbox dans les anciens navigateurs. Si vous transformez un conteneur flexible en conteneur de grille, toute propriété <code>flex</code> appliquée aux enfants sera ignorée.</dd>
 </dl>
 
-<p>For many layout tweaks in older browsers, you may find you can give a decent experience by using CSS in this way. We add a simpler layout based on older and well-supported techniques, then use the newer CSS to create the layout that over 90% of your audience will see. There are cases, however, when the fallback code will need to include something that the new browsers will also interpret. A good example of this is if we were to add percentage widths to our floated items to make the columns more like the grid display, stretching to fill the container.</p>
+<p>Pour de nombreux ajustements de mise en page dans les navigateurs plus anciens, vous constaterez peut-être que vous pouvez offrir une expérience décente en utilisant CSS de cette manière. Nous ajoutons une mise en page plus simple basée sur des techniques plus anciennes et bien supportées, puis nous utilisons un CSS plus récent pour créer la mise en page que plus de 90 % de votre public verra. Dans certains cas, cependant, le code de substitution devra inclure un élément que les nouveaux navigateurs interpréteront également. Par exemple, si nous devions ajouter des pourcentages de largeur à nos éléments flottants pour que les colonnes ressemblent davantage à l'affichage en grille, en s'étirant pour remplir le conteneur.</p>
 
-<p>In the floated layout, the percentage is calculated from the container — 33.333% is a third of the container width. In Grid however that 33.333% is calculated from the grid area the item is placed in, so it actually becomes a third of the size we want once the Grid Layout is introduced.</p>
+<p>Dans la disposition flottante, le pourcentage est calculé à partir du conteneur — 33,333 % correspond à un tiers de la largeur du conteneur. Dans la grille, cependant, ces 33,333 % sont calculés à partir de la zone de la grille dans laquelle l'élément est placé, de sorte qu'il devient en fait un tiers de la taille souhaitée une fois que la disposition en grille est introduite.</p>
 
-<div id="Example2">
-<pre class="brush: css">* {box-sizing: border-box;}
+<h3 id="Example_2">Exemple</h3>
+<h4 id="CSS_2">CSS</h4>
+<pre class="brush: css">* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   background-color: rgb(79,185,227);
@@ -127,6 +146,7 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs
 }
 </pre>
 
+<h4 id="HTML_2">HTML</h4>
 <pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div class="item"&gt;Item One&lt;/div&gt;
   &lt;div class="item"&gt;Item Two&lt;/div&gt;
@@ -134,19 +154,21 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs
 &lt;/div&gt;
 </pre>
 
-<p>{{ EmbedLiveSample('Example2', '100%', '200') }}</p>
-</div>
+<p>{{EmbedLiveSample('Example_2', '', '150')}}</p>
 
-<p>To deal with this issue we need to have a way to detect if Grid is supported and therefore if it will override the width. CSS has a solution for us here.</p>
+<p>Pour résoudre ce problème, nous devons trouver un moyen de détecter si la grille est prise en charge et donc si elle remplacera la largeur. CSS a une solution pour nous ici.</p>
 
-<h2 id="Feature_queries">Feature queries</h2>
+<h2 id="Feature_queries">Requêtes de fonctionnalités</h2>
 
-<p>Feature queries allow you to test whether a browser supports any particular CSS feature. This means that you can write some CSS for browsers that don’t support a certain feature, then check to see if the browser has support and if so throw in your fancy layout.</p>
+<p>Les requêtes de fonctionnalités vous permettent de vérifier si un navigateur prend en charge une fonctionnalité CSS particulière. Cela signifie que vous pouvez écrire du CSS pour les navigateurs qui ne prennent pas en charge une certaine fonctionnalité, puis vérifier si le navigateur la prend en charge et, si c'est le cas, intégrer votre mise en page.</p>
 
-<p>If we add a feature query to the above example, we can use it to set the widths of our items back to <code>auto</code>  if we know that we have grid support.</p>
+<p>Si nous ajoutons une requête de fonctionnalité à l'exemple ci-dessus, nous pouvons l'utiliser pour remettre les largeurs de nos éléments sur <code>auto</code> si nous savons que nous avons un support de grille.</p>
 
-<div id="Example3">
-<pre class="brush: css">* {box-sizing: border-box;}
+<h3 id="Example_3">Exemple</h3>
+<h4 id="CSS_3">CSS</h4>
+<pre class="brush: css">* {
+  box-sizing: border-box;
+}
 
 .wrapper {
   background-color: rgb(79,185,227);
@@ -171,6 +193,7 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs
 }
 </pre>
 
+<h4 id="HTML_3">HTML</h4>
 <pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div class="item"&gt;Item One&lt;/div&gt;
   &lt;div class="item"&gt;Item Two&lt;/div&gt;
@@ -178,61 +201,60 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs
 &lt;/div&gt;
 </pre>
 
-<p>{{ EmbedLiveSample('Example3', '100%', '200') }}</p>
-</div>
+<p>{{EmbedLiveSample('Example_3', '', '150')}}</p>
 
-<p>Support for feature queries is very good across modern browsers, however, you should note that it is the browsers that do not support CSS Grid, which also doesn’t support feature queries. This means that an approach as detailed above will work for those browsers. What we are doing is writing our old CSS first, outside of any feature query. Browsers that do not support Grid, and do not support the feature query will use that layout information they can understand and completely ignore everything else. The browsers that support the feature query also support CSS Grid and so will run the grid code and the code inside the feature query.</p>
+<p>La prise en charge des requêtes de caractéristiques est très bonne dans les navigateurs modernes. Toutefois, vous devez noter que ce sont les navigateurs qui ne prennent pas en charge la grille CSS, qui ne prennent pas non plus en charge les requêtes de fonctionnalités. Cela signifie qu'une approche telle que celle décrite ci-dessus fonctionnera pour ces navigateurs. Ce que nous faisons, c'est écrire notre ancien CSS en premier, en dehors de toute requête de fonctionnalité. Les navigateurs qui ne prennent pas en charge la grille et la requête de fonctionnalité utiliseront les informations de mise en page qu'ils peuvent comprendre et ignoreront complètement tout le reste. Les navigateurs qui prennent en charge la requête de fonctionnalité prennent également en charge CSS Grid et exécuteront donc le code de la grille et le code contenu dans la requête de fonctionnalité.</p>
 
-<p>The specification for feature queries also contains the ability to test if a browser does not support a feature — this is only helpful if the browser does support feature queries. In the future, an approach of checking for lack of support will work, as the browsers that don’t have feature query support go away. For now, however, use the approach of doing the older CSS, then overwriting it, for the best support.</p>
+<p>La spécification pour les requêtes de fonctionnalités contient également la possibilité de tester si un navigateur ne prend pas en charge une fonctionnalité — cela n'est utile que si le navigateur prend en charge les requêtes de fonctionnalités. À l'avenir, une approche consistant à vérifier l'absence de prise en charge fonctionnera, car les navigateurs qui ne prennent pas en charge les requêtes de caractéristiques disparaîtront. Pour l'instant, cependant, utilisez l'approche consistant à utiliser l'ancien CSS, puis à l'écraser, pour obtenir la meilleure prise en charge possible.</p>
 
-<h2 id="Older_versions_of_Flexbox">Older versions of Flexbox</h2>
+<h2 id="Older_versions_of_Flexbox">Anciennes versions de Flexbox</h2>
 
-<p>In older versions of browsers, you can find previous iterations of the Flexbox specification. At the time of writing, this is mostly an issue with Internet Explorer 10, which uses the <code>-ms-</code>  prefix for Flexbox. This also means that there are some outdated articles and tutorials in existence; <a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">this useful guide</a> helps you check what you are looking at and can also help if you need flex support in very old browsers.</p>
+<p>Dans les anciennes versions des navigateurs, vous pouvez trouver des itérations précédentes de la spécification Flexbox. Au moment de la rédaction de cet article, il s'agit principalement d'un problème avec Internet Explorer 10, qui utilise le préfixe <code>-ms-</code> pour Flexbox. Cela signifie également qu'il existe des articles et des tutoriels dépassés ; <a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">ce guide utile</a> vous aide à vérifier ce que vous regardez et peut également vous aider si vous avez besoin d'une prise en charge de Flexbox dans de très anciens navigateurs.</p>
 
-<h2 id="The_IE10_and_11_prefixed_version_of_Grid">The IE10 and 11 prefixed version of Grid</h2>
+<h2 id="The_IE10_and_11_prefixed_version_of_Grid">La version préfixée d'IE10 et 11 de Grid</h2>
 
-<p>The CSS Grid specification was initially prototyped In Internet Explorer 10; this means that while IE10 and IE11 do not have <em>modern</em> grid support, they do have a version of Grid layout that is very usable, although different to the modern specification documented on this site. The IE10 and 11 implementations is  <code>-ms-</code> prefixed, which means you can use it for these browsers and it will be ignored by non-Microsoft browsers. Edge does still understand the old syntax, however, so take care that everything is safely overwritten in your modern grid CSS.</p>
+<p>La spécification CSS Grid a été initialement prototypée dans Internet Explorer 10 ; cela signifie que si IE10 et IE11 ne disposent pas du support de la grille <em>moderne</em>, ils disposent d'une version de la mise en page Grid qui est très utilisable, bien que différente de la spécification moderne documentée sur ce site. Les implémentations d'IE10 et 11 sont préfixées <code>-ms-</code>, ce qui signifie que vous pouvez les utiliser pour ces navigateurs et qu'elles seront ignorées par les navigateurs non-Microsoft. Edge comprend toujours l'ancienne syntaxe, cependant, alors faites attention à ce que tout soit écrasé en toute sécurité dans votre grille CSS moderne.</p>
 
-<p>The guide to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Progressive Enhancement in Grid Layout</a> can help you understand the IE version of the grid, and we have included some additional useful links at the end of this lesson. However, unless you have a very high number of visitors in older IE versions, you may find it better to focus on creating a fallback that works for all non-supporting browsers.</p>
+<p>Le guide <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Les grilles CSS et l'amélioration progressive</a> peut vous aider à comprendre la version IE de la grille, et nous avons inclus quelques liens utiles supplémentaires à la fin de cette leçon. Cependant, à moins que vous n'ayez un nombre très élevé de visiteurs dans des versions IE plus anciennes, il est préférable de vous concentrer sur la création d'une solution de substitution qui fonctionne pour tous les navigateurs non pris en charge.</p>
 
-<h2 id="Testing_older_browsers">Testing older browsers</h2>
+<h2 id="Testing_older_browsers">Test des anciens navigateurs</h2>
 
-<p>With the majority of browsers supporting Flexbox and Grid, it can be reasonably hard to test older browsers. One way is to use an online testing tool such as Sauce Labs, as detailed in the <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross browser testing</a> module.</p>
+<p>La majorité des navigateurs prenant en charge Flexbox et Grid, il peut être raisonnablement difficile de tester les navigateurs plus anciens. Une façon de procéder est d'utiliser un outil de test en ligne tel que Sauce Labs, comme détaillé dans le module <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Test sur plusieurs navigateurs</a>.</p>
 
-<p>You can also download and install Virtual Machines, and run older versions of browsers in a contained environment on your own computer. Having access to older versions of Internet Explorer is particularly useful, and for that purpose, Microsoft has made <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">a range of Virtual Machines available for free download</a>. These are available for Mac, Windows and Linux operating systems and so are a great way to test in old and modern Windows browsers even if you are not using a Windows computer.</p>
+<p>Vous pouvez également télécharger et installer des machines virtuelles, et exécuter les anciennes versions des navigateurs dans un environnement confiné sur votre propre ordinateur. Avoir accès à d'anciennes versions d'Internet Explorer est particulièrement utile, et à cette fin, Microsoft a mis à disposition <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">une gamme de machines virtuelles à télécharger gratuitement</a>. Celles-ci sont disponibles pour les systèmes d'exploitation Mac, Windows et Linux et constituent donc un excellent moyen de tester les navigateurs Windows anciens et modernes, même si vous n'utilisez pas d'ordinateur Windows.</p>
 
-<h2 id="Summary">Summary</h2>
+<h2 id="Summary">Résumé</h2>
 
-<p>You now have the knowledge to confidently use techniques such as Grid and Flexbox, create fallbacks for older browsers, and make use of any new techniques that might come along in the future.</p>
+<p>Vous disposez désormais des connaissances nécessaires pour utiliser en toute confiance des techniques telles que les grilles CSS et Flexbox, créer des solutions de substitution pour les navigateurs plus anciens et utiliser toutes les nouvelles techniques qui pourraient apparaître à l'avenir.</p>
 
-<h2 id="See_Also">See Also</h2>
+<h2 id="See_Also">Voir aussi</h2>
 
 <ul>
- <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Using Feature Queries in CSS</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Backwards Compatibility of Flexbox</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
- <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">Using CSS Grid: Supporting Browsers Without Grid</a></li>
- <li><a href="https://24ways.org/2012/css3-grid-layout/">A tutorial which uses the IE10 and 11 version of Grid</a></li>
- <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">Should I try to use the IE10 implementation of Grid Layout</a>?</li>
- <li><a href="https://24ways.org/2017/cascading-web-design/">Cascading Web Design with Feature Queries</a></li>
- <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">Using Feature Queries (Video)</a></li>
+  <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Utilisation des requêtes de fonctionnalités en CSS</a> <small>(en)</small></li>
+  <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Mises en page avancées avec les boîtes flexibles</a></li>
+  <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Les grilles CSS et l'amélioration progressive</a></li>
+  <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">Utilisation de la grille CSS : Prise en charge des navigateurs sans Grid</a> <small>(en)</small></li>
+  <li><a href="https://24ways.org/2012/css3-grid-layout/">Un tutoriel qui utilise la version IE10 et 11 de Grid</a> <small>(en)</small></li>
+  <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">Dois-je essayer d'utiliser la mise en œuvre de la grille dans IE10 ?</a> <small>(en)</small></li>
+  <li><a href="https://24ways.org/2017/cascading-web-design/">Conception Web en cascade avec les requêtes de fonctionnalités</a> <small>(en)</small></li>
+  <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">Utilisation des requêtes de fonctionnalités (vidéo)</a> <small>(en)</small></li>
 </ul>
 
 <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p>
 
-<h2 id="In_this_module">In this module</h2>
+<h2 id="In_this_module">Dans ce module</h2>
 
 <ul>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li>
+  <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction à la mise en page en CSS</a></li>
+  <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Cours normal</a></li>
+  <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+  <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+  <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Les boîtes flottantes</a></li>
+  <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Le positionnement</a></li>
+  <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disposition sur plusieurs colonnes</a></li>
+  <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
+  <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Guide du débutant des Media Queries</a></li>
+  <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mises en page traditionnelles</a></li>
+  <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Prise en charge des anciens navigateurs</a></li>
+  <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Compréhension fondamentale de la mise en page</a></li>
 </ul>