Les deux valeurs de l'affichage

Une disposition de grille ou de grille commence par l'affichage de : flex ou de : grille . Ces méthodes de mise en forme sont des valeurs de la propriété CSS display . Nous avons tendance à ne pas parler beaucoup de cette propriété seule, mais plutôt à nous concentrer sur les valeurs de flex ou grid . Cependant, il y a des choses intéressantes à comprendre à propos de display et comment cela est défini pour vous simplifier la vie lorsque vous utilisez CSS pour la mise en page.

Dans cet article, le premier d'une série courte, je vais jeter un regard sur la façon dont les valeurs de l'affichage sont définis dans la spécification de niveau 3. Cela modifie la façon dont nous avons défini l'affichage dans les versions antérieures de CSS. Bien que cela puisse paraître inhabituel au début pour ceux d'entre nous qui utilisent le CSS depuis de nombreuses années, je pense que ces changements aident vraiment à expliquer ce qui se passe lorsque nous modifions la valeur de l'affichage sur un élément. 19659006] Eléments en bloc et en ligne

L'une des premières choses que nous enseignons aux personnes novices en CSS sont les concepts d'éléments en bloc et en ligne. Nous allons expliquer que certains éléments de la page sont display: block et qu’ils ont certaines caractéristiques de ce fait. Ils s'étendent dans la direction en ligne, occupant tout l'espace disponible. Ils se cassent sur une nouvelle ligne; nous pouvons leur donner la largeur, la hauteur, la marge ainsi que le remplissage, et ces propriétés repousseront d'autres éléments de la page.

Nous savons également que certains éléments sont affichés: inline . Les éléments en ligne sont comme des mots dans une phrase; ils ne cassent pas sur une nouvelle ligne, mais réservent un caractère d’espace blanc entre eux. Si vous ajoutez des marges et des marges intérieures, cela s'affichera mais cela ne repoussera pas les autres éléments.

Le comportement des éléments en bloc et des éléments en ligne est fondamental pour CSS et le fait qu'un document HTML correctement marqué est lisible par défaut. Cette disposition est appelée «disposition en bloc et en ligne» ou «écoulement normal», car c'est ainsi que les éléments se présentent s'ils ne leur font rien d'autre.

Valeurs intérieure et extérieure de display

Nous comprenons les éléments en bloc et les éléments en ligne, mais que se passe-t-il si un élément est affiché: grille ? Est-ce quelque chose de complètement différent? Si nous regardons un composant sur lequel nous avons spécifié l'affichage : grid en termes d'élément parent dans la présentation, il se comporte comme un élément de niveau de bloc . L'élément s'étendra et prendra autant de place que possible dans la dimension en ligne, il commencera par une nouvelle ligne. Il se comporte comme un élément de bloc en ce qui concerne son comportement par rapport au reste de la mise en page. Nous n’avons pas dit afficher: le bloc si, ou avons-nous?

Il s’avère que c’est le cas. Dans Niveau 3 de la spécification d'affichage la valeur de display est définie comme deux mots clés. Ces mots-clés définissent la valeur extérieure de display, qui sera inline ou block et définissent donc le comportement de l'élément dans la présentation par rapport aux autres éléments. Ils définissent également la valeur intérieure de l'élément – ou le comportement des enfants directs de cet élément.

Cela signifie que lorsque vous dites display: grid vous dites en réalité : grille de bloc . Vous demandez un conteneur de grille de niveau bloc. Un élément qui aura tous les attributs de bloc – vous pouvez lui donner la hauteur et la largeur, la marge et le remplissage, et il s’étira pour remplir le conteneur. Les enfants de ce conteneur, cependant, ont reçu la valeur intérieure de la grille de sorte qu'ils deviennent des éléments de la grille. Le comportement de ces éléments de grille est défini dans la spécification CSS de la grille: la spécification display nous permet de dire au navigateur que c'est la méthode de présentation que nous souhaitons utiliser.

Je pense que cette méthode de présentation penser à afficher est incroyablement utile; cela explique directement ce que nous faisons avec différentes méthodes de mise en page. Si vous deviez spécifier l'affichage : inline flex qu'attendriez-vous? Espérons qu'une boîte qui se comporte comme un élément en ligne, avec des enfants qui sont des éléments flexibles.

Il y a quelques autres choses bien expliquées en pensant à afficher de cette nouvelle manière, et je vais prendre une examinez-en certaines dans la suite de cet article.

Nous revenons toujours à un écoulement normal

Lorsque vous réfléchissez à ces propriétés d'affichage interne et externe, il peut être utile de réfléchir à ce qui se passe si nous ne gênons pas. autour de la valeur d'affichage du tout. Si vous écrivez du HTML et que vous l'affichez dans un navigateur, vous obtenez le résultat suivant: Bloquer et disposition en ligne ou Flux normal. Les éléments affichent les éléments block ou inline .

. L’exemple ci-dessous contient des balises que j’ai transformées en objet multimédia en rendant l’affichage div : flex (les deux enfants directs) devenus des éléments flexibles. l'image est maintenant dans une rangée avec le contenu. Si vous voyez dans le contenu, cependant, il existe un en-tête et un paragraphe qui s'affichent à nouveau dans un flux normal. Les enfants directs de l'objet multimédia sont devenus des éléments flexibles; leurs enfants reviennent à un flux normal sauf si nous modifions la valeur d'affichage sur l'élément flex. Le conteneur Flex lui-même est une boîte de bloc, comme vous pouvez le constater par le fait que la frontière s'étend jusqu'au bord de son parent.

Si vous travaillez avec ce processus, le fait que les éléments de votre page se présentent avec cette jolie structure de flux normale et lisible, plutôt que de le combattre et d’essayer de tout placer. , CSS est beaucoup plus facile. Vous êtes également moins susceptible de tomber dans des problèmes d'accessibilité, car vous travaillez avec l'ordre des documents, ce qui est exactement ce que fait un lecteur d'écran ou une personne parcourant le document.

Expliquer flow-root Et inline-block

La valeur de inline-block est également susceptible d'être familière à beaucoup d'entre nous qui pratiquons le CSS depuis un certain temps. Cette valeur permet d'obtenir une partie du comportement de bloc sur un élément inline . Par exemple, un élément inline-block peut avoir une largeur et une hauteur. Un élément avec display: inline-block se comporte également de manière intéressante en ce sens qu'il crée un écluse B F oumatting C . BFC).

Un BFC fait des choses utiles en termes de mise en page, par exemple, il contient des flottants. Pour en savoir plus sur les contextes de formatage de blocs, consultez mon article précédent « Comprendre le formatage CSS et le contexte de formatage de bloc ." Par conséquent, en disant affichez: inline-block vous donne un cadre en ligne qui établit un BFC.

Comme vous le découvrirez (si vous lisez l'article susmentionné sur le contexte de formatage de blocs), il existe une nouvelle valeur d'affichage qui crée également explicitement un BFC. C'est la valeur de flow-root . Cette valeur crée un BFC sur un bloc plutôt qu'un élément en ligne.

• affichage: inline-block vous donne un BFC sur une boîte en ligne.
• affichage: flow-root vous donne un BFC sur une boîte de bloc.

Vous pensez probablement maintenant que tout cela est un peu déroutant: pourquoi avons-nous deux mots-clés complètement différents ici, et qu'est devenue la syntaxe à deux valeurs dont nous parlions auparavant? Ceci nous amène clairement à la chose suivante que je dois expliquer à propos de l'affichage à savoir le fait que CSS possède une histoire dont nous devons traiter en termes de propriété de l'affichage display .

Legacy Valeurs Of Display

La spécification CSS2 détaillait les valeurs suivantes pour la propriété display :

• inline
• block
• inline-block
• liste-item
• aucune
• table
• table en ligne

Les propriétés internes de la table, telles que sont également définies ] [dontnousnetraitonspasdanscetarticle

Nous avons ensuite ajouté à celles-ci quelques valeurs d’affichage, afin de prendre en charge les schémas de flexion et de grille:

• grid
• inline-grid
• flex
• inline-flex

Note : Le fascicule définit également les rubriques ruby ​​ et [19459]. 018] inline-ruby pour prendre en charge Ruby Texte dont vous pouvez lire la description dans la spécification Ruby .

Il s’agit de valeurs uniques pour la propriété display défini avant la mise à jour de la spécification pour expliquer CSS Layout de cette manière. Le fait que nous n'interrompions pas le Web est une chose très importante à propos de CSS. nous ne pouvons pas simplement changer les choses . Nous ne pouvons pas soudainement décider que tout le monde devrait utiliser cette nouvelle syntaxe à deux valeurs et, par conséquent, chaque site Web jamais construit utilisant la syntaxe à une seule valeur ne fonctionnera pas tant que le développeur ne le corrigera pas! profitez de cette liste d'erreurs dans la conception de CSS qui sont moins d'erreurs dans de nombreux cas que des choses conçues sans boule de cristal pour voir dans le futur! Cependant, le fait est que nous ne pouvons pas casser le Web, c'est pourquoi nous nous trouvons dans cette situation où, à l'heure actuelle, les navigateurs prennent en charge un ensemble de valeurs uniques pour l'affichage, et la spécification se déplace vers deux valeurs pour l'affichage.

Pour contourner ce problème, nous devons spécifier des valeurs anciennes et courtes pour l'affichage, qui incluent toutes ces valeurs simples. Cela signifie qu'un mappage peut être défini entre des valeurs uniques et de nouvelles valeurs de deux mots clés. Ce qui nous donne le tableau de valeurs suivant:

Pour expliquer comment cela fonctionne, nous pouvons penser à un conteneur de grille. Dans le monde à deux valeurs, nous créerions un conteneur de grille au niveau du bloc avec:

 .container {
    affichage: grille de bloc;
}

Cependant, le mot-clé legacy signifie que ce qui suit fait la même chose:

 .container {
    affichage: grille;
}

Si nous voulions plutôt un conteneur de grille en ligne, nous utiliserions dans le monde à deux valeurs:

 .container {
    affichage: grille en ligne;
}

Et si vous utilisez les valeurs héritées:

 .container {
    affichage: inline-grid;
}

Nous pouvons maintenant revenir au début de la conversation et regarder l'affichage : inline-block . En regardant le tableau, vous pouvez voir que cela est défini dans le monde à deux valeurs comme suit: : inline flow-root . Cela correspond maintenant à l'affichage : flow-root qui, dans un monde à deux valeurs, serait à l'affichage: block flow-root . Un peu de rangement et une clarification de la définition de ces choses. Une refactorisation de CSS, si vous voulez.

Prise en charge du navigateur pour la syntaxe à deux valeurs

Pour l'instant, les navigateurs ne prennent pas en charge la syntaxe à deux valeurs pour la propriété display . Le bogue d'implémentation de Firefox peut être trouvé ici . L'implémentation - quand cela se produit - impliquerait essentiellement d'aliaser les valeurs héritées vers les versions à deux valeurs. Il faudra donc probablement attendre un bon moment avant que vous puissiez réellement utiliser ces versions à deux valeurs dans votre code. Cependant, ce n’est vraiment pas le but de cet article. Au lieu de cela, je pense que regarder les valeurs d'affichage à la lumière du modèle à deux valeurs aide à expliquer en grande partie ce qui se passe.

Lorsque vous définissez la mise en page sur une zone en CSS, vous définissez le sort de cette zone. en termes de comment il se comporte par rapport à toutes les autres cases du schéma . Vous définissez également le comportement des enfants de cette boîte. Vous pouvez penser ainsi bien avant de pouvoir déclarer explicitement les valeurs comme deux choses distinctes, car les mots-clés hérités correspondent à ces valeurs. Cela vous aidera à comprendre ce qui se passe lorsque vous modifiez la valeur de l'affichage .

(il)