Une question de plus en plus courante – maintenant que les gens utilisent CSS Grid Layout en production – semble être "Quelles sont les meilleures pratiques?" La réponse courte à cette question est d'utiliser la méthode de mise en page définie dans la spécification. Les parties particulières de la spécification que vous choisissez d'utiliser, et en fait la façon dont vous combinez Grid avec d'autres méthodes de mise en page telles que Flexbox, se limitent à ce qui fonctionne pour les motifs que vous essayez de construire et comment vous et votre équipe voulez travailler. ] Si on regarde de plus près, je pense que cette demande de «meilleures pratiques» indique peut-être un manque de confiance dans l'utilisation d'une méthode de mise en page qui est très différente de ce qui existait auparavant. Peut-être une préoccupation que nous utilisons Grid pour des choses pour lesquelles il n'a pas été conçu, ou ne pas utiliser Grid quand nous devrions être. Peut-être que cela revient à s'inquiéter de la prise en charge des anciens navigateurs, ou de la façon dont Grid s'intègre dans notre flux de travail de développement.
Dans cet article, je vais essayer de couvrir certaines choses qui pourraient être décrites comme meilleures pratiques.
Pour aider à informer cet article, je voulais savoir comment d'autres personnes utilisaient Grid Layout dans la production, quels étaient les défis auxquels ils faisaient face, qu'est-ce qu'ils ont vraiment apprécié il? Y a-t-il des questions, problèmes ou méthodes courants? Pour le savoir, j'ai préparé un sondage rapide, en posant des questions sur la façon dont les gens utilisaient Grid Layout, et en particulier ce qu'ils aimaient le plus et ce qu'ils trouvaient difficile.
Dans l'article qui suit, je vais référencer et citant directement certaines de ces réponses. Je ferai également le lien avec beaucoup d'autres ressources, où vous pouvez en savoir plus sur les techniques décrites. Comme il s'est avéré, il y avait beaucoup plus d'un article intéressant des choses à déballer dans les réponses à l'enquête. J'aborderai quelques-unes des autres choses qui apparaîtront dans un prochain post.
Accessibilité
S'il y a une partie de la spécification de la Grille à prendre en compte lors de l'utilisation, c'est en utilisant tout ce qui pourrait causer réorganisation de contenu:
"Les auteurs doivent utiliser la commande et les propriétés de placement de grille uniquement pour réorganiser le contenu de manière visuelle et non logique. Les feuilles de style qui utilisent ces fonctions pour effectuer le réordonnancement logique sont non conformes. "
– Spécification de la grille: réorganisation et accessibilité
Ceci n'est pas unique à la grille, cependant, la possibilité de réorganiser le contenu si facilement en deux dimensions, c'est un plus gros problème pour Grid. Cependant, si vous utilisez une méthode qui permet le réapprovisionnement de contenu – que ce soit Grid, Flexbox ou même le positionnement absolu – vous devez prendre soin de ne pas déconnecter l'expérience visuelle de la façon dont le contenu est structuré dans le document. Les lecteurs d'écran (et les personnes qui naviguent autour du document à l'aide d'un clavier seulement) suivront l'ordre des éléments dans la source.
Les endroits où vous devez faire particulièrement attention sont flex-direction ] pour inverser la commande dans Flexbox; la propriété order dans Flexbox ou Grid; tout placement d'éléments Grid utilisant n'importe quelle méthode, s'il déplace des éléments hors de l'ordre logique dans le document; et utiliser le mode d'empaquetage dense de grid-auto-flow .
Pour plus d'informations sur ce problème, consultez les ressources suivantes:
Quelles méthodes de disposition de grille dois-je utiliser?
le choix de Grid était un défi de s'en tenir à une manière cohérente de l'écrire (par exemple nommer des lignes de grille ou non, définir des zones de gabarit, des replis, des requêtes média) afin que l'ensemble de l'équipe puisse le maintenir. "
– Michelle Barker travaillant sur wbsl.com
Lorsque vous jetez un coup d'oeil à Grid, il peut sembler accablant avec tant de façons différentes de créer une mise en page. En fin de compte, cependant, tout se résume à ce que les choses soient positionnées d'une ligne à l'autre. Vous avez des choix basés sur la mise en page que vous essayez d'atteindre, ainsi que sur ce qui fonctionne bien pour votre équipe et le site que vous construisez.
Il n'y a pas de bonne ou de mauvaise façon. Ci-dessous, je vais reprendre quelques-uns des thèmes communs de la confusion. J'ai également déjà couvert beaucoup d'autres zones potentielles de confusion dans un article précédent " Grid Gotchas et Stumbling Blocks ."
Dois-je utiliser une grille implicite ou explicite?
La grille que vous définissez avec grid-template-columns et grid-template-rows est connu sous le nom de grille explicite. La grille explicite permet de nommer les lignes sur la grille et vous donne également la possibilité de cibler la ligne de fin de la grille avec -1 . Vous choisirez une grille explicite pour faire l'une ou l'autre de ces choses et, en général, lorsque vous avez une mise en page conçue et savez exactement où vos lignes de quadrillage devraient aller et la taille des pistes.
J'utilise la grille implicite le plus souvent pistes de rangée. Je veux définir les colonnes, mais les lignes seront automatiquement dimensionnées et développeront pour contenir le contenu. Vous pouvez contrôler la grille implicite dans une certaine mesure avec grid-auto-columns et grid-auto-rows mais vous avez moins de contrôle que si vous définissiez tout.
Vous devez décider si vous connaissez exactement le contenu que vous avez et, par conséquent, le nombre de lignes et de colonnes – auquel cas vous pouvez créer une grille explicite. Si vous ne savez pas combien de contenu vous avez, mais que vous voulez simplement que des lignes ou des colonnes soient créées pour contenir tout ce qui existe, vous utiliserez la Grille implicite.
Néanmoins, il est possible de combiner les deux. Dans le CSS ci-dessous, j'ai défini trois colonnes dans la grille explicite et trois lignes, donc les trois premières lignes de contenu seront les suivantes:
- Une piste d'au moins 200px de hauteur, mais en expansion pour prendre plus de contenu, 19659022] Une piste fixée à 400px de hauteur,
- Une piste d'au moins 300px de hauteur (mais se développe).
Tout autre contenu ira dans une ligne créée dans la grille implicite, et j'utilise le ] grid-auto-rows propriété pour rendre ces traces au moins 300px, développant auto .
.grid {
affichage: grille;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: minmax (200px automatique) 400px minmax (300px, auto);
grid-auto-rows: minmax (300px, auto);
intervalle de grille: 20px;
} Une grille flexible avec un nombre flexible de colonnes
En utilisant Répétition, autofill et minmax, vous pouvez créer un motif de autant de pistes que possible dans un conteneur, ce qui élimine le besoin de requêtes multimédias ampleur. Cette technique peut être trouvée dans ce tutoriel vidéo et également démontré avec des idées similaires dans mon article récent " Utilisation des requêtes médiatiques pour un design réactif en 2018 ."
Choisir cette technique lorsque vous êtes satisfait du fait que le contenu tombe en dessous du contenu précédent lorsqu'il y a moins d'espace, et que vous êtes prêt à accorder une grande flexibilité au dimensionnement. Vous avez spécifiquement demandé que vos colonnes soient affichées avec une taille minimale, et à remplissage automatique .
Il y avait quelques commentaires dans le sondage qui me demandaient si les gens choisissaient cette méthode quand ils voulaient vraiment une grille avec un nombre fixe de colonnes. Si vous vous retrouvez avec un nombre imprévisible de colonnes à certains points d'arrêt, il peut être préférable de définir le nombre de colonnes – et de le redéfinir avec les requêtes média – plutôt que d'utiliser remplissage automatique ou
Quelle méthode de calibrage dois-je utiliser?
J'ai décrit la taille de la piste en détail dans mon article " Quelle est la taille de cette boîte? Comprendre le dimensionnement dans la disposition de la grille "Cependant, je me pose souvent des questions quant à la méthode de dimensionnement de la piste à utiliser. En particulier, on m'interroge sur la différence entre le pourcentage de taille et l'unité fr . Si vous utilisez simplement l'unité fr comme spécifié, cela diffère de l'utilisation d'un pourcentage car distribue l'espace disponible. Si vous placez un objet plus grand dans une piste, la façon dont le fr va fonctionner jusqu'à présent est de permettre à cette piste de prendre plus d'espace et de distribuer ce qui reste.
.grid {
affichage: grille;
grid-template-columns: 1fr 1fr 1fr;
intervalle de grille: 20px;
}
Pour que l'unité fr distribue tous de l'espace dans le conteneur de grille, vous devez lui donner une taille minimale de 0 en utilisant minmax () .
.grid {
affichage: grille;
grid-template-columns: minmax (0,1fr) minmax (0,1fr) minmax (0,1fr);
intervalle de grille: 20px;
} 
Vous pouvez donc choisir d'utiliser fr dans l'un de ces scénarios: ceux où vous voulez une distribution d'espace à partir d'une base automatique (comportement par défaut) et ceux où vous voulez une distribution égale. J'utilise généralement l'unité fr pour déterminer le dimensionnement et permettre l'utilisation de pistes ou d'intervalles de largeur fixe. La seule fois où j'utilise un pourcentage, c'est quand j'ajoute des composants de la grille à une mise en page existante qui utilise également d'autres méthodes de mise en page. Si je veux que mes composants de grille s'alignent avec une disposition flottante ou flexible qui utilise des pourcentages, les utiliser dans ma disposition de grille signifie que tout utilise la même méthode de dimensionnement.
Placer automatiquement les éléments ou définir leur position? 19659017] Vous constaterez souvent que vous n'avez besoin de placer qu'un ou deux éléments dans votre mise en page, et le reste se place en fonction de l'ordre du contenu. En fait, c'est un très bon test que vous n'avez pas déconnecté la source et l'affichage visuel. Si les choses chutent en fonction du placement automatique, elles sont probablement dans un bon ordre.
Une fois que j'ai décidé où tout irait, j'ai tendance à attribuer une position à tout. Cela signifie que je ne finis pas avec des choses étranges qui se produisent si quelqu'un ajoute quelque chose au document et que la grille le place automatiquement de façon inattendue, rejetant ainsi la mise en page. Si tout est placé, Grid placera cet élément dans la prochaine cellule de grille vide disponible. Ce n'est peut-être pas exactement ce que vous voulez, mais s'assoir à la fin de votre mise en page est probablement mieux que d'entrer au milieu et de pousser d'autres choses.
Quelle méthode de positionnement utiliser?
Lorsque vous travaillez avec la disposition de la grille, en fin de compte tout se résume à placer des éléments d'une ligne à l'autre. Tout le reste est essentiellement un assistant pour cela.
Décidez avec votre équipe si vous voulez nommer des lignes, utilisez des zones de modèles de grille, ou si vous allez utiliser une combinaison de différents types de mise en page. Je trouve que j'aime utiliser les zones de modèles de grille pour les petits composants en particulier. Cependant, il n'y a pas de bien ou de mal.
Grille en combinaison avec d'autres mécanismes de mise en page
Rappelez-vous que la mise en page de la grille n'est pas la seule vraie méthode de mise en page pour les gouverner tous, elle est conçue pour un certain type de mise en page. disposition dimensionnelle. D'autres méthodes de mise en page existent toujours et vous devriez considérer chaque motif et ce qui lui convient le mieux.
Je pense que c'est assez difficile pour ceux d'entre nous qui ont l'habitude de bidouiller avec des méthodes de mise en page. C'est un bon moment pour prendre du recul, regarder les méthodes de mise en page pour les tâches pour lesquelles ils ont été conçus, et n'oubliez pas de les utiliser pour ces tâches.
En particulier, peu importe combien de fois j'écris sur Grid versus Flexbox , On me demandera quel peuple devrait utiliser. Il existe de nombreux modèles où la méthode de mise en page est parfaitement logique et c'est vraiment à vous de décider. Personne ne vous criera d'avoir choisi Flexbox over Grid, ou Grid over Flexbox.
Dans mon propre travail, j'ai tendance à utiliser Flexbox pour les composants où je veux que la taille naturelle des objets contrôle fortement leur disposition, essentiellement pousser les autres articles autour. J'utilise aussi souvent Flexbox parce que je veux un alignement, étant donné que les propriétés d'alignement de boîte ne peuvent être utilisées que dans Flexbox et Grid. Je pourrais avoir un conteneur Flex avec un élément enfant, afin que je puisse aligner cet enfant.
Un signe que Flexbox n'est peut-être pas la méthode de mise en page que je devrais choisir est quand je commence à ajouter des largeurs en pourcentage flex-grow à 0. La raison d'ajouter des largeurs de pourcentage aux éléments flex est souvent parce que j'essaie de les aligner en deux dimensions (doubler les choses en deux dimensions est exactement ce que Grid est pour). Cependant, essayez les deux, et voyez ce qui semble convenir le mieux au contenu ou au motif de conception.
Imbrication d'éléments de grille et de flexion
Cela pose aussi beaucoup de problèmes, et il n'y a absolument aucun problème à faire d'un élément de grille un conteneur de grille, nichant ainsi une grille dans un autre. Vous pouvez faire la même chose avec Flexbox, en créant un élément Flex et un conteneur Flex. Vous pouvez également créer un élément de grille et un conteneur Flex ou un élément Flex un conteneur de grille - aucun de ces problèmes n'est un problème!
Ce que nous ne pouvons pas faire est d'imbriquer une grille dans une autre et d'utiliser la grille les pistes définies sur le parent global. Cela serait très utile et c'est ce que les propositions de sous-grille du niveau 2 de la spécification de la grille espèrent résoudre. Une grille imbriquée devient actuellement une nouvelle grille, vous devrez donc faire attention au dimensionnement pour vous assurer qu'elle s'aligne avec les pistes parents.
Vous pouvez avoir plusieurs grilles sur une seule page
Un commentaire est apparu quelques fois dans le sondage ce qui m'a surpris, il semble y avoir une idée qu'une grille devrait être confinée à la disposition principale, et que beaucoup de grilles sur une page n'étaient peut-être pas une bonne chose. Vous pouvez avoir autant de grilles que vous le souhaitez! Utilisez la grille pour les grandes choses et les petites choses, si cela a du sens comme une grille, puis utilisez Grid
Fallbacks and Supporting Older Browsers
" La grille utilisée avec @supports nous a permis de mieux contrôler le nombre de variations de mise en page auxquelles nous pouvons nous attendre. Il a également très bien fonctionné avec notre approche d'amélioration progressive, ce qui signifie que nous pouvons récompenser ceux qui utilisent des navigateurs modernes sans empêcher l'accès au contenu pour ceux qui n'utilisent pas les dernières technologies. »
Dans l'enquête, beaucoup de gens ont mentionné des navigateurs plus anciens, cependant, il y avait une répartition raisonnablement égale entre ceux qui pensaient que soutenir les navigateurs plus anciens était difficile et ceux qui pensaient que c'était facile. remplace les autres méthodes de disposition. J'ai écrit longuement sur les mécanismes de création de ces solutions de secours dans " Utilisation de CSS Grid: Soutenir les navigateurs sans grille ."
En général, les navigateurs modernes sont beaucoup plus interopérables que leurs homologues précédents. Nous avons tendance à voir beaucoup moins de «bugs de navigateur» réels et si vous utilisez correctement HTML et CSS, vous trouverez généralement que ce que vous voyez dans un navigateur est le même que dans un autre.
Nous avons, bien sûr, des situations dans lequel un navigateur n'a pas encore livré le support pour une certaine spécification, ou certaines parties d'une spécification. Avec Grid, nous avons été très chanceux car les navigateurs ont livré Grid Layout de manière très complète et interopérable en peu de temps. Par conséquent, nos considérations pour les tests ont tendance à être de tester les navigateurs avec Grid et sans Grid. Vous avez peut-être également choisi d'utiliser la version préfixée -ms dans IE10 et IE11, ce qui nécessitera un test comme troisième type de navigateur.
Navigateurs supportant la mise en page de grille moderne (pas la version IE) supporte également les requêtes de fonctionnalités. Cela signifie que vous pouvez tester la prise en charge de Grid avant de l'utiliser.
Tester les navigateurs qui ne supportent pas la grille
Lors de l'utilisation des sauvegardes pour les navigateurs sans support pour Grid Layout (ou avec le -ms préfixé version pour IE10 et 11), vous voudrez tester comment ces navigateurs rendent la disposition de la grille. Pour ce faire, vous avez besoin d'un moyen d'afficher votre site dans un exemple de navigateur.
Je ne ferais pas l'erreur de casser votre requête en vérifiant la présence de quelque chose d'absurde ou de faute d'orthographe de la grille . Cette approche ne fonctionnera que si votre feuille de style est incroyablement simple, et vous avez tout à faire avec votre disposition de grille dans les requêtes de fonctionnalités. C'est une façon de travailler très fragile et qui prend beaucoup de temps, surtout si vous utilisez beaucoup Grid. De plus, un navigateur plus ancien ne manquera pas de support pour Grid Layout, il y aura aussi d'autres propriétés CSS non supportées. Si vous êtes à la recherche d'une «meilleure pratique», alors vous mettre en place pour être en mesure de tester votre travail est très haut là-bas!
Il existe quelques façons simples de vous mettre en place avec une méthode appropriée pour tester votre retards. La méthode la plus simple - si vous avez une connexion Internet raisonnablement rapide et ne vous dérange pas de payer des frais d'abonnement - est d'utiliser un service tel que BrowserStack. C'est un service qui permet de visualiser des sites Web (même ceux en développement sur votre ordinateur) sur une multitude de navigateurs réels. BrowserStack offre comptes gratuits pour les projets open-source .
Pour tester localement, ma suggestion serait d'utiliser une machine virtuelle avec votre navigateur cible installé. Microsoft propose gratuitement téléchargements de machines virtuelles avec des versions de IE à IE8, et aussi Edge. Vous pouvez également installer sur la machine virtuelle une ancienne version d'un navigateur sans support de grille. Par exemple en obtenant une copie de Firefox 51 ou ci-dessous . Après avoir installé votre vieux Firefox, assurez-vous de désactiver les mises à jour automatiques comme expliqué ici sinon il se met tranquillement à jour!
Vous pouvez ensuite tester votre site dans IE11 et Firefox non supporté sur une VM (une solution beaucoup moins fragile que les valeurs d'orthographe). La mise en place peut vous prendre une heure environ, mais vous serez alors dans un très bon endroit pour tester vos solutions de repli.
Unlearning Old Habits
"C'était la première fois que j'utilisais Grid Layout. beaucoup de concepts à apprendre et de propriétés à comprendre. Conceptuellement, j'ai trouvé la chose la plus difficile à désapprendre tout ce que j'avais fait pendant des années, comme nettoyer les flotteurs et tout emballer dans des conteneurs. "
- Hidde travaillant sur hiddedevries.nl/ fr
Beaucoup de personnes ayant répondu à l'enquête ont mentionné le besoin de désapprendre les vieilles habitudes et comment l'apprentissage de la mise en page serait plus facile pour les personnes complètement novices en matière de CSS. J'ai tendance à être d'accord. Lors de l'enseignement en personne, les débutants complets ont peu de difficulté à utiliser la grille, tandis que les développeurs expérimentés s'efforcent de rétablir la grille dans une méthode de mise en page unidimensionnelle. J'ai vu des tentatives de "systèmes de grille" en utilisant CSS Grid qui rajoutent dans les wrappers de lignes nécessaires pour une grille flottante ou flexible
N'ayez pas peur d'essayer de nouvelles techniques . Si vous avez la possibilité de tester dans quelques navigateurs et de rester conscient des problèmes potentiels d'accessibilité, vous ne pouvez vraiment pas aller trop loin. Et, si vous trouvez un bon moyen de créer un certain modèle, que tout le monde le sache. Nous sommes tous nouveaux dans l'utilisation de Grid en production, donc il y a certainement beaucoup à découvrir et à partager.
"Grid Layout est le développement CSS le plus excitant depuis les requêtes des médias. Il a été tellement bien pensé pour les besoins des développeurs du monde réel et est un plaisir absolu à utiliser dans la production - pour les concepteurs et les développeurs. "
- Trys Mudford travaillant sur trysmudford.com [19659009] Pour conclure, voici une liste très courte des meilleures pratiques actuelles! Si vous avez découvert des choses qui fonctionnent ou ne fonctionnent pas bien dans votre propre situation, ajoutez-les aux commentaires.
- Soyez très conscient de la possibilité de réorganiser le contenu. Vérifiez que vous n'avez pas déconnecté l'affichage visuel de l'ordre du document.
- Testez en utilisant des navigateurs cibles réels avec une machine virtuelle locale ou distante.
- N'oubliez pas que les anciennes méthodes de mise en page sont toujours valides et utiles. Essayez différentes façons d'obtenir des motifs. Ne vous méprenez pas sur l'utilisation de Grid.
- Sachez qu'en tant que développeur frontal expérimenté, vous aurez probablement toute une série d'idées préconçues sur le fonctionnement de la mise en page. Essayez de regarder de nouveau ces nouvelles méthodes plutôt que de les réintégrer dans d'anciens modèles.
- Continuez à essayer. Nous sommes tous nouveaux à cela. Testez votre travail et partagez ce que vous découvrirez.
(il)
Source link