L’outil secret pour exploser ton chiffre d'affaires en 2025 !
Débordement et perte de données en CSS
CSS est conçu pour que votre contenu reste lisible. Si vous considérez un document HTML comportant des en-têtes et des paragraphes (sans CSS), il s'affiche dans le navigateur de manière lisible. Les en-têtes sont grands et gras, et les paragraphes sont séparés par un espace contrôlé par la feuille de style par défaut du navigateur. Cependant, dès que vous souhaitez modifier la mise en page de votre page, vous commencez à prendre en main le contrôle. Dans certains cas, cela signifie que vous devrez vous charger du problème du débordement.
Dans cet article, je vais examiner les différentes manières dont nous sommes confrontés au débordement sur le Web. Nous verrons comment les nouvelles méthodes de mise en page et les nouvelles valeurs en CSS peuvent nous aider à gérer les débordements et à créer des conceptions moins fragiles. Je vais également expliquer un des concepts fondamentaux à la base de la conception de CSS: éviter les pertes de données.
Listes, marqueurs et compteurs CSS
Le stylage des listes CSS ne se limite pas à ce que vous pourriez penser. Jetons un coup d’œil aux listes en CSS et passons aux fonctionnalités intéressantes définies dans la spécification des listes CSS: les marqueurs et les compteurs. En savoir plus →
Qu'entendons-nous par débordement?
Si nous regardons quelques années en arrière (avant l'avènement de méthodes de mise en forme telles que Flexbox et Grid Layout), songez à lui remettre un dessin comme celui-ci. au dessous de. Une disposition très simple de trois boîtes, des quantités différentes de contenu dans chacune, mais le bas de ces boîtes doit être aligné:
Avec une mise en page flottante, une tâche aussi simple en apparence était impossible. Lorsqu'elles sont flottantes, chaque boîte n'a aucun lien avec son voisin; cela signifie qu'il n'a aucun moyen de savoir que la boîte d'à côté est plus grande et de s'adapter à la hauteur.
Parfois, dans un effort pour aligner les choses, les concepteurs limitaient alors la hauteur des boîtes en devinant la quantité de contenu pour en faire des boîtes. assez grand pour correspondre. Bien sûr, les choses ne sont jamais aussi simples sur le Web et lorsque la quantité de contenu diffère ou que la taille du texte est plus grande, le texte commence à sortir du fond de la boîte. Il aurait débordé .
Cette incapacité à contrôler la hauteur des choses par rapport à d’autres facteurs a donc une influence sur la conception Web – une limitation technique qui modifie notre façon de concevoir. (J'apprécie le fait que, avec Flexbox et Grid.) Non seulement ce problème a disparu, mais le comportement par défaut de ces nouvelles méthodes de présentation est d'élargir les cases à la même hauteur. La valeur initiale de align-items est stretch, ce qui provoque l'étirement des boîtes jusqu'à la hauteur de la grille ou du conteneur flexible.
Voir le stylo [Equal Height Boxes] (https://codepen.io / rachelandrew / pen / VwZzxjV) de Rachel Andrew .
De plus, CSS Grid nous donne un bon moyen de demander que les choses au moins atteignent une certaine taille, mais deviennent plus grandes si elles en ont besoin. Si vous définissez une taille de piste à l'aide de la fonction minmax () vous pouvez voir une taille minimale et maximale pour la piste. Régler les lignes sur minmax (200px, auto) signifie que la piste contiendra toujours au moins 200 pixels dans la dimension du bloc, même si les éléments de la grille sont vides. Si, toutefois, le contenu d'un élément de la grille signifie qu'il sera supérieur à 200 pixels, le maximum étant défini sur auto il peut croître. Vous pouvez voir ceci dans l'exemple ci-dessous: La première ligne est de 200 pixels, aucun élément ne l'agrandissant. La deuxième ligne contient un élément de grille avec plus de contenu que ce qui convient, ainsi auto est utilisé et la piste dépasse de 200 pixels
Voir le stylo [Minmax()] (https: / /codepen.io/rachelandrew/pen/zYOdjKP) de Rachel Andrew .
Le La fonction minmax () vous permet de créer des motifs qui semblent avoir la taille fixe parfaite. Dans un monde idéal (lorsque la quantité de contenu correspond à peu près à ce que vous attendiez), vous obtiendrez ces belles rangées uniformes. Cependant, si du contenu supplémentaire est ajouté, il n'y aura pas de dépassement de capacité, comme cela aurait été le cas si vous aviez fixé la hauteur des lignes à 200 pixels. La ligne va se développer; ce n'est peut-être pas exactement ce que vous vouliez en tant que concepteur, mais ce ne sera pas illisible.
Débordement en ligne
Le risque de débordement se produit chaque fois que nous limitons la taille des éléments. Dans l'exemple ci-dessus, je décris une restriction dans la dimension de bloc, que les utilisateurs de langage horizontal considéreront comme height . Cependant, nous pouvons également nous retrouver avec un débordement dans la direction en ligne si nous limitons la taille ou la largeur en ligne d'une zone. C’est quelque chose que nous voyons dans le meme «CSS is Awesome»:
L'auteur du meme commente le Un article de CSS-Tricks à ce sujet disait,
«Je comprends maintenant un peu mieux le concept de débordement, mais à ce moment-là, je me suis dit que quelqu'un pensait que le comportement par défaut devrait être juste le texte klaxonne dès la sortie de la boîte, au lieu de simplement agrandir la boîte comme mes jolies tables sensibles l'ont toujours été. "
Alors, pourquoi CSS fait-il en sorte que le texte" klaxonne tout de suite "plutôt que d'agrandir la boîte ?
Dans le meme, vous avez débordé dans la direction en ligne. Le mot «génial» est plus grand que la largeur appliquée à la boîte et il déborde donc. CSS suppose assez raisonnablement que si vous avez créé une certaine largeur pour la boîte, vous souhaitez que la boîte ait cette largeur. Elle doit peut-être s'adapter à une présentation qui se briserait si les boîtes devenaient soudainement plus grandes que celles définies.
Ce problème particulier (la nécessité de définir les tailles de toutes les présentations et de s'assurer qu'elles ne totalisent pas plus que la taille en ligne disponible). du conteneur) est quelque chose que nos méthodes de mise en page modernes ont abordé pour nous. Si nous imaginons que notre boîte avait cette taille en ligne absolue de sorte à pouvoir s'inscrire dans une ligne avec d'autres boîtes d'une grille à base flottante, vous pouvez aujourd'hui choisir d'approcher cette présentation à l'aide de Flexbox.
Avec la disposition flottante, vous avez pour définir la taille de chaque élément – potentiellement avant vous savez quel sera le contenu. Vous aurez ensuite de gros objets coincés dans des petits conteneurs et des petits objets avec beaucoup d'espace autour d'eux.
Cependant, si nous utilisons Flexbox, nous pouvons permettre au navigateur de calculer la quantité d’espace à attribuer à chaque élément. Flexbox veillera ensuite à ce que les grands projets bénéficient de plus d'espace alors que les plus petits en obtiendront moins. Cette taille disproportionnée signifie que la boîte contenant le mot «génial» s’amplifiera pour contenir la boîte, et que le texte ne kiffera pas immédiatement ni ne chevauchera quoi que ce soit d’autre. Problème de débordement résolu; Ce comportement est vraiment ce pour quoi Flexbox a été conçu. Flexbox excelle à prendre un tas de choses de taille inégale et à restituer la mise en page la plus utile pour ces choses.
En dehors de Flexbox, il est possible de dire à notre boîte d'être aussi grande que nécessaire pour le contenu, sans plus. Le mot clé min-content peut être utilisé comme valeur pour width ou inline-size si vous utilisez des propriétés logiques relatives au flux. Définissez width: min-content et la boîte deviendra aussi grande que nécessaire pour contenir le mot «génial»:
Voir le stylo [Awesome with min-content] (https://codepen.io/rachelandrew/ pen / LYPjmbJ) de Rachel Andrew .
Éviter la perte de données
La raison pour laquelle la boîte déborde de la même manière (avec le mot s'échappant de la bordure de la boîte), est que la valeur par défaut de la propriété overflow est visible . Vous pouvez (si vous le souhaitez) gérer ce débordement de manière différente. Par exemple, utiliser overflow: auto ou overflow: scroll donnerait des barres de défilement à la boîte. Ce scénario ne vous convient probablement pas, mais il existe certains modèles de conception dans lesquels une zone de défilement est appropriée.
Une autre possibilité serait de décider que vous souhaitez supprimer le débordement en utilisant overflow: hidden . ]. Peut-être pourriez-vous penser que masquer le débordement aurait été un meilleur choix par défaut. Cependant, le fait que CSS choisisse de rendre le débordement visible par défaut (et non masqué) est un indice de la valeur fondamentale de la conception de CSS. En CSS (comme dans la plupart des endroits), nous essayons d'éviter la perte de données . Lorsque nous parlons de perte de données en CSS, nous décrivons généralement une partie de votre contenu qui manque. Dans le cas du débordement : caché le contenu débordant disparaît. Cela signifie que nous n'avons aucun moyen de voir ce que nous avons manqué.
Dans certains cas, cela pourrait être un réel problème. Si vous avez réussi à créer un motif tellement fragile que le bouton de votre formulaire se trouve dans la zone recadrée, votre utilisateur n'a pas la possibilité de remplir le formulaire. Si le dernier paragraphe est coupé, nous ne savons jamais comment l'histoire se termine! De plus, le problème avec les objets qui disparaissent est qu’il n’est pas toujours évident qu’ils sont partis. En tant que concepteur, vous ne remarquerez peut-être pas le problème, surtout si cela ne se produit que dans certaines tailles de fenêtre d'affichage dans un design réactif. Vos utilisateurs risquent de ne pas détecter le problème. Ils ne voient simplement pas l’appel à l’action ou pensent que c’est en quelque sorte leur problème qu’ils ne peuvent pas passer leur commande et disparaissent. Cependant, si les choses débordent mal, vous aurez tendance à le repérer. Au pire, quelqu'un qui utilise le site le remarquera et vous le fera savoir.
C'est pourquoi le CSS déborde de manière visible et désordonnée. En vous montrant le débordement, vous aurez plus de chances de le réparer que s'il cache le débordement. Avec la propriété overflow vous avez toutefois la possibilité de prendre vous-même la décision. Si vous préférez que le débordement soit recadré (ce qui peut être la bonne décision dans certains cas), utilisez overflow: hidden .
Perte de données et alignement
Les meilleures capacités d'alignement que nous avons acquises récemment années ont également le potentiel de perte de données. Considérez une colonne d’éléments flex qui se trouvent contre le bord de la fenêtre et avec des tailles différentes. Alignés sur flex-start les éléments sont tous plus visibles à droite. Aligné sur le centre toutefois, l'élément le plus long se retrouverait en dehors du bord de la fenêtre. L'alignement pourrait donc entraîner une perte de données.
Pour éviter les pertes de données accidentelles causées par l'alignement, CSS propose maintenant de nouveaux mots-clés pouvant être utilisés avec les propriétés d'alignement. Celles-ci sont spécifiées dans la spécification Box Alignment, spécification qui traite de l'alignement de toutes les méthodes de présentation, y compris Grid et Flexbox. Ils ne sont actuellement pris en charge que par Firefox. Dans notre exemple ci-dessus, si nous définissons align-items: safe centre le dernier élément s'alignera sur start au lieu de forcer le contenu à être centré. Cela éviterait la perte de données causée par le centrage de l'élément et donc son éloignement de la fenêtre d'affichage.
Si vous souhaitez que l'alignement (même s'il risque de provoquer un débordement), vous pouvez spécifier un centre non sécurisé . Vous avez ensuite demandé au navigateur d’aligner votre choix, quel que soit le contenu de celui-ci. Si vous avez Firefox, vous pouvez voir les deux exemples: l'un avec safe et l'autre avec un alignement non sécurisé.
Voir le stylo [Safe and unsafe alignment] (https://codepen.io/rachelandrew/pen/QWLMrpE) par Rachel Andrew .
Dans le discours sur lequel je me suis fondé article, je décrivais la conception Web comme étant une bataille constante contre le débordement . Une des vérités de la conception sur le Web est qu’il est très difficile de savoir quelle sera la hauteur ou la taille d’un élément contenant du texte. Cependant, comme je l’ai montré ci-dessus, nous n’avons jamais eu autant de moyens de Cela signifie que nos conceptions peuvent être beaucoup plus résilientes et que nous pouvons créer des modèles qui fonctionneront avec des quantités variables de contenu. Cela peut sembler être de légers changements dans nos capacités, mais je pense que les possibilités qu’ils ouvrent à nous sont énormes.
(il) Source link