Différences

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

--- issue125:c_c [2017/10/09 16:16] – auntiee
+++ issue125:c_c [2017/10/11 11:12] (Version actuelle) – auntiee
@@ Ligne 113: / 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 123: / 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 (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.
+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 un 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 135: / Ligne 135: @@
 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, ne vous forcez pas à passer un temps monstrueux sur des fonctionnalités qu'aucun des deux navigateurs ne prend en compte complètement. Ceci dit, Microsoft Edge supporte les grilles CSS - bien qu'il y ait quelques restrictions.
+Ç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.
-Cependant, si vous décidez 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 peut être vu sur un navigateur moderne. Seulement quand vous êtes content avec l'approche nouvelle et rapide, vous pourriez consacrer du temps dans le terrain vague des piratages de navigateur et des idiosyncrasies.
+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.