La boîte en enfilade est sans conteste la plus mal connue des techniques de mises en forme existantes, et indubitablement la plus mal implémentée à l'heure actuelle puisque seul Presto, le moteur du navigateur Opera, peut prétendre à son support intégral. Elle peut pourtant apporter son quota de commodités qu'on aurait tort de négliger.
La valeur run-in possède la particularité d'attribuer à une boîte un comportement différent selon le type d'objet qui lui succède:
-
si l'élément suivant une boîte en enfilade est de type
inline, la boîte en enfilade est rendue sous forme de bloc -
si l'élément suivant une boîte en enfilade est de type
block, la boîte en enfilade est rendue sous forme d'élément en ligne et insérée au début de la boîteblockimmédiatement adjacente
Prenons le premier cas avec un exemple simple:
<strong>Brièvement…</strong> Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor…
Attribuer à notre élément de mise en exergue un comportement de boîte en enfilade résultera logiquement à transformer ce dernier en bloc, permettant par la même occasion d'en tirer les avantages inhérents, dont l'accès aux marges verticales et à l'occupation physique de l'entièreté de la largeur de son parent.
strong {
display:run-in;
border-bottom:1px solid #ccc;
margin-bottom:.8em;
padding-bottom:.8em;
}
L'adoption d'un mode d'affichage précis par la boîte en enfilade selon la structure avoisinante est flagrante lors de la modification d'un marquage antérieur. Dans le cas de notre exemple, englober notre texte de substitution (“Lorem ipsum…”) dans un paragraphe aura pour effet l'insertion à son origine de notre boîte de mise en exergue, désormais de type inline.
Cette ambivalence typique à run-in permet d'anticiper certains traitements automatisés et de prévoir un mode de rendu cohérent en fonction du contexte. D'autre part, certaines orientations graphiques précises demanderaient tantôt la modification d'une structure HTML qui n'aurait à priori pas à être altérée, tantôt un bricolage fragile basé sur le détournement de certaines propriétés. L'exemple suivant illustre l'intégration d'une direction visuelle particulière grâce au système de boîte en enfilade :
Notre structure HTML décrira un titre de second niveau et un paragraphe de contenu:
<h2>Notre société</h2>
<p>Lorem ipsum dolor sit amet…</p>
En gardant à l'esprit qu'h2 est maintenant un élément inline se trouvant au début de notre paragraphe, la construction du visuel pourra se faire ainsi:
h2 {
display:run-in;
background:#000;
color:#fff;
padding:70px 3px 1px;
margin-right:5px;
}
p {
border:1px solid;
padding:69px 20px 20px;
}
Rappelons que c'est la présence d'une boîte de type block — notre paragraphe — succédant à notre titre qui a dicté à ce dernier le comportement a adopter. Le résultat de cette transformation de marquage pourrait s'écrire:
<p>
<h2 style="display:inline">Notre société</h2>
Lorem ipsum dolor sit amet..
</p>
Bien entendu, cette écriture invalide et pataude ne sert qu'à visualiser la métamorphose de notre bloc de titre. Notons finalement à des fins pédagogiques que la valeur compact — initiée par CSS2 puis ôtée de CSS2.1 — présentait un comportement passablement similaire.