Sélecteur CSS de frère adjacent (Dirty Grids Done Dirt Cheap)

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Sélecteur CSS de frère adjacent (Dirty Grids Done Dirt Cheap)

L’ajout des classes CSS pour spécifier la largeur des colonnes dans le code HTML est le lot des frameworks CSS qui proposent un mécanisme pour créer une grille de mise en pages. Pour couronner le tout, la plupart des frameworks ont besoin d’une classe pour la première colonne (.first pour The Simpler Grid) ou la dernière colonne (.last pour Blueprint CSS) voire pour la première et la dernière colonne (.alpha et .omega pour 960 Grid System) pour annuler les marges droites et/ou gauches attribuées par avance aux colonnes.

Dans ma liste de plus de 30 frameworks CSS, seul inuit.css s’affranchit de ces classes .first, .last, .alpha ou .omega. Mais c’est au prix d’un décalage global du container (.grids, en l’occurrence) de la valeur de la gouttière. Je suis assez admiratif de cette technique et je m’en veux de ne pas l’avoir trouvée au lieu de faire l’intéressant avec mon mashup de Blueprint CSS, The Simpler Grid, 960.gs ^^

Sélecteur de frère adjacent

Dans mes mises en page web, j’utilise souvent un nombre de colonne différent selon le contexte : contenu principal accompagné de deux ou trois colonnes en page d’accueil; contenu principal plus une colonne lorsque j’affiche le contenu d’un article seul. C’est là qu’intervient le sélecteur de frère adjacent, symbolisé par le signe «+».

La spécification des CSS 2 nous apprend que :

Les sélecteurs d’enfants adjacents suivent une syntaxe de cette forme : E1 + E2, où E2 est le sujet du sélecteur. Celui-ci est vérifié quand E1 et E2 ont le même parent dans l’arbre du document et quand E1 y précède immédiatement E2.

J’avais l’habitude de me servir de ce sélecteur pour supprimer l’alinéa du premier paragraphe qui n’a littéralement aucune raison d’être ici, puisque par définition, il n’y a rien à mettre «à la ligne» :

p + p {
    text-indent: 1em;
}
Ici, étant donné que le deuxième p est le sujet du sélecteur, on sous-entend que le premier n’est pas indenté.

.sidebars + .sidebars = grille ?

Je me suis dit qu’il pourrait être intéressant d’utiliser cette propriété dans le cas où le nombre de colonnes varie selon le contexte, sans être obligé de définir ce contexte de manière trop précise. L’exemple qui suit, que j’aurais pu mettre en place pour des sites de casinos en ligne (je sais que vous êtes joueurs), illustre à merveille ce concept :-)

#sidebar { margin-left: 20px; }
#sidebar .sidebars + .sidebars {
    margin-left: 20px;
}
#sidebar contient entre une et deux colonnes. Lorsqu’une seule .sidebars est présente, je n’ai pas besoin de spécifier de marge gauche (1) (celle de #sidebar suffit à créer la gouttière entre #main (le contenu de l’article) et #sidebar). Lorsqu’il y a deux .sidebars dans #sidebar, seule la deuxième doit avoir cette marge gauche pour créer la gouttière. Et voilà !

(1) j’utilise une marge gauche pour créer des gouttières afin de pouvoir annuler la marge du premier élément — au cas où j’aurais appliqué un float: left et un margin-left: 20px à toutes mes colonnes — avec le pseudo-sélecteur :first-child (CSS 1) pris en charge plus largement que :last-child qui nous arrive tout juste avec CSS 3.

Dans le cas d’une troisième .sidebars, il suffirait donc d’utiliser une déclaration du type :

#sidebar .sidebars + .sidebars + .sidebars {
    margin-left: 20px;
}

On s’en «grille» une ?

Voici un exemple d’une rangée de 12 colonnes bâtie sur ce principe avec une version en ligne de cette  grille CSS (notez l’utilisation des rôles WAI-ARIA en action) :

#page {
    width: 940px;
    margin: 0 auto;
    text-align: center;
}
[role="banner"],
[role="contentinfo"] {
    clear: both;
    background: #333;
    color: #eee;
}
[role="main"] > div {
    width: 60px;
    float: left;
    background: #eee;
    margin: 1.539em 0;
}
[role="main"] > div + div {
    margin-left: 20px;
}

Un système encore expérimental

Cette utilisation du sélecteur d’enfant adjacent est encore expérimentale et devrait faire l’objet de tests plus approfondi pour voir où peut mener cette technique qui ne nécessite à priori aucune intrusion intempestive dans le code HTML si votre page est bien structurée (je suis sûr que c’est le cas chez tout le monde, non ?). Je compte sur vous pour tester ce concept qui en a sous la botte ou le talon aiguille afin d’en tirer la substantifique moelle. Merci d’avance :)

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



3 commentaires pour “Sélecteur CSS de frère adjacent (Dirty Grids Done Dirt Cheap)”

  1. Guillaume L. dit :

    pour les exemples présentés ici, :first-child fait bien l’affaire et parait plus logique. mais j’imagine que dans d’autres cas, le selecteur d’élément adjacent a toute son utilité. Merci pour cette article, je me pencherai plus sur cette technique d’autant que c’est supporté par ie7

  2. Corinne dit :

    Sinon, pour s’affranchir des inconvénients inhérents aux grilles statiques, il y a la possibilité d’avoir recours à une grille dynamique. Vincent détaille le concept sur typographisme : http://typographisme.net/post/Macro-typographie-sur-le-Web-–-Less-is-more

  3. [...] Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? Sélecteur CSS de frère adjacent (Dirty Grids Done Dirt Cheap) [...]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site