La tête dans le Flux !

table-cell et responsive design

Il y a quelques jours, Vincent de Oliveira (futur orateur de notre presque célèbre Kiwi Partÿ) s’est amusé avec display table en vue de créer un gabarit “responsive”, c’est à dire qui s’adapte aux différentes résolutions d’écran.

Sa conclusion fut que l’exercice n’est pas aussi simple que prévu, et qu’en production il faudrait cumuler les imbrications d’éléments.

Étant un grand fan des tableaux, j’ai bien évidemment été frustré par ce verdict. Il n’en fallait pas plus pour me titiller et j’ai pris ça pour un défi à relever.

Le modèle d’affichage de type “display: table” a des particularités extraordinaires. L’une d’entre-elles est d’automatiquement générer des conteneurs anonymes. Par exemple, si un élément de type display: table-cell n’a pas de parent physique sous forme table-row ou table, il l’invente.

Le mécanisme des ancêtres anonymes est pour le moins complexe et alambiqué, mais va bien nous arranger pour relever le défi lancé.

En fait, je ne vais pas faire durer le suspense : il suffit de changer le rendu d’un seul élément en table-cell sans intervenir sur ses frères.

Vous verrez le résultat sur cette page de test.

Explications :

• En mode grand écran, chaque élément est affiché en mode de rendu “table-cell”. Il s’affichent donc 3 colonnes.
• En mode “tablette”, un seul des éléments passe en table-cell. Il se crée alors un contexte anonyme autour de lui (il s’invente un parent de type “table-row” et un grand-père “inline-table” ?) qui conduit à un affichage sous forme de 2 colonnes.
• En mode “mobile”, les éléments sont affichés sous forme de blocs, les uns sous les autres pour ne former qu’une seule colonne

Je vous disais bien que les tableaux de mise en page, c’est bien ! :)

Des CSS conditionnels ?

Les sélecteurs d’adjacence directe (signe “+”) et indirecte (signe “~”), respectivement issus des spécifications CSS2.1 et CSS3 mais qui ont la bonne idée d’être tous deux supportés depuis IE7 comptent parmi mes chouchous pour de nombreuses raisons.

L’une de ces raisons est qu’ils ouvrent la voie à des techniques de mises en forme conditionnelles : si je suis dans ce contexte, alors il va se passer ceci.

Quelques exemples concrets ne font jamais de mal…

Marge à gauche… ou pas

• Contexte : J’ai parfois une image à gauche de mes contenus, et parfois pas. L’image est flottante à gauche et le reste des contenus aura une marge à gauche de la largeur de l’image… mais ne doivent pas avoir de marge gauche s’il n’y a pas d’image.
• Sélecteur : img ~ *
• Explications : Ce sélecteur cible tous les éléments frères directement ou indirectement placés après une image. Il ne cible des éléments que s’il y a une image avant eux.
• Exemple : http://www.goetter.fr/livres/

Oh label verte !

• Contexte : Dans un formulaire, lors du clic sur une case à cocher, je souhaite que l’étiquette associée soit mise en exergue.
• Sélecteur : input:checked + label
• Explications : Le sélecteur cible un label qui suit immédiatement un champ coché, il ne s’active donc que si la case est cochée.
• Exemple : page d’inscription aux formations Alsacréations

Un bouton de soumission sous condition

• Contexte : Le bouton de soumission d’un formulaire ne doit apparaître que lorsqu’une case requise (par exemple CGV) est cochée.
• Sélecteur : input:invalid ~ [type=submit]
• Explications : un champ requis non rempli ou coché est considéré comme statut invalide. Le sélecteur masque donc (display none par ex.) le champ submit tant que la case n’est pas cochée.
• Exemple : http://www.ie7nomore.com/fun/form/

Planquez-vous derrière moi !

• Principe : Un menu de navigation apparaît au clic sur un lien. Tout le reste des contenus de la page doit être semi masqués (opacité réduite)
• Sélecteur : nav:target ~ section
• Explications : le sélecteur :target indique la cible d’une ancre. Lorsque la navigation apparaît, toutes les sections suivantes dans le DOM bénéficieront d’une opacity de 0.2 par exemple.
• Exemple : http://www.ie7nomore.com/fun/responsive-menu/menu2.html (réduisez la fenêtre)

Autres idées ?

Pas toujours très intuitif et explicite, ce type de sélecteur - compatible depuis des lustres je le rappelle - ouvre de larges horizons qui semblent généralement réservées à JavaScript.

Pour ma part, je ne me lasse pas de trouver chaque jour de nouveaux exemples concrets d’usage des sélecteurs d’adjacence.

Si vous avez d’autres expériences de ce type à partager ici, n’hésitez pas !

Une infinité d’arrière-plans en CSS2

Il communément admis qu’il n’est possible d’afficher qu’une seule image d’arrière-plan sur un élément en CSS. Seul le récent CSS3 (réservé à IE9 et le reste du monde) propose un module “multi-background”.

Trois arrière-plans sur un élément

Pourtant, les trop peu connus pseudo-éléments :before et :after (ou ::before et ::after dans leur syntaxe CSS3), permettant de générer du contenu via CSS, acceptent une valeur telle que url() afin d’afficher une image de fond :

div:before {content: url(image.png);}

Cet élément généré :before ou :after peut bien évidemment se combiner aux autres et cette syntaxe permet de disposer de 3 images d’arrière-plan sur mon div :

div {background-image: url(image1.png);}
div:before {content: url(image2.png);}
div:after {content: url(image3.png);}

De plus, les éléments générés sont entièrement stylables : rien ne vous empêche de positionner, de modifier leur valeur de display, etc.

Cinq arrière-plans sur un élément

…Et puisque je suis libre de les styler comme bon me semble, rien ne m’empêche de leur appliquer une image d’arrière-plan classique via la bonne vieille propriété background-image :

div:before {
background-image: url(image1.png);
content: url(image2.png);}

Ce qui permet d’afficher 5 images d’arrière-plan sur un seul et unique élément de ma page :

div {background-image: url(image1.png);}
div:before {background-image: url(image2.png); content: url(image3.png);}
div:after {background-image: url(image4.png); content: url(image5.png);}

Un nombre infini d’arrière-plans sur un élément

Vous avez peut-être déjà cotoyé ce genre de syntaxe :

a:after {content: " (" attr(hreflang) " )" ;}

Cette syntaxe est une combinaison de 3 valeurs de content : une chaîne de caractère ” (” puis une fonction renvoyant la valeur de hreflang, puis enfin une autre chaîne de caractère ” )”.

Tout ceci pour illustrer qu’il est possible d’appliquer plusieurs valeurs à la propriété content tout simplement en les séparant par des espaces.

Et saviez-vous que cela est également possible pour la valeur-fonction url() de content ?

Cette possibilité nous permet tout simplement de cumuler autant d’images d’arrière-plan que l’on souhaite, et ce uniquement via la propriété content :

div:before {content: url(image1.png) url(image2.png) url(image3.png) url(image4.png) url(image5.png) ...;}

Retenez l’astuce pour briller en soirée geek, car au final et en pratique elle ne sera guère utile puisqu’il n’est pas possible de cibler et styler chacune des images de fond : seul l’élément content dans son ensemble peut être ciblé.

Mais si vous trouvez de vrais cas concrets intéressants illustrant cette technique, je suis preneur.