Intégration liquide : le CSS au fil de l’eau

Les intégrations sont soumises à de plus en plus de contraintes. Responsive Web Design, Multiplication des navigateurs et autres CMS impliquent des templates plus solides, plus résistants, et pourtant, plus souples. Et si Bruce Lee pouvait nous donner un conseil ?

Au delà des nombreuses leçons à tirer de cette vidéo, on peut retenir une idée majeure pour l’intégration : des blocks de contenu dimensionnés uniquement via leur conteneur.

TL;DR :

• Un bloc dimensionné via son parent sera réutilisable ailleurs en changeant seulement la taille du parent.
• Vous utilisez probablement déjà cette technique avec les grilles.

Exemple basique

(Attention, partie très simplifiée : Un exemple un peu plus concret avec des formulaires est disponible à la fin de l’article)

<style>
.container {
    padding: 10px;
    outline: 1px solid #ccc;
}
.container .bloc {
    display: block;
    width: 300px;
    text-align: center;
    background: #ccc;
}
</style>
<div class="container">
    <span class="bloc">Mon contenu</span>
    <span class="bloc">Mon autre contenu</span>
</div>

Si le bloc container fait la bonne taille, pas de souci visible :

Mais si le bloc container est devenu trop large, voici ce qui se passe :

La marge interne droite est devenue trop grande, le design est donc déséquilibré.

Exemple « liquide »

<style>
.container {
    width: 550px;
    padding: 10px;
    outline: 1px solid #ccc;
}
.container .bloc {
    display: block;
    text-align: center;
    background: #ccc;
}
</style>
<div class="container">
    <span class="bloc">Mon contenu</span>
    <span class="bloc">Mon autre contenu</span>
</div>

On ne dimensionne donc plus les blocs enfants, mais uniquement le parent. Les enfants (forcés à 100% ou en display:block selon les cas) se caleront ainsi sur la largeur du bloc parent, et s’adapteront à une modification de taille de ce dernier, ou même à un changement de parent.

Autre exemple, une image d’un post à max-width:100% sera affichée correctement si l’article est appelé dans une zone plus petite, ou qu’on décide de rajouter une sidebar rognant sur le contenu.

Mise en application

J’utilise cette technique, entre autres, dans les formulaires de CSSCommon : La largeur du formulaire(conteneur) est définie selon les besoins, et les éléments (input, textarea, etc) se calent automatiquement à 100%, afin de toujours terminer au même niveau de la colonne à droite. Le formulaire peut ainsi être réutilisé dans des sidebars, en n’ayant aucun besoin de le réintégrer, car les éléments s’étendront.

Cette technique simple est très souvent utilisée avec des zones de texte dans des grilles, afin que ce dernier s’étende automatiquement sur un nombre de colonnes indéfini. Les templates ainsi créés ont également moins de bugs sous des navigateurs anciens, les -nombreuses- collisions entre thème et structure étant dissociées.

Bon, ok, pas de CSS3 avancé, pas de HTML5, bref, rien de compliqué. Mais pourtant, votre template a gagné en souplesse : Une liste de posts intégrée avec cette méthode aura donc une largeur souple. Un passage sur deux colonnes, avec une largeur réduite de moitié ? Aucun souci. Du Responsive Web Design à mettre en place en urgence ? Hell yeah. Une erreur de DA ? Le contenu doit augmenter de 10px de large ? C’est réglé.

Je vous invite à la mettre en place partout où vous le pouvez, afin de rendre vos intégrations fluides … comme de l’eau.

Note : Sur Twitter, @Abroudin m’a demandé si ça se rapprochait d’un liquid layout. C’est en effet proche, mais avec un container à largeur fixe, et un contenu fluide.