Différences

Ci-dessous, les différences entre deux révisions de la page.

--- issue125:c_c [2017/10/09 08:16] – d52fr
+++ issue125:c_c [2017/10/11 11:12] (Version actuelle) – auntiee
@@ Ligne 1: / Ligne 1: @@
 **The last few months of my life have been dedicated to a large project for university. In the course of this project, I was designing a website to go along with a database (the main focus). Therefore, I decided to stick to only the newest CSS technologies, in order to speed up development. During this time, I learned a few neat tricks and uses for CSS grids, that I felt I should share with my readers.**
-Ces derniers mois d'existence ont été dédiés à un grand projet universitaire. Au cours de ce projet, j'ai conçu un site Web pour accompagner une base de données (le sujet central). Par conséquent, j'ai décidé de coller uniquement aux technologies CSS les plus récentes, de façon à accélérer le développement. Pendant ce temps, j'ai appris quelques astuces et utilisations sympas des grilles CSS, qu'il me semblait bon de partager avec mes lecteurs.
+Ces derniers mois ont été dédiés à un grand projet universitaire. Au cours de ce projet, j'ai conçu un site Web pour accompagner une base de données (le sujet central). Par conséquent, j'ai décidé de me tenir uniquement aux technologies CSS les plus récentes, de façon à accélérer le développement. Pendant ce temps, j'ai appris quelques astuces et utilisations sympas des grilles CSS (CSS Grids), qu'il me semblait bon de partager avec mes lecteurs.
 **Code
@@ Ligne 19: / Ligne 19: @@
 Le plan
-Comme la plupart des lecteurs l'ont probablement lu dans mon article du FCM n° 123, les grilles CSS sont un nouvel outil d'implantation qui vous permet de définir des colonnes et des lignes, et, ensuite, soit de placer directement les descendants directs dans cette grille, soit de définir la taille et l'emplacement des éléments à la main.
+Comme la plupart des lecteurs l'ont probablement lu dans mon article du FCM n° 123, les grilles CSS sont un nouvel outil d'implantation qui vous permet de définir des colonnes et des lignes, et, ensuite, soit de placer automatiquement les descendants directs dans cette grille, soit de définir la taille et l'emplacement des éléments à la main.
-Pour ceux qui  n'auraient pas expérimenté les approches anciennes des implantations avec CSS, ce n'était pas le cas. À l'origine, c'était réalisé avec des éléments flottants, à droite et à gauche (qui incluaient quelques faiblesses et avertissements) , et, plus récemment, c'était fait avec Flexbox. Quoique les grilles CSS ne remplacent pas Flexbox, elles sont mieux adaptées à une disposition générale. La raison de ceci est que Flexbox n'agit que dans une direction - horizontalement ou verticalement. Imaginez que vous avez trois éléments, et que vous voulez un découpage avec un élément à gauche et deux éléments l'un sur l'autre dans la moitié droite. Avec Flexbox, vous devriez définir un conteneur pour les directions horizontale et verticale. Avec les grilles CSS, vous définissez simplement l'élément de gauche comme prenant deux rangées.
+Pour ceux qui n'auraient pas expérimenté les approches anciennes des implantations avec CSS, ce n'était pas le cas. À l'origine, c'était réalisé avec des éléments flottants, à droite et à gauche (ce qui impliquait quelques faiblesses et avertissements) et, plus récemment, c'était fait avec Flexbox. Quoique les grilles CSS ne remplacent pas Flexbox, elles sont mieux adaptées à une disposition générale, parce que Flexbox n'agit que dans une direction - horizontalement ou verticalement. Imaginez que vous ayez trois éléments, et que vous vouliez un découpage avec un élément à gauche et deux éléments l'un sur l'autre dans la moitié droite. Avec Flexbox, vous devriez définir un conteneur pour les directions horizontale et verticale. Avec les grilles CSS, vous définissez simplement l'élément de gauche sur deux rangées.
 **So far, so good. The problem I originally ran into was that I was applying the ideas of CSS Grids to my ‘usual’ approach - I was redefining everything as I needed to change it for media queries. This means my mobile-first approach (no media query) would define a CSS Grid completely, and later media queries (for larger screens) would completely redefine it. I was then also reassigning elements repeatedly to make sure they appeared in the right locations on the grid.
@@ Ligne 27: / Ligne 27: @@
 I then read an article on CSS Custom Properties (see Further Reading #1). After reading it, I was rethinking how you could use CSS Custom Properties and media queries to effectively stop repeating yourself. I immediately thought to myself “I can use this with CSS Grids!”. And so some experimenting began - focusing mainly on CSS Grids’ area definitions, and proceeded to the point where I was using only media queries to rewrite CSS Custom Properties, and to relabel my CSS Grid’s areas.**
-Jusqu'ici, tout va bien. Le problème que j'ai rencontré au début était que j'appliquais les idées des grilles CSS avec mon approche « habituelle » - Je redéfinissais tout car j'avais besoin de les changer pour les « media queries » (adaptation aux différentes tailles d'écran). Cela signifie que mon approche d'abord pour les mobiles (pas de media queries) nécessitait la définition complète des grilles CSS, et par la suite, les media queries (pour les grand écrans) l'aurait complètement redéfini. Ensuite, je réassignais les éléments de façon répétitive pour m'assurer qu'ils apparaissaient aux bons emplacements dans la grille.
+Jusqu'ici, tout va bien. Le problème que j'ai rencontré au début était que j'appliquais les idées des grilles CSS avec mon approche « habituelle ». Je redéfinissais tout, j'avais besoin de tout changer pour les « media queries » (adaptation aux différentes tailles d'écran). Cela signifie que mon approche qui prenait les mobiles d'abord (pas de media queries) définirait complètement une grille CSS et, par la suite, les media queries (pour les plus grands écrans) l'aurait complètement redéfinie. Ensuite, je réassignais les éléments de façon répétitive pour m'assurer qu'ils apparaissaient aux bons emplacements dans la grille.
-Ensuite, j'ai lu un article sur les propriétés personnalisées de CSS (CCS Custom Properties - voir la première ligne de « Pour aller plus loin »). Après l'avoir lu, j'ai repensé à comment vous pourriez utiliser les propriétés personnalisées de CSS et les media queries pour effectivement arrêter de vous répéter. J'ai immédiatement pensé en moi-même « Je peux utiliser ceci avec les grilles CSS ! » Et ainsi, j'ai commencé quelques expérimentations - centrées principalement sur les définitions de zones des grilles CSS -, et j'ai poursuivi jusqu'à un point où je n'utilisais plus que les media queries pour ré-écrire les propriétés personnalisées de CSS et renommer mes zones de la grille CSS.
+Après cela, j'ai lu un article sur les propriétés personnalisées de CSS (CCS Custom Properties - voir la première ligne de « Pour aller plus loin »). Après l'avoir lu, j'ai repensé à comment vous pourriez utiliser les propriétés personnalisées de CSS et les media queries pour arrêter de vous répéter. J'ai immédiatement pensé en moi-même « Je peux utiliser ceci avec les grilles CSS ! » Aussi, j'ai commencé quelques expérimentations - centrées principalement sur les définitions de zones des grilles CSS -, et j'ai poursuivi jusqu'à un point où je n'utilisais plus que les media queries pour ré-écrire les propriétés personnalisées de CSS et renommer les zones de ma grille CSS.
 **The Explanation
@@ Ligne 37: / Ligne 37: @@
 L'explication
-Le plan ci-dessus pourrait vous avoir laissé perplexe sur sa signification. C'est le rôle de cette partie ! Arrivés ici, je vous demande, s'il vous plaît, d'ouvrir le lien vers Codepen ci-dessus et de le suivre pendant que j'explique.
+Le plan ci-dessus pourrait vous avoir laissé perplexe sur ce que je voulais dire. C'est le rôle de cette partie ! Arrivés ici, je vous demande, s'il vous plaît, d'ouvrir le lien vers Codepen ci-dessus et de le suivre pendant que je l'explique.
 **CSS Custom Properties
@@ Ligne 51: / Ligne 51: @@
 Les propriétés personnalisées de CSS
-Je les définis tout en haut du fichier CSS, en utilisant le sélecteur /root (qu sélectionne l'étiquette HTML, dans ce cas). Vous pouvez, naturellement, le faire autrement. Cependant, la plupart des articles et des exemples que j'ai vu font comme ça, pour assurer que tous les enfants héritent correctement des variables.
+Je les définis tout en haut du fichier CSS, en utilisant le sélecteur :root (qui sélectionne l'étiquette HTML, dans ce cas). Vous pouvez, naturellement, le faire autrement. Cependant, la plupart des articles et des exemples que j'ai vus font comme ça, pour assurer que tous les enfants héritent correctement des variables.
-Je n'ai aussi défini que 3 propriétés personnalisées - var-column qui configure les colonnes de base de notre grille, var-row qui fait de même pour les lignes de la grille et var-aside. La variable var-aside n'est là que parce que j'ai une disposition où la barre latérale est complètement cachée. On eut faire cette étape sans les propriétés personnalisées, mais je voulais rester sur le thème.
+Je n'ai aussi défini que 3 propriétés personnalisées - var-columns qui configure les colonnes de base de notre grille, var-rows qui fait de même pour les lignes de la grille et var-aside. La variable var-aside n'est là que parce que j'ai une disposition où la barre latérale est complètement cachée. On peut faire cette étape sans les propriétés personnalisées, mais je voulais rester dans le thème.
-Aussi, au final, nous terminons avec les valeurs des variables suivantes : var-columns=1fr 1fr 1fr 1fr, var-rows=6rem 1fr 6rem, var-aside=block.
+Ainsi, au final, nous terminons avec les valeurs des variables suivantes : var-columns=1fr 1fr 1fr 1fr, var-rows=6rem 1fr 6rem, var-aside=block.
-Ça signifie que nous finissons avec une grille qui a quatre colonnes de dimensions identiques et 3 lignes (avec une ligne d'entête/pied de page de hauteur fixe et la rangée principale grandissant pour remplir l'espace).
+Cela signifie que nous finissons avec une grille qui a quatre colonnes de dimensions identiques et 3 lignes (avec une ligne d'entête/pied de page de hauteur fixe et la rangée de contenu principal qui grandit pour remplir l'espace).
 **Defining Our Areas
@@ Ligne 67: / Ligne 67: @@
 Définir nos zones
-Dans le sélecteur suivant, (ligne 7), je définis ensuite le corps de notre site Web. Je règle la hauteur et la largeur à 100vh et 100vw respectivement pour m'assurer que le corps remplit l'espace disponible (je fais cela dans la plupart des sites Web, mais je le fais spécialement ici car je n'ai aucun contenu dans la page). J'ai supprimé toute marge pour le corps, car cela génère des barres de défilement quand le corps est à la pleine échelle de la fenêtre.
+Dans le sélecteur suivant, (ligne 7), je définis le corps de notre site Web. Je règle la hauteur et la largeur à 100vh et 100vw respectivement pour m'assurer que le corps remplit l'espace disponible (je fais cela dans la plupart des sites Web, mais je le fais expressément ici, car je n'ai aucun contenu dans la page). J'ai supprimé toute marge pour le corps, car cela génère des barres de défilement quand le corps est à la pleine échelle de la fenêtre.
-Les quelques lignes suivantes sont les plus importantes. Je définis display: grid; pour initialiser le processus. Ensuite, je charge les variables des lignes et des colonnes pour initialiser la grille. Le point-clé est la déclaration suivante, où je définis les différentes zones aux quelles j'assigne les éléments. Considérez ça comme une grossière technique de disposition en ASCII. Par défaut, le corps devrait contenir une rangée dédiée à l'entête, une barre latérale occupant la colonne de gauche, une section principale sur les trois autres colonnes de cette ligne et une autre ligne entièrement dévolue au pied de page.
+Les quelques lignes suivantes sont les plus importantes. Je définis display: grid; pour initialiser le processus. Ensuite, je charge les variables des lignes et des colonnes pour initialiser la grille. Le point-clé est la déclaration suivante, où je définis les différentes zones auxquelles j'assigne les éléments. Considérez ça comme une grossière technique de disposition en ASCII. Par défaut, le corps devrait contenir une rangée dédiée à l'entête, une barre latérale occupant la colonne de gauche, une section principale sur les trois autres colonnes de cette ligne et une autre ligne entièrement dévolue au pied de page.
 **Redefining Our Grid
@@ Ligne 81: / Ligne 81: @@
 Redéfinir nos grilles
-l'ensemble de lignes suivant (20-61) remplacent touts ce qui serait généralement des media queries.
+L'ensemble de lignes suivantes (20-61) remplacent tout ce qui serait généralement des media queries. La raison pour laquelle j'utilise les classes ici est que je voulais permettre aux utilisateurs de passer d'une disposition à l'autre sans ouvrir une console de développeur. À la place, J'utilise JavaScript pour ajouter des classes au corpus principal, émulant efficacement la fonctionnalité. Pour la clarté, je vous donnerai un exemple (voir en haut à droite) de ce à quoi la classe body.mobile peut ressembler comme media query.
-la raison pour laquelle j'utilise les classes ici est due au fait que je voulais permettre aux utilisateurs de passer d'une disposition à l'autre sans ouvrir une console de développeur. À la place, J'utilise Javascript pour ajouter des classes au corpus principal, émulant efficacement la fonctionnalité. Pour la clarté, je vous donnerai un exemple (voir en haut à droite) de ce à quoi  la classe body.mobile peut ressembler comme media query.
-Maintenant, pour être honnête, je plaide vraiment pour une première approche pour les mobiles dans les vrais projets. Pour le cas de cette démo, c'est plus compréhensible de commencer par le sy=tyle d'un ordinateur de bureau. Par conséquent, la section dans le media query max-width: 48em; serait les valeurs par défaut et vous utiliseriez une requête min-width pour le remplacer par ce que nous avons utilisé au début du fichier CSS.
+Maintenant, pour être honnête, je plaide vraiment pour une première approche pour les mobiles dans les vrais projets. Pour cette démo, c'était plus logique de commencer par le style d'un ordinateur de bureau. Par conséquent, la section dans le media query max-width: 48em; serait les valeurs par défaut et vous utiliseriez une requête min-width pour le remplacer par ce que nous avons utilisé au début du fichier CSS.
-Une fait très important à se remémorer est que votre ensemble grille-modèle-zones doit avoir le bon nombre de lignes et de colonnes. Même si vous assignez une ligne entière à 5 colonnes à une seule zone, vous devrez inclure le nom de zone de chaque colonne.
+Un fait très important à se remémorer est que votre ensemble grid-template-areas doit avoir le bon nombre de lignes et de colonnes. Même si vous assignez une ligne entière sur 5 colonnes à une seule zone, vous devrez inclure le nom de zone de chaque colonne.
 **Some readers may also be wondering why we’re redefining our variables in a body selector instead of :root. This is the strength of CSS Custom Properties - you can override them like any other CSS property. This means no more need to reset variables (except as needed for children elements). Since we’re only using the variables in body, it made sense to define them there and shorten our media query (by removing a selector).
@@ Ligne 92: / Ligne 91: @@
 This may become clearer by looking at the no-aside version of the body (lines 47-56). As you can see, the only change needed for the body was the redefining of our grid-template-area (no custom properties were overwritten). However, a second selector (body.no-aside aside) then changes the var-aside variable to none. Since the variable is used later in the CSS file, nothing else needs to be done here. By defining that variable to be none, the display: statement becomes “display: none;” and for other views, the variable is untouched. It also works in this case if you leave out the default declaration (var-aside: block;) as the statement will just silently fail with an invalid variable, and since the default display is “block”, the end result is the same. I wouldn’t recommend doing this, however, as it’s unclear in the long run.**
-Certains lecteurs peuvent se demander aussi pourquoi nous redéfinissons nos variables dans le sélecteur du corps plutôt que dans /root. C'est la force des propriétés personnalisées de CSS - vous pouvez les écraser comme toute autre propriété de CSS. Cela signifie qu'il n'y a plus besoin de remettre les variables à zéro (sauf au besoin pour les éléments enfants). Comme nous n'utilisons des variables que dans le corps, c'est compréhensible de les définir là et de raccourcir nos media queries (en supprimant le sélecteur).
+Certains lecteurs peuvent se demander aussi pourquoi nous redéfinissons nos variables dans le sélecteur du corps plutôt que dans :root. C'est la force des propriétés personnalisées de CSS - vous pouvez les écraser comme toute autre propriété de CSS. Cela signifie qu'il n'y a plus besoin de remettre les variables à zéro (sauf au besoin pour les éléments enfants). Comme nous n'utilisons des variables que dans le corps, c'est compréhensible de les définir là et de raccourcir nos media queries (en supprimant le sélecteur).
-Cela deviendra plus clair en regardant la version « no-aside » du corps (lignes 47-56). Comme vous pouvez le voir, le seul changement nécessaire dans le corps était de redéfinir notre grid-template-area (aucune propriété personnalisée n'est écrasée). Cependant, un second sélecteur (body.no-aside aside) met ensuite la variable var.aside à zéro. Comme la variable est utilisée par la suite dans le fichier CSS, rien d'autre n'a besoin d'être fait ici. En remettant la variable à zéro, la déclaration display: devient « display:none; » et pour les autres vues, la variable reste inchangée. Cela fonctionne aussi dans ce cas si vous omettez la déclaration par défaut (var-aside: block;) car la déclaration va être silencieusement en erreur avec une variable invalide, et, comme l'affichage par défaut est « block », le résultat final est le même. Cependant, je ne vous recommande pas de le faire, car ce n'est pas clair sur le long terme.
+Cela deviendra plus clair en regardant la version « no-aside » du corps (lignes 47-56). Comme vous pouvez le voir, le seul changement nécessaire dans le corps était de redéfinir notre grid-template-area (aucune propriété personnalisée n'est écrasée). Cependant, un second sélecteur (body.no-aside aside) met ensuite la variable var.aside à zéro. Comme la variable est utilisée par la suite dans le fichier CSS, il n'y a rien d'autre à faire ici. En remettant la variable à zéro, la déclaration display: devient « display:none; » et pour les autres vues, la variable reste inchangée. Cela fonctionne aussi dans ce cas si vous omettez la déclaration par défaut (var-aside: block;) car la déclaration échouera en silence avec une variable invalide et, comme l'affichage par défaut est « block », le résultat final est le même. Cependant, je ne vous recommande pas de le faire, car ce n'est pas clair sur le long terme.
 **The HTML
@@ Ligne 104: / Ligne 103: @@
 Le HTML
-Comme vous pouvez probablement le dire, le HTML utilisé ici est assez clair. Il n'y a que les quatre éléments principaux (entête, principal, latéral, pied de page). Je met l'étiquette aside avant main car elle va être à gauche par défaut, mais, avec les grilles CSS, l'ordre d'apparition des étiquettes n'a pas vraiment d'importance.
+Comme vous pouvez probablement le voir, le HTML utilisé ici est assez clair. Il n'y a que les quatre éléments principaux (header, main, aside et footer). Je mets l'étiquette aside avant main car elle va être à gauche par défaut, mais, avec les grilles CSS, l'ordre d'apparition des étiquettes n'a pas vraiment d'importance.
-Les définitions onclick dans l'étiquette nav sont aussi là pour permettre l'échange de classes avec JS. Ça signifie que vous pouvez enfin commencer à écrire un balisage HTML5 clair et sémantique !
+Les définitions onclick dans l'étiquette nav sont aussi là pour permettre l'échange de classes avec JS. Cela signifie que vous pouvez enfin commencer à écrire un balisage HTML5 clair et sémantique !
 **Can Children Inherit the Grid?
@@ Ligne 114: / Ligne 113: @@
 Les enfants peuvent-ils hériter de la grille ?
-Non. Les grilles CSS ne peuvent être appliquées qu'aux descendants directs de l'élément conteneur (donc, header, main, aside et footer dans notre exemple ci-dessus). Toute chose plus profonde que ça (nav, par exemple) ne peut pas être placée sur la grille. Ceci étant dit, vous pouvez, soit nicher une autre grille CSS, soit, comme ceci ne fonctionne que dans une direction, utiliser Flexbox.
+Non. Les grilles CSS ne peuvent être appliquées qu'aux descendants directs de l'élément conteneur (donc, header, main, aside et footer dans notre exemple ci-dessus). Toute chose plus profonde que ça (nav, par exemple) ne peut pas être placée sur la grille. Cela étant dit, vous pouvez, soit nicher une autre grille CSS, soit, comme ceci ne fonctionne que dans une direction, utiliser Flexbox.
 **Progressive Enhancement Approach?
@@ Ligne 124: / Ligne 123: @@
 Une approche d'amélioration progressive ?
-La réalité du monde de la conception Web est telle que tout le monde n'utilise pas les navigateurs Web les plus récents. Suivant le projet sur lequel vous travaillez, il peut vous être demandé de prendre en compte les anciens systèmes. Ici, ma suggestion est alors de définir vos styles normaux pour tenir compte des navigateurs qui ne supportent que les bases (suivant le support dont vous avez besoin, ce pourrait être des « floats »). Naturellement, en fonction de la complexité d'une rétroactivité, il pourrait être préférable de créer un fichier CSS séparé que les navigateurs récents pourraient ignorer (telle qu'un fichier qui est chargé dans un piratage de IE). Pour les navigateurs qui ne sont pas aussi difficiles que IE, vous pouvez dans le cas général vous passer d'utiliser @supports pour améliorer progressivement la fonctionnalité de votre site Web.
+La réalité du monde de la conception Web est telle que tout le monde n'utilise pas les navigateurs Web les plus récents. Selon le projet sur lequel vous travaillez, vous devez peut-être prendre en compte les anciens systèmes. Ici, ma suggestion est alors de définir vos styles normaux pour tenir compte des navigateurs qui ne supportent que les bases (selon le support dont vous avez besoin, ce pourrait être des « floats »). Naturellement, en fonction de la complexité d'une rétrocompatibilité, il pourrait être préférable de créer un fichier CSS séparé que les navigateurs récents pourraient ignorer (tel qu'un fichier qui est chargé dans un piratage de IE). Pour les navigateurs qui ne sont pas aussi difficiles que IE, vous pouvez, dans le cas général, vous passer d'utiliser @supports pour améliorer progressivement la fonctionnalité de votre site Web.
-Supposez, par exemple, que vous avez défini une mise en page basique « de repli », qui donne une rendu utilisable (mais différent) pour chaque navigateur qui ne supporte pas flexbox ou les grilles. Ensuite, en fin de fichier, vous voudrez définir un @supports(display: grid;) block (par exemple). Dans ce « block », vous définissez alors toutes les grilles CSS. Comme seuls les navigateurs qui prennent en compte @supports, et display: grids;, lanceront le block, vous pouvez être certains que la disposition sera utilisée là où elle est prise en compte. Soyez averti que ici que certaines versions récentes de IE et Edge supportent @supports et les grilles CSS, mais pas toutes leurs fonctionnalités. Par conséquent, vous pouvez avoir besoin de vérifier la prise en compte d'une propriété des grilles CCS différente, telle que @supports(grid-area: auto;). Naturellement, ne faites ça seulement si vous utilisez vraiment les réglages qui ne sont pas supportés par Microsoft Edge. De même, vous pouvez vérifier la prise en compte de Flexbox avant de l'utiliser dans vos CSS.
+Supposez, par exemple, que vous avez défini une mise en page basique « de repli », qui donne un rendu utilisable (mais différent) pour tout navigateur qui ne supporte pas flexbox ou les grilles. Alors, en fin de fichier, vous voudrez définir un @supports(display: grid;) block (par exemple). Dans ce « block », vous définissez alors toutes les grilles CSS. Comme seuls les navigateurs qui prennent en compte @supports, et display: grid;, lanceront le block, vous pouvez être certains que la disposition sera utilisée là où elle est prise en charge. Soyez averti ici que certaines versions récentes de IE et Edge supportent @supports et les grilles CSS, mais pas toutes leurs fonctionnalités. Par conséquent, vous pouvez avoir besoin de vérifier la prise en charge d'une propriété des grilles CCS différente, telle que @supports(grid-area: auto;). Naturellement, ne faites cela que si vous utilisez vraiment les réglages qui ne sont pas supportés par Microsoft Edge. De même, vous pouvez vérifier la prise en charge de Flexbox avant de l'utiliser dans vos CSS.
 **Should I Use It In Production?
@@ Ligne 132: / Ligne 131: @@
 That depends entirely on what you’re producing. If you’re simply worried that CSS Grids is too new to be used, keep in mind that websites such as the New York Times have already shipped production sites with Grids. If you’re asking because you mainly support IE and Microsoft Edge, then I would say use it as you can, but don’t force yourself to spend massive amounts of time on features both browsers don’t fully support. That being said, Microsoft Edge does support CSS Grids - though there are a few restrictions.
 However you decide to do it, if you want to use Grids, I recommend you start with the grid layout first. Why? Because it’s by far the most efficient and quick way to lay out a website. I use it for all my prototypes and mockups, because, in those cases, time is of the essence, and I can always pass it to my clients with the indicator that it must be viewed in a modern browser. Only once you’re happy with the new, fast approach, should you slog back into the wasteland that is browser hacks and idiosyncrasies.**
+L'utiliserais-je en production ?
+Ça dépend complètement de ce que vous produisez. Si vous êtes simplement inquiet de ce que les grilles CSS sont trop récentes pour être utilisées, gardez en tête que des sites Web comme le New York Times a déjà mis en production des sites avec Grids. Si vous le demandez parce que vous supportez principalement IE et Microsoft Edge, alors je pourrais dire de l'utiliser quand vous pouvez, mais de ne pas vous forcer à passer un temps monstrueux sur des fonctionnalités qu'aucun des deux navigateurs ne prend en compte complètement. Cela dit, Microsoft Edge supporte les grilles CSS - bien qu'il y ait quelques restrictions.
+Peu importe la façon de le faire, si vous voulez utiliser les grilles CSS, je vous recommande de commencer d'abord avec la disposition en grille. Pourquoi ? Parce que c'est de loin la façon la plus efficace et rapide pour mettre en place un site Web. Je l'utilise pour tous mes prototypes et maquettes, parce que, dans ces cas-là, tout est affaire de rapidité et je peux toujours le transmettre à mes clients avec l'indication qu'il doit être vu sur un navigateur moderne. Ce n'est que quand l'approche nouvelle et rapide vous conviendra que vous pourriez consacrer du temps dans le désert des piratages de navigateur et des idiosyncrasies.
 **I hope this article is interesting for at least a few of my readers. If you’re one of them, feel free to share examples of your CSS Grids projects or talks/presentations about them with me. If anyone has any comments, questions, or requests for future articles, feel free to email me at lswest34@gmail.com.
@@ Ligne 141: / Ligne 146: @@
 https://www.youtube.com/watch?v=7kVeCqQCxlk&index=19&list=PLQjv2GANsZ1JAKzoz631tlyIOZiJ3T2R6 - YouTube Video on CSS Grids (from WordCamp).**
+J'espère que cet article est intéressant, au moins pour quelques-uns de mes lecteurs. Si vous en êtes un, n'hésitez pas à partager des exemples de vos projets de grilles CSS ou des conférences/présentations à leur sujet. Si quelqu'un a des commentaires, des questions ou des demandes pour de futurs articles, n'hésitez pas à m'envoyer un mail à lswest34@gmail.com.
+Pour aller plus loin
+https://madebymike.com.au/writing/using-css-variables/ - article sur l'utilisation des propriétés personnalisées de CSS.
+https://www.youtube.com/watch?v=7kVeCqQCxlk&index=19&list=PLQjv2GANsZ1JAKzoz631tlyIOZiJ3T2R6 - Vidéo YouTube sur les grilles CSS (issue du WordCamp).