Dans les âges sombres, les typographes ont construit des sites sur des tables. Puis ils ont maîtrisé le flotteur et le flexbox, et l'obscurité s'est retirée. En 2017, les Lumières ont commencé avec l'avènement de CSS Grid Layout.
La grille prend en compte l'espace horizontal et vertical, avec elle, vous pouvez modifier la mise en page sans toucher à la mise en page, et tout cela sans requêtes de médias. Avec Grid, vous pouvez oublier les nombres magiques, les hacks, les solutions de contournement et les frameworks CSS.
Malgré toute sa puissance, il y a une petite nuance qui gâche l'image - elle est encore rarement utilisée par les concepteurs de mise en page. Il existe une spécification Grid, un support pour les navigateurs, mais peu de projets réels.
La transcription du rapport de
Sergey Popov sur
Frontend Conf : à propos de la spécification, pourquoi les concepteurs de mise en page ont peur de la grille et comment décider d'utiliser la grille dans leurs projets pour «rendre votre site Web à nouveau génial!».
À propos du président : Sergey
Popovsergey, directeur général de l'
externalisation du développement frontend A. League de HTML Academy, développeur front-end, organisateur de la communauté moscowcss, co-organisateur WSD et
pitercss_conf . Jusqu'à ce qu'il devienne un chef de file de l'entreprise, il s'est engagé dans la composition pendant de nombreuses années.
Au cours de la dernière année, de nombreux cours et rapports ont été publiés sur Grid, sur la façon de les utiliser et de les rédiger. Si vous en avez assez des rapports techniques, je vais en ajouter un de plus à votre liste.
Blague - parlons des bandes dessinées. Ou pas?Remarque : au lieu de la longue «disposition de grille CSS», il y aura simplement «grille».
Quoi de neuf avec la disposition de la grille CSS?
Techniquement, Grid est une simple grille bidimensionnelle.
Dessiner et utiliser une grille est assez simple, mais les développeurs la rejettent toujours. Je vois deux raisons à cela.
- Beaucoup ne comprennent tout simplement pas ce qui se passe avec la grille. Un grand nombre de mythes sur cet outil rendent sa compréhension difficile.
- En tant que compositeurs et fournisseurs frontaux, nous ne comprenons pas comment et où utiliser Grid dans les tâches quotidiennes.
Commençons l'analyse à partir du premier point.
Spécification
La première version de la spécification a été publiée en 2012, a beaucoup changé, correspondait et, cinq ans plus tard, elle a commencé à être introduite activement. En 2017, le même boom s'est produit lorsque, pendant six mois, la grille, à partir de l'état du premier projet publié, est arrivée à la conclusion que Chrome l'avait d'abord mis en œuvre sans indicateur, puis tous les autres navigateurs. Étant donné que la mise en œuvre a eu lieu à la hâte, la spécification n'a pas été réglée et certains problèmes controversés ont dû être laissés pour que les navigateurs n'aient pas à réécrire la moitié du moteur.
La spécification est stable, bien qu'elle soit toujours à l'état de recommandation de candidat. Si je le pouvais, je l'aurais déjà publié il y a longtemps, mais les développeurs de la spécification ne sont pas pressés, mais complètent et modifient le libellé.
Appliquons la spécification de disposition de grille non recommandée - ce n'est pas une contradiction, car la grille a d'abord été implémentée puis décrite.
La deuxième déclaration incorrecte est que la grille n'a pas de sens sans le deuxième niveau.
Spécifications de deuxième niveau
Quand ils ont écrit la spécification, elle s'est avérée trop grande, donc une partie a été allouée au deuxième niveau.
Pour 2018, la spécification de deuxième niveau dans l'état du premier projet de travail public est la première publication d'un projet de travail.
La spécification est activement travaillée et dans un avenir proche, elle passera à l'état de projet de travail - un projet de travail. Les développeurs attendent la sortie de Grid, mais c'est un long processus qui peut durer 5 ans.
Selon la légende, la spécification de deuxième niveau résout les problèmes du premier niveau. En fait, il ajoute des fonctionnalités dont vous pouvez vous passer et rien ne vous empêche d'utiliser le premier niveau sans le second.
affichage: sous-grille;
Avant de savoir ce qu'était la grille, comment la sous-grille est apparue. Voyons ce que c'est.
Imaginez ce balisage.
Tout est assez simple: nous avons une grille, trois éléments non sémantiques et un élément sémantique y sont intégrés. Grid fonctionne comme flexbox: lorsque vous utilisez
display: grid; pour un wrapper, il s'applique uniquement aux éléments du premier niveau d'imbrication.
Dans l'exemple 1, 2 et 3,
<div> prendra une place dans la grille et tout ce qui se trouve dans la liste s'effondrera. Vous perdrez tous ces éléments car c'est ainsi que fonctionne la grille.
Si vous souhaitez que ces éléments restent intégrés à votre grille, il existe deux options:
- La première option consiste à se débarrasser de l'emballage . Supprimez
<ul> et remplacez <li> par <div> . Nous tuons la sémantique, mais quittons la grille.
- La deuxième option consiste à utiliser
display: subgrid; .
Si vous appliquez
display: subgrid; à la liste, les éléments
<li> feront partie de cette grille,
<ul> , comme un wrapper, sera ignoré. Vous obtiendrez une grille complète et une sémantique complète restera - à la fois HTML est bon et CSS est bon.
Un problème est que la
sous-grille n'est pas prise en charge , elle se situe quelque part derrière les indicateurs, et la version peut être attendue pendant longtemps.
affichage: contenu;
En général, il n'est
pas nécessaire d'attendre , car il y a
display: contents; - une merveilleuse propriété qui fonctionne de la même manière que l'
display: subgrid; . Si pour les éléments de la liste, appliquer
display: contents; , les éléments
<li> feront alors partie de la grille.
Il y a une nuance -
display: contents; Non pris en charge dans tous les navigateurs.
Émulation de sous-grille CSS
Pendant l'
display: contents; résoudre le problème de support, les concepteurs de mise en page ont trouvé une solution - ils ont fait une émulation de sous-grille.
Sur la diapositive est
un exemple de Pacha Lovtsevich .
Dans l'exemple ci-dessus, il existe un comportement de sous-grille, mais son comportement n'est pas émulé via
display: subgrid; ou
display: contents; et en raison d'expressions personnalisées, qui sont converties en variables.
Les propriétés coupées sont des propriétés personnalisées en CSS.Le deuxième niveau n'est pas nécessaire
Si quelqu'un vous dit de ne pas utiliser la Grille avant la sortie du deuxième niveau, ne l'écoutez pas. Le deuxième niveau résout certains problèmes qui sont déjà résolus par d'autres moyens.
Pas partout où vous avez besoin d'une sous-grille. La grille en conjonction avec Flexbox est parfois beaucoup plus froide qu'avec la sous-grille.
Par conséquent, n'attendez pas le deuxième niveau, n'hésitez pas à faire le premier. De plus, il l'est déjà.
Prise en charge de la grille dans les navigateurs
Cette image peut être affichée si quelqu'un vous dit que la grille n'est pas prise en charge.
Pris en charge dans le monde entier
87% des navigateurs sauf Opera Mini - il ne prend en charge rien.
J'ai écrit à CanIuse , demandé de le retirer de la colonne, afin de ne pas gâcher l'image, mais jusqu'à présent en vain;)Si vous ajoutez
@supports , alors tout fonctionne, même Opera Mini. Je ne sais pas si Opera Mini prend en charge la flexbox, mais vous pouvez y recourir.
Il y a un problème avec IE. Comme toujours, il est ici avec nous et n'est allé nulle part.
IE et Grid
Si votre application prend en charge IE, vous pourriez dire que vous ne pouvez pas utiliser la grille. Ce n'est pas le cas -
Grid fonctionne dans IE , car la spécification est née dans Microsoft et est apparue pour la première fois dans IE. Personne ne l'a utilisé jusqu'à ce que des gens normaux viennent réécrire la spécification.
IE gère la grille, mais doit expliquer comment le faire.
IE prend en charge Grid dans l'ancienne version de la spécification , dans laquelle toutes les propriétés ne sont pas prises en charge, mais une partie est appelée différemment.
Vous n'avez pas besoin d'apprendre la spécification de version pour IE, car la plupart du travail pour vous sera
effectué par Autoprefixer , un plugin qui prend la nouvelle version de la spécification à l'ancienne. Par conséquent, pour fournir une prise en charge de la grille dans IE, l'utilisation d'Autoprefixer est suffisante.
Le reste, vous avez juste besoin de savoir et de vous souvenir. Ouvrez simplement l'article
«Prise en charge de la grille CSS dans Internet Explorer» , lisez quelles propriétés sont prises en charge dans IE et lesquelles ne le sont pas, et décidez laquelle vous allez utiliser.
N'oubliez pas la «dégradation gracieuse» lorsque des éléments de nouveaux éléments disparaissent dans les anciennes versions du navigateur. Par exemple, dans les navigateurs qui ne prennent pas en charge border-radius, les formes auront des coins carrés. Les concepteurs de mise en page ont été contraints de découper des images de formulaire au lieu de CSS, et dans certaines situations, cela a été considéré comme normal.
Pourquoi ne pas convertir la grille en colonnes régulières dans les anciennes versions des navigateurs? Si vous développez pour un ancien navigateur, n'utilisez pas de technologies modernes ou acceptez que leur contenu soit différent.
Internet Explorer fonctionne bien avec Grid, vous avez juste besoin d'un peu de pratique. Si vous n'utilisez pas Grid, parce que vous avez peur d'IE, alors je dois vous surprendre - cela ne fonctionnera pas.
Bogues et grille
Vous pouvez dire qu'il y a beaucoup de bugs dans la Grille, mais ce n'est pas le cas.
Rachel Andrew a trouvé
toutes les erreurs dans la grille CSS -
il y en a 14 au total , et c'est tout. Personne ne fait plus de CSS Grid Layout que Rachel, vous pouvez donc lui faire confiance.
Les bugs sont assez spécifiques. Nous nous souvenons que lorsque Flexbox est arrivé, ils avaient aussi des bugs, mais cela ne nous a pas arrêtés. Les bugs dans la grille ne nous arrêtent pas non plus, notamment.
"Certains éléments HTML ne peuvent pas être un conteneur de grille." Il y a une clarification tout de suite que le bouton ne peut pas être un conteneur Grid,
mais nous ne le voulions pas .
"Textarea, quand c'est un élément de la Grille, s'effondre." Le problème est facilement résolu si vous mettez la largeur et la hauteur en pourcentage.
Ces bogues sont assez spécifiques et n'apparaissent pas dans tous les navigateurs. Si vous savez qu'un bogue peut se produire, il vous suffit de le prendre et de le corriger - c'est facile.
Il n'y a pas beaucoup de raisons techniques pour ne pas utiliser une grille. Les navigateurs prennent en charge et, dans les anciens navigateurs, ils utilisent la "dégradation gracieuse". Les raisons théoriques sont également peu nombreuses, car il y a plus de matériaux que de flexbox.
Théorie ou petit programme éducatif
La grille est là! Nous pouvons dire depuis longtemps pourquoi nous n'utilisons pas Grid, mais pendant que vous lisez l'article, Grid est déjà déployé en production.
Les sites utilisent déjà Grid. Par exemple, je suis allé sur le site Web de la Russian Internet Week, et c'est le dernier endroit où je m'attendais à voir la grille. En règle générale, les sites de conférence d'affaires se réunissent sur Tilda.
De plus, ils utilisent plus ou moins correctement la grille. RIW a essayé, et ils l'ont fait, et sans recours. Ils ciblent clairement les utilisateurs de navigateurs modernes.
Les conférences qui parlent de CSS essaient en tout cas d'utiliser de nouveaux outils. Nous avons fait des badges sur le site pitercss_conf, et les gars de Minsk ont la moitié du site sur la grille.
La semaine Internet russe est un public plutôt restreint de visiteurs. Le New York Times lit plus de gens.
Je suis sûr que parmi les lecteurs, il y a des propriétaires d'appareils même avec IE 9, 10, 11, mais la moitié du site est sur la grille.
J'ai été surpris quand j'ai vu que des projets aussi importants utilisent Grid.
Pourquoi Grid n’est-il pas utilisé partout?
Nous avons réalisé qu'il existe une spécification, qu'elle peut être utilisée et qu'aucune excuse ne fonctionnera. Alors, quel est le problème?
Il y a certaines raisons de ne pas utiliser de maillages:
- Les concepteurs ne posent pas de tâches insolubles aux concepteurs de mise en page.
- Les concepteurs de mise en page ne comprennent pas comment appliquer Grid à des projets réels. Votre concepteur n'a probablement pas dessiné de grille complexe et vous ne savez pas comment attacher une grille à la mise en page.
En termes de design
Je vais maintenant protéger les concepteurs.Le design évolue lentement, selon ses tendances, sans rapport avec le développement des technologies web. Bien au contraire, les technologues du web doivent s'adapter aux tendances du design. Il est peu probable que les codeurs disent: «Les concepteurs, et nous avons une grille, vous pouvez travailler avec», et ils disent: «Oh, oui!» et a commencé à dessiner des dispositions pour eux.
Par conséquent, la plupart des sites ressemblent à ceci.
Un exemple abstrait avec une simple grille et des colonnes, rien d'inhabituel. Le site est facile à construire sans flexbox, sur float, vous pouvez même vous en tirer avec la disposition des tableaux.
Les concepteurs ont cessé de poser des tâches complexes pour les concepteurs de mise en page, car une fois que nous les avons nous-mêmes poussés dans un coin par le fait que nous avons cessé de faire ce qu'ils voulaient.
Le designer vient à nous et dit:
-
Je veux une grille compliquée!-
Je ne peux pas. Elle est compliquée .-
Non, fais-le .-
Je ne peux pas!Ensuite, nous allons chez le manager, nous plaignons et le designer se fait frapper à la tête.
Ça y est, le designer ne dessine plus de grilles complexes. Auparavant, nous ne pouvions vraiment pas construire d'interfaces complexes, mais maintenant nous le pouvons - nous avons beaucoup d'outils. Maintenant, le concepteur ne veut pas, il a cessé de demander des mises en page complexes. Le concepteur dessine une interface afin que le concepteur de mise en page puisse l'implémenter, et souvent aussi primitivement que possible.
Le blog
Je vais donner un exemple courant de notre externalisation. Le designer a été chargé de dessiner un blog et donne libre cours à toutes ses impulsions de grille. Dessine un gros bloc, large, 3 petits, moyen, fantasmer. Il a l'air cool et moderne.
Le typographe voit la mise en page, écrit un wrapper, un deuxième, un troisième sur flexbox et obtient une telle image.
La mise en page va au backend. Le backender dit au concepteur de mise en page qu'il a une conclusion de la base de données, et là les cartes vont les unes après les autres, elles ne peuvent pas être développées.
Cela termine l'heureuse histoire et nous revenons au designer.
Lorsque le concepteur a dessiné la mise en page, il a présenté d'autres options. Dans les options, il y avait un vol de fantaisie, et le back-end a cassé des rafales en un instant. Le projet de créer un beau blog a échoué.
Il existe différentes options de sortie:
- Le concepteur est envoyé dans un coin éloigné et ils disent: "Nous aurons tout l'un après l'autre, nous pouvons nous passer de votre show-off, faire ce que nous pouvons mettre en œuvre sur flexbox." Le designer en souffrira , mais affichera un portfolio avec une belle grille sur Behance. Dans la mise en page, il y aura un lien vers la production, et il n'y a que des carrés.
- Le typographe raccroche un plugin jQuery qui organise automatiquement les éléments sur une grille avec un positionnement absolu - tout va bien! De plus, le plugin chargera également la page et restera sans vergogne dans IE. Cependant, le concepteur et le back-end seront ravis .
- Le concepteur et le concepteur de la mise en page conviendront et mettront en œuvre une histoire incroyable et compromettront la conception, le backend et la mise en page .
Cas réel
Il y a une grille compliquée sur la page principale du magazine The Village. Il est fabriqué intentionnellement pour différents types de matériaux. Je le sais, car j'ai travaillé dans une publication.
"The Village" a écrit un énorme algorithme qui génère une grille sur le backend. C'est un mélange de flotteur, de positionnement absolu et d'autres choses effrayantes, mais ça marche!
Parfois, cela casse, mais lorsque cela se produit, les blocs sont simplement réorganisés et tout fonctionne à nouveau.
Je ne peux pas imaginer combien d'heures il a fallu pour concevoir ce système, le déboguer et le faire fonctionner presque sans erreur. Combien de temps faudrait-il pour implémenter la même grille si vous utilisez
display: grid; ou
grid-auto-flow: dense; ? À l'intérieur de la grille, il existe une spécification distincte qui organise automatiquement les éléments sur la page, elle obstrue elle-même les espaces vides et implémente une grille similaire. Vous n'avez pas besoin de dix mille lignes de code backend - tout fonctionne avec une seule propriété.
Au moment de la création de l'algorithme, cette technologie n'était pas là, mais en ce qui concerne la refonte, j'ai proposé immédiatement d'utiliser la Grille.
«Le village» s'est perdu à faire ce qu'il voulait, mais la plupart ne le font pas. Par conséquent, nous voyons un Web ordinaire, la normalisation, tout se résume à une mise en page. Nous avions auparavant Bootstrap, qui décrit la plupart du code. Désormais, les concepteurs ont déjà leurs propres outils, comme Bootstrap, avec lesquels ils créent des sites.
Quelle absurdité - où est la créativité?!Notre tâche n'est pas d'accepter d'utiliser la Grille au sein de la communauté, mais d'en informer les concepteurs.
Mon rêve est de parler à une conférence sur le design et de dire: «Bonjour! Nous sommes devenus meilleurs! Nous sommes à nouveau intelligents », mais ils ne sont pas autorisés à créer des codeurs lors de conférences de concepteurs. Dire aux designers que nous sommes devenus meilleurs n'est pas si difficile. Une grille simple vous est venue, vous demandez: «Pourquoi est-ce simple et pas compliqué? Je peux tout faire! "
En termes de mise en œuvre
La grille semble difficile à trouver. Quand ils me disent: «J'ai 3 colonnes et je peux le faire sur flexbox. Pourquoi ai-je besoin d'une grille? ", Puis je réponds:" En effet, non. " Par conséquent, il est difficile de savoir où appliquer la grille.
La grille n'est pas seulement une grille complexe
Il s'agit d'une mise en page simple qui peut être effectuée sur la grille, et plus facile que sur flexbox, car aucun wrapper supplémentaire n'est nécessaire. Voici un exemple sur la grille, cela peut également être fait sur flexbox, mais vous avez besoin de beaucoup de wrappers ou de flux supplémentaires, et vous obtenez un vrai bordel.
Grille - pas pour les petits éléments : soit pour les petits très complexes, soit pour les grands.
Grille de mise en page
Je ne connais pas un seul site où vous ne pouvez pas réécrire la mise en page sur la grille et économiser beaucoup de wrappers supplémentaires inutiles à ce sujet.
- La grille peut être appliquée à la disposition globale.
- La grille peut être appliquée aux éléments d'interface
Il s'agit du badge pitercss_conf-2, il est réalisé sur une grille.
La partie la plus difficile de la disposition de la grille est de dessiner une grille qui vous convient. Dans ce cas, ce n'est pas seulement 6 * 6, mais 5 * 8, mais chaque bloc a une hauteur et une largeur différentes.
Nous voyons la tâche et composons le contenu, très similaire aux guides de Photoshop. Le concepteur a dessiné et nous avons transféré la mise en page sur la grille. Il n'y a pas de wrapper supplémentaire ici - uniquement des éléments sémantiques qui sont intégrés dans la grille à l'aide de la grille.
La carte d'embarquement peut être effectuée sur flexbox.
Et c'est possible sur la Grille, et dans la version mobile, le coupon est différent.
Grille pour la structure
La deuxième chose importante à retenir: en
utilisant la grille, vous pouvez simplement changer la structure .
Il y a de l'ordre dans flexbox, ce qui vous permet de changer l'ordre de tous les éléments. Il s'agit d'une technologie complexe, et comment avec les indices Z, vous pouvez vous tirer une balle dans le pied si vous ne savez pas comment l'utiliser.
La grille est simple. Dans cet exemple, s'il n'y avait pas de grille, il faudrait déplacer la partie droite avec le code QR en position absolue. Et sur la grille, c'est 13 lignes de code dans la version mobile.
Pour commencer à utiliser la grille, vous devez commencer à utiliser la grille . Essayez de disposer certains éléments de votre interface sur la grille. Vous pouvez commencer avec des petits, vous pouvez commencer avec des globaux pour comprendre comment cela simplifie la vie.
Personne ne vous dira: "Utilisez la grille ici, mais pas ici!" Vous devez vous comprendre et vous apprendre, mais pour cela, vous devez combler les bosses. Si la mise en œuvre de la tâche sur la grille a pris deux fois plus de temps que sur la flexbox, ces tâches n'ont pas besoin d'être résolues sur la grille.
Ici pour la bande dessinée, la Grille est parfaite.
Considérons un problème non trivial.
Si vous plongez dans le code, il devient clair comment tout fonctionne. Les gars programment en CSS et construisent les zones de grille. Selon le rôle du joueur, il monte automatiquement dans la zone souhaitée. L'alignement vertical et horizontal crée la construction. C'est toute la programmation CSS. Le problème est résolu avec 50 lignes de code CSS, ce qui est beaucoup plus facile que via un backend ou JS.
Je veux que les designs et les mises en page soient amusants, comme celui-ci.
Cette disposition est trop compliquée sur la grille, car la tâche était difficile. Le concepteur de mise en page n'a pas pu dessiner la mise en page sur une simple boîte flexible, seule la grille. Il était possible de faire moins de cellules, mais étant donné que les cellules sont construites par répétition, cela n'a pas pris beaucoup de temps. L'essentiel est qu'ils l'ont fait.
Il est composé de manière complexe, mais l'interface est très cool reconstruite à l'avenir.
Et ensuite?
Arrêtons de nous dire: «Je ne peux pas» en termes de grille . Vous pouvez - ne voulez tout simplement pas. Il n'y a aucune raison objective de ne pas utiliser la grille, à part la paresse et la réticence à essayer.
La grille est un système tellement universel qu'il est même impossible d'en créer un cadre . Si vous voyez que certains frameworks utilisent Grid Layout - c'est absurde, car Grid lui-même est un framework pour construire des grilles. Il est peu probable que Bootstrap passe à Grid. Imaginez qu'il y aura 20 millions de classes - une perversion!
Par conséquent, vous n'aurez jamais de solution toute faite. Il peut y avoir des modèles, mais il n'y aura pas de règles pour appliquer la Grille ou non.
Apprenez, voyez des exemples, développez . Il n'y a rien de mal à regarder les exemples des autres. Par exemple, je le fais.
Apportez des connaissances à l'équipe . Dites que vous connaissez la Grille, suggérez de l'utiliser.
Allez voir le créateur et dites: "Laissez-vous dessiner plus intéressant, et je réaliserai vos idées!"
Dites au manager: "Nous pouvons faire plus avec la Grille maintenant!"
Partagez vos connaissances au sein de l'équipe et faites avancer le Web. En fin de compte, nous avons un objectif simple:
rendre le Web meilleur et plus cool !
Si, à un moment donné, tout est allé dans la simplification, il y a maintenant de nouvelles technologies. Non seulement les grilles sont des masques SVG, des animations, des transformations. Le problème n'est pas dans la technologie, mais dans le fait que la majorité n'en utilise toujours pas la moitié. Nous ne savons pas tout ou ne voulons pas utiliser, et les concepteurs ne savent pas ce que nous pouvons.
Contacts de Sergey Popov: e-mail ,
Fb ,
twitterCe rapport est l'un des meilleurs sur Frontend Conf . Je l'ai aimé et j'en veux plus - abonnez-vous à la newsletter dans laquelle nous collectons de nouveaux documents et donnons accès à la vidéo, et venez à Frontend Conf RIT ++ en mai.
Vous en savez plus et êtes prêt à partager votre expérience - excellent! Envoyez des résumés , les rapports sont déjà ouverts et se poursuivront jusqu'au 27 février.