Fermer

mars 11, 2019

Conception d’une unité de rapport de format pour CSS


À propos de l'auteur

Rachel Andrew est non seulement la rédactrice en chef de Smashing Magazine, mais également une développeuse Web, une écrivaine et une conférencière. Elle est l'auteur de plusieurs livres, notamment…
Pour en savoir plus sur Rachel

Le groupe de travail CSS a conçu une unité de format d'image pour CSS. Bien que cela ne soit pas encore disponible dans les navigateurs, cet article examine le processus de conception d’une nouvelle méthode de dimensionnement et explique son fonctionnement.

Une des choses qui revient souvent dans CSS est le fait qu'il est impossible de dimensionner les choses en fonction de leurs proportions. En particulier lorsque vous travaillez avec des conceptions réactives, vous souhaitez souvent pouvoir définir la largeur en pourcentage et que la hauteur corresponde à un rapport de format. C’est quelque chose que l’organe chargé de la conception du CSS – le groupe de travail sur le CSS (CSSWG) a examiné récemment et lors de la récente réunion du CSSWG à San Francisco, une proposition de solution a été approuvée.

Il s’agit d’une nouvelle résolution. aucune implémentation de navigateur pour le moment, mais j’ai pensé que cela valait la peine d’écrire la proposition, au cas où quelqu'un dans la communauté Web élargie verrait un problème incroyable avec elle. Cela donne également un aperçu du travail du CSSWG et de la manière dont de telles questions sont discutées, ainsi que de nouvelles fonctionnalités conçues.

Quel est le problème que nous essayons de résoudre?

éléments remplacés, qui n'ont pas un rapport d'aspect intrinsèque. Les éléments remplacés sont des éléments tels que des images ou une vidéo placée avec l'élément . Elles diffèrent des autres boîtes en CSS car elles ont des dimensions définies et leur propre comportement. Ces éléments remplacés sont dits avoir un rapport hauteur / largeur intrinsèque, car ils ont des dimensions.

Un élément div ou un autre élément HTML pouvant contenir du contenu n'a pas de rapport hauteur / largeur, vous devez donc lui attribuer une largeur et une hauteur. Il n'y a aucun moyen de dire que vous voulez conserver un format d'image de 16/9 et que, quelle que soit la largeur, la hauteur doit être calculée à l'aide du format d'affichage donné.

Une situation très courante se présente lorsque vous souhaitez intégrer iframe afin d’afficher une vidéo à partir d’un site de partage de vidéos tel que YouTube. Si vous utilisez l'élément la vidéo a un rapport de format, exactement comme une image. Ce n’est pas le cas si la vidéo est ailleurs et que vous utilisez une intégration. Ce que vous souhaitez, c'est que votre vidéo soit réactive tout en conservant le rapport hauteur / largeur correct. Cependant, si vous définissez la largeur sur 100%, vous obtenez la nécessité de définir une hauteur. Votre vidéo finit par être étirée ou écrasée.

Voyons également un cas très simple de création d’une grille avec des cellules carrées. Si nous utilisions des tailles de piste de colonne fixes, il est facile d’obtenir nos cellules carrées car nous pouvons définir des lignes de la même taille que les pistes de colonne. Nous pourrions également faire en sorte que nos pistes de rangée soient automatiquement dimensionnées, et que nous ayons des éléments et en définissent la hauteur.

Le problème survient lorsque nous voulons utiliser le remplissage automatique et remplir un conteneur avec autant de colonnes. pistes comme ira. Nous ne pouvons plus simplement donner une hauteur aux objets, car nous ne savons pas quelle est leur largeur. Nos éléments ne sont plus carrés.

Etre capable de dimensionner les objets en fonction de leur format d'image signifierait que nous pourrions calculer le rapport de format correct une fois que l'élément de la grille est disposé. Ainsi, les éléments de la grille sont aussi hauts que larges, de sorte qu'ils conservent toujours la forme d'un carré, quelle que soit leur largeur.

Solutions de format d'affichage actuelles (19659007) Les développeurs Web ont dû composer avec le manque de format d'affichage dans CSS. de différentes manières, la principale étant le "hack de remplissage". Cette solution utilise le fait que le% de remplissage dans la direction du bloc (donc le remplissage supérieur et inférieur dans une langue horizontale de haut en bas) est calculé à partir de la taille de la ligne (largeur).

L'article L'article Aspect Ratio Boxes sur CSS Tricks présente un bon aperçu des méthodes actuelles de création de zones de format d'image. Le hack de padding fonctionne dans de nombreux cas, mais il faut un tas de cerceaux pour pouvoir le faire fonctionner correctement. Ce n’est pas du tout intuitif, même si vous savez pourquoi et comment cela fonctionne. C’est ce genre de choses que nous voulons essayer de résoudre au sein du groupe de travail CSS. Personnellement, j'estime que plus nous obtenons des solutions élégantes pour la mise en forme en CSS, plus les piratages délicats doivent être corrigés.

Pour la situation vidéo, vous pouvez utiliser JavaScript, et une solution très populaire consiste à utiliser . ] FitVids comme décrit également dans l’article astuces CSS. Utiliser JavaScript est une solution raisonnable, mais il faut plus de script à charger et une autre tâche à ne pas oublier. Vous ne pouvez pas simplement insérer une vidéo dans votre contenu et cela suffit à fonctionner .

La solution proposée

Ce que nous recherchons est une solution générique qui conviendra à la disposition régulière des blocs, telle que une vidéo dans un iframe ou un div sur la page. Cela devrait également fonctionner si l'élément est un élément de grille ou de flex. Il existe un problème différent, à savoir le fait de vouloir que les pistes de la grille maintiennent un rapport de format (si les pistes de lignes correspondent aux colonnes), cette solution résoudrait de nombreux cas, mais vous pourriez le souhaiter. Cependant, vous travailleriez à partir de l’objet plutôt que de la piste.

La solution fera partie de la spécification CSS Sizing et est définie dans la spécification CSS Sizing 4 . Il s’agit de la première étape pour les nouvelles fonctionnalités conçues par le groupe de travail CSS, l’idée est discutée, puis écrite dans une spécification. Jen Simmons a présenté au groupe une proposition initiale pour cette fonction. Vous pouvez voir sa diapositive de diapositives illustrant de nombreux cas d'utilisation décrits dans cet article ici .

la spécification de dimensionnement est la propriété d’aspect / longueur . Cette propriété acceptera une valeur qui est un rapport d'aspect tel que 16/9 . Par exemple, si vous souhaitez une boîte carrée de largeur identique à la hauteur, vous utiliserez:

 .box {
  largeur: 400px;
  hauteur: auto;
  format de l'image: 1/1;
} 

Pour une boîte 16/9, comme pour une vidéo:

 .box {
  largeur: 100%;
  hauteur: auto;
  rapport de forme: 16/9;
} 

Pour l'exemple avec les éléments carrés dans un agencement de grille, nous laissons la taille automatique de nos pistes de grille, ce qui signifie qu'elles prendront leur taille à partir des éléments. Nous allons ensuite redimensionner nos éléments avec le rapport d'aspect unité.

 .grid {
    affichage: grille;
    Grille-modèle-colonnes: répéter (remplissage automatique, minmax (200px, 1fr));
}

.article {
    format de l'image: 1/1;
} 

Les fonctionnalités passent souvent par différentes itérations avant que les navigateurs ne commencent à les implémenter. Après avoir discuté de la nécessité d’une unité de rapport de format, nous nous sommes penchés cette fois sur un problème particulier concernant la proposition. Que se passe-t-il si vous spécifiez une zone de format d'image, mais ajoutez ensuite trop de contenu à la zone? Ce même problème est évoqué dans l'article de CSS Tricks concernant le hack de remplissage, avec des solutions tout aussi intuitives nécessaires pour le résoudre.

Gestion des débordements

Nous avons affaire à un débordement, comme c'est souvent le cas sur la toile. Nous voulons avoir une belle boîte de taille nette, notre conception demande une belle boîte de taille nette, notre contenu est moins bien comporté et s'avère plus volumineux que prévu et sort de la boîte. En plus de spécifier comment nous demandons un format d'image dans une dimension, nous devons également spécifier ce qui se passe s'il y a trop de contenu et comment le développeur Web peut dire au navigateur quoi faire pour éviter le débordement.

est un principe de conception général en CSS que nous essayons d'éviter la perte de données. La perte de données dans un contexte CSS est la cause de la disparition partielle de votre contenu. Cela peut être dû au fait qu’il est piqué du côté de la fenêtre ou qu’il est rogné lorsqu’il déborde. Il est généralement préférable d’avoir un débordement désordonné, car vous le remarquerez et ferez quelque chose à ce sujet. Si nous faisons en sorte que quelque chose disparaisse, vous ne le réaliserez peut-être pas, surtout si cela ne se produit qu'à un point d'arrêt.

Nous avons un problème similaire dans la disposition de la grille, qui est bien réglé avec la fonction minmax () de la piste. tailles. Vous pouvez définir des pistes de grille avec une hauteur fixe en utilisant une unité de longueur. Cela vous donnera une jolie grille de cases bien nette, mais dès que quelqu'un ajoutera plus de contenu que prévu dans l'une de ces cases, vous obtiendrez un débordement.

Le correctif de ceci dans la présentation de grille est d'utiliser minmax () pour la taille de votre piste et définissez la valeur maximale auto . Dans ce cas, auto peut être considéré comme «suffisamment grand pour s'adapter au contenu». Ce que vous obtenez alors est un ensemble de superbes boîtes d'aspect qui, si plus de contenu attendu entre en jeu, se développent pour accepter ce contenu. Infiniment mieux qu'un débordement désordonné ou un contenu recadré. Dans l'exemple ci-dessous, vous pouvez voir que la première ligne avec la zone contenant du contenu supplémentaire a augmenté, la seconde ligne mesure 100 pixels.

Nous avons besoin de quelque chose de similaire pour nos zones de format d'image, et la suggestion s'avère relativement simple. . Si vous ne faites rien sur le débordement, le comportement par défaut sera que le contenu est autorisé à croître au-delà de la hauteur induite par le rapport de format. Cela vous donnera le même comportement que les pistes de grille dimensionnées avec minmax () . Dans le cas d'une hauteur, la hauteur sera au moins égale à la hauteur définie par le rapport de format, mais si le contenu est plus haut, la hauteur peut augmenter pour l'adapter.

Si vous ne le souhaitez pas, vous pouvez alors changez la valeur de overflow comme vous le feriez normalement. Par exemple, masquer le débordement ou le laisser défiler.

Je pense que cette proposition couvre les cas d'utilisation décrits en détail dans l'article relatif à astuces CSS, ainsi que les tâches habituelles des développeurs Web. Il vous permet de créer des boîtes de format de rapport d'aspect dans différents contextes de mise en page et est robuste. Cela résoudra la situation réelle du contenu sur le Web, où nous ne savons pas toujours quelle quantité de contenu nous avons ni quelle est sa taille.

Si vous remarquez un problème réel ou si vous avez un autre cas d'utilisation qui vous pensez que rien ne peut être résolu, vous pouvez commenter directement la proposition en soulevant un problème lors du CSSWG GitHub repo . Si vous ne voulez pas faire cela, vous pouvez toujours commenter ici, ou poster sur votre propre blog et créer un lien ici pour que je puisse le voir. Je serais très heureux de faire part de vos réflexions au groupe de travail au cours de l’examen de cette fonctionnalité.

 Smashing Editorial (il)




Source link