Génération de boîtes

Il s'agit du deuxième d'une courte série d'articles sur la propriété display en CSS. Vous pouvez lire le premier article de la série à « Les deux valeurs de l'affichage ». La spécification display est une spécification très utile à comprendre car elle sous-tend toutes les méthodes de mise en page que nous avons.

Bien que beaucoup des valeurs de display aient leur propre spécification, beaucoup les termes et les idées sont détaillés dans display . Cela signifie que comprendre cette spécification vous aide à comprendre les spécifications qui détaillent essentiellement les valeurs de display . Dans cet article, je vais examiner les valeurs de génération de boîtes de display – aucune et sommaire .

Tout est boîte. [19659002] En CSS, tout génère des boîtes. Une page Web est essentiellement un ensemble de blocs et de blocs en ligne, ce que vous comprenez très bien si vous ouvrez DevTools dans votre navigateur préféré et commencez à sélectionner des éléments sur la page. Vous pouvez voir les boîtes qui composent la mise en page et comment leurs marges, leurs marges et leurs bordures sont appliqués.

Génération de boîtes de contrôle

Le aucune et contenu valeurs de display traitent de la présence éventuelle de boîtes du tout. Si vous avez des éléments dans votre balise et que vous ne voulez pas qu’ils génèrent une boîte en CSS, vous devez en quelque sorte supprimer la génération de la boîte. Il y a deux choses que vous pourriez vouloir faire.

• Empêcher la génération d'une boîte et de tous ses enfants.
• Empêcher la génération d'une boîte tout en affichant les enfants.

Nous pouvons examiner tour à tour chacun de ces scénarios.

display: none

La valeur none de display est la façon dont nous empêchons la génération d'une boîte et de tous les enfants de cette boîte. C'est comme si l'élément n'était pas là du tout. Par conséquent, il est utile dans les situations où vous souhaitez masquer complètement ce contenu, peut-être parce qu'il sera révélé plus tard après l'activation d'un lien.

Si j'ai un exemple avec un paragraphe, une liste non ordonnée et un autre paragraphe visible que les articles sont affichés en flux normal. Le ul a un fond et une bordure appliqués, ainsi qu'un peu de rembourrage.

Si j'ajoute : à ul il disparaît de l'affichage, entraînant avec lui les enfants de ul ainsi que l'arrière-plan et la bordure.

Si vous utilisez : [néant] il cache le contenu de tous les utilisateurs du site. Cela inclut les utilisateurs de lecteurs d'écran. Par conséquent, vous ne devez utiliser cette option que si votre intention est que la boîte et tout ce qui se trouve à l'intérieur soient complètement masqués par tout le monde. d'autres utilisateurs; dans ce cas, vous devez utiliser une technique différente. Scott O ’Hara a fait d’excellentes suggestions dans son article« Inclusively Hidden ».

L’utilisation de display: none est donc assez simple. Utilisez-le dans une situation où vous souhaitez qu'une boîte et son contenu disparaissent de l'affichage, de l'arborescence des boîtes et de l'arborescence d'accessibilité (comme si elle ne s'y trouvait jamais à la place).

display: contents

Pour le deuxième scénario, nous devons examiner une valeur d'affichage beaucoup plus récente. La valeur display: contents supprimera la boîte à laquelle il est appliqué de l’arborescence de la même manière que display: none le fait, mais laisse les enfants à la place. Cela provoque un comportement utile en termes de choses que nous pouvons ensuite faire dans nos mises en page. Voyons un exemple simple, puis explorons plus avant.

J’utilise le même exemple qu’auparavant, mais j’ai utilisé cette fois-ci display: contents sur le ul . Les éléments de la liste sont maintenant visibles, mais ils n'ont ni arrière-plan ni bordure et agissent comme si vous aviez ajouté des éléments li à la page sans aucun encadrement ul .

La raison pour laquelle il est utile de retirer une boîte et de garder les enfants est due à la les autres valeurs de display se comportent. Lorsque nous changeons la valeur de l'affichage nous le faisons sur une boîte et les enfants directs de cette boîte, comme je l'ai décrit dans le dernier article. Si j'ajoute display: flex aux règles CSS pour un élément, cet élément devient une boîte au niveau du bloc et les enfants directs deviennent des éléments flex. Les enfants de ces éléments flex redeviennent normaux (ils ne font pas partie de la présentation flex).

Vous pouvez voir ce problème dans l'exemple suivant. Ici, j'ai un ensemble d'éléments contenant l'affichage flex, il a quatre enfants directs, trois éléments div et un ul . Le ul contient deux éléments de liste. Les enfants directs participent tous à la mise en page flexible et à la mise en forme comme éléments flexibles. Les éléments de la liste ne sont pas des enfants directs et sont donc affichés comme éléments de la liste dans la boîte du ul .

Si nous prenons cet exemple et ajoutons l’affichage : contents du ul la case est supprimée de l’affichage visuel et maintenant les enfants participent à la mise en page flex. Vous pouvez voir qu'ils ne deviennent pas des enfants directs. Ils ne sont pas sélectionnés par le sélecteur universel d'enfants directs ( .wrapper> * ) comme le sont les éléments div et ul et conservent l'arrière-plan qui leur a été attribué. Tout ce qui s'est passé, c'est que la boîte de la ul qui la contient a été retirée, tout le reste se déroulant normalement.

Cela a des implications potentiellement très utiles si nous considérons des éléments HTML importants pour l'accessibilité et les données sémantiques, mais qui génèrent un encadré supplémentaire susceptible de nous empêcher de disposer le contenu avec une disposition flex ou grid.

Ceci n'est pas une CSS “réinitialisée”

Vous avez peut-être remarqué combien l'un des effets secondaires de l'utilisation de display: contents est que la marge et le remplissage sont affichés. les éléments sont supprimés. En effet, ils sont liés à la boîte, qui fait partie du modèle de boîte CSS. Cela pourrait vous amener à penser que display: contents est un bon moyen de vous débarrasser rapidement du remplissage et de la marge d'un élément.

Il s'agit d'une utilisation qu'Adrian Roselli a repérée à l'état sauvage; il était assez inquiet pour écrire un article détaillé expliquant les problèmes que cela pose – « display: contents n'est pas une réinitialisation CSS .» Certains des problèmes qu'il soulève sont dus à un problème d'accessibilité regrettable dans navigateurs actuellement avec display: contenu dont nous discuterons plus bas. Cependant, même une fois ces problèmes résolus, supprimer un élément de l’arborescence simplement pour vous débarrasser de la marge et du rembourrage est un peu extrême.

Si rien d’autre, cela poserait un problème pour l’entretien futur du site, un avenir. développeur pourrait se demander pourquoi ils ne semblaient pas pouvoir appliquer quoi que ce soit à cette boîte mystérieuse – à part le fait qu'elle avait été supprimée! Si vous avez besoin de marge et de remplissage pour être 0 accordez-vous une faveur à votre avenir et réglez-les sur 0 d'une manière séculaire. Utilisation réservée de display: contenu pour les cas spéciaux dans lesquels vous souhaitez réellement supprimer la boîte.

Il convient également de noter la différence entre l’affichage : contents et CSS Grid Layout. sous-réseau. Où display: contents supprime complètement la boîte, l’arrière-plan et la bordure de l’affichage, transformant un élément de la grille en une sous-grille conservant le style de boîte de cet élément et passant simplement à la taille de la piste afin que les éléments imbriqués puissent utilisez la même grille. Pour en savoir plus dans mon article, " CSS Grid Level 2: Voici la sous-grille ."

Problèmes d'accessibilité et affichage: contenus

Un problème sérieux est actuellement affiché: contenus pas utile pour la chose même pour laquelle il serait le plus utile. Les cas les plus évidents pour l'affichage : contents sont les cas où des cases supplémentaires sont nécessaires pour ajouter un balisage facilitant la compréhension du contenu par les utilisateurs de lecteurs d'écran ou d'autres dispositifs d'assistance.

The ul élément de notre liste dans le premier affichage: sommaire CodePen en est un exemple parfait. Vous pourriez obtenir le même résultat visuel en aplatissant le balisage et en n'utilisant pas de liste du tout. Cependant, si le contenu était sémantiquement une liste, il serait mieux compris et lu par un lecteur d'écran en tant que liste, elle devrait être marquée comme telle.

Si vous voulez ensuite que les éléments enfants fassent partie d'un élément flex ou la grille, comme si la boîte du ul n'était pas là, vous devriez pouvoir utiliser display: contents pour déloger la boîte et la rendre ainsi – tout en laissant la sémantique en place. Le mémoire descriptif indique que tel devrait être le cas,

«La propriété d'affichage n'a aucun effet sur la sémantique d'un élément: elles sont définies par le langage du document et ne sont pas affectées par CSS. . Mis à part la valeur none, qui affecte également la sortie auditive / vocale et l'interactivité d'un élément et de ses descendants, la propriété display affecte uniquement la présentation visuelle: elle a pour but de permettre aux concepteurs de modifier le comportement de la présentation un élément sans affecter la sémantique du document sous-jacent. ”

Comme nous l'avons déjà mentionné, la valeur none cache l'élément aux lecteurs d'écran, cependant, les autres valeurs de l'affichage sont purement là pour nous permettre de changer la façon dont les choses se présentent visuellement . Ils ne doivent pas toucher à la sémantique du document.

Pour cette raison, beaucoup d’entre nous ont été surpris de constater que display: contents supprimait en fait l’élément de l’arbre d’accessibilité dans le deux navigateurs (Chrome et Firefox) qui l'avaient implémenté. Par conséquent, changer la sémantique du document pour faire en sorte qu'un lecteur d'écran ne sache pas qu'une liste est une liste une fois que ul a été supprimée à l'aide de l'affichage : contents .

L’année dernière, Hidde de Vries avait écrit cette question dans son message « Une balise plus accessible avec display: contents » et soulevée de manière utile. problèmes liés aux différents navigateurs afin de les sensibiliser et de les amener à travailler sur un correctif. Firefox a partiellement résolu le problème mais des problèmes subsistent avec certains éléments tels que le bouton . Le problème est activement traité dans Chrome . Il existe également un problème pour WebKit . Je vous encourage à utiliser ces bogues si vous avez des cas d'utilisation à afficher: le contenu pourrait être affecté par les problèmes.

Jusqu'à ce que ces problèmes soient résolus et que les versions du navigateur qui présentaient ce problème ne soient plus utilisées, il vous faut soyez très prudent lorsque vous utilisez display: le contenu de tout ce qui véhicule des informations sémantiques et doit être exposé à la technologie d'assistance. Comme Adrian Roselli a déclaré

"Pour le moment, utilisez uniquement display: content si vous allez tester des technologies d'assistance et pouvez confirmer les résultats obtenus pour les utilisateurs."

vous pouvez utiliser en toute sécurité l'affichage : content sans ce souci. La première serait que vous deviez ajouter des balises supplémentaires pour créer des solutions de secours pour votre grille de dispositions flexibles dans les anciens navigateurs. Les navigateurs qui prennent en charge display: contents prennent également en charge la grille et la flexbox, vous pouvez donc afficher: contents pour supprimer les éléments redondants div . Dans l'exemple ci-dessous, j'ai créé une grille à base flottante, complétée par des wrappers de ligne.

J'utilise ensuite display: contents pour supprimer les wrappers de ligne afin de permettre à tous les éléments de devenir des éléments de grille et donc pouvoir faire partie de la mise en page de la grille. Cela pourrait vous donner un outil supplémentaire lors de la création de solutions de remplacement pour des mises en page avancées. En effet, si vous devez ajouter des balises supplémentaires, vous pouvez les supprimer avec display: content lorsque vous réalisez votre mise en grille ou en flex. Je ne crois pas que cette utilisation devrait poser problème – bien que, si quelqu'un dispose de meilleures informations d'accessibilité que moi et puisse signaler un problème, merci de le signaler dans les commentaires.

Wrapping Up

Cet article a examiné les valeurs de génération de boîte de la propriété display . J'espère que vous comprenez maintenant le comportement différent de l'affichage : none – qui supprime complètement une boîte et tous les enfants, et de display: contents qui supprime uniquement la boîte elle-même. Vous devez également comprendre les problèmes potentiels liés à l'utilisation de ces méthodes en matière d'accessibilité.

(il)