28172 sujets

CSS et mise en forme, CSS3

Faire de l'héritage en css

Hello,

J'étais en train de faire quelques expérimentations, et j'aimerais votre avis sur une petite technique qui viens de me traverser l'esprit.

En utilisant un sélecteur d'attribut sur la classe avec un sélecteur de sous chaines, on peux obtenir des comportement similaires pour plusieurs classes préfixées à l'identique.

Du code valant mieux qu'un long discours : 
<!DOCTYPE html>

<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
div {width: 500px; height: 100px; background: lightgrey;}
[class^="wrapper"] {position: relative; border: solid red 2px;}
[class^="wrapper"]:after {content: attr(class); display: block;}
.wrapper-machin {color: blue}     
.wrapper-autre-machin {color: red}     
  </style>
</head>

<body><div id="main">
    <div class="toto">bla</div>
    <div class="wrapper-machin">bla</div>
    <div class="wrapper-autre-machin">bla</div>
</div></body>
</html>


et en action.

Visiblement, ça tourne partout sauf IE6.

Seule contrainte, si on applique plusieurs classe sur la balise, la "super classe" doit être la première.

Qu'en pensez vous?
Mouais... pourquoi faire simple quand on peut faire compliqué...


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Test</title>

  <style>
div {width: 500px; height: 100px; background: lightgrey;}
.wrapper {position: relative; border: solid red 2px;}
.wrapper:after {content: attr(class); display: block;}
.machin {color: blue}     
.autre {color: red}     
  </style>
</head>

<body><div id="main">
    <div class="toto">bla</div>
    <div class="wrapper machin">bla</div>
    <div class="wrapper autre">bla</div>
</div></body>
</html>

Modifié par jb_gfx (05 Aug 2011 - 19:29)
Administrateur
Multiclasse upload/39-leeloo.jpg

Un bon point si ça fonctionne sous IE7.
Par contre devoir placer la classe au début ou bien rajouter un sélecteur "contient une espace suivi du préfixe" en plus de "commence par le préfixe", c'est contraignant.
Si je me plante pas, la priorité est celle d'un attribut et pas du tout celle d'une classe, va y avoir des surprises avec ça ! Smiley rolleyes
Et quel est l'impact sur les perfs ? C'est pas primordial pour moi (relativement à du JS, des sélecteurs CSS peu performants ont moins d'impact) mais pour un site à fort trafic ou avec plein de manipulation du DOM ça l'est, vu que là c'est quand même un sélecteur d'attribut. Le seul truc (bien) pire c'est "*" en termes de perfs vu que là tous les éléments de html à span sont parcourus pour voir s'ils auraient ce genre de classe ...
Hello,

Felipe a écrit :
Le seul truc (bien) pire c'est "*" en termes de perfs vu que là tous les éléments de html à span sont parcourus pour voir s'ils auraient ce genre de classe ...


…et si en plus c'est pour faire un vieux *{outline:0} des familles… Smiley confus


C'est pas forcément évident que l'usage du sélecteur universel * soit plus lourd que de redéfinir (notamment) les marges pour chaque élément, aussi tu fais bien de le rappeler. Je suis d'ailleurs pas certain qu'il y ait un article à ce sujet sur Alsa…

Edit : peut-être à rajouter dans cet article ? On y parle du problème d'accessibilité du fameux outline mais pas du fait que tous les éléments du DOM sont parcourus…
Edit2 : c'est évoqué sur l'article consacré aux resets css, donc j'ai rien dit.
Modifié par audrasjb (06 Aug 2011 - 12:22)
Re (avec un peu de lag)
jb_gfx a écrit :
Mouais... pourquoi faire simple quand on peut faire compliqué...


Comme je l'ai dit, c'est plus de l'expérimental qu'autre chose.

Pour poser un peu le décor, j'essaie en général de factoriser un max les comportements en partant du plus générique au plus spécifique (rien de bien révolutionnaire là-dedans me direz-vous).

Et que pour éviter que ça ne devienne trop anarchique, j'essaie dans la mesure du possible de préfixer mes "sous-classes" avec leur "classe mère".

Sauf que sur un gros projet, ou avec un design un peu anarchique (une div, une couleur pour caricaturer), on se retrouve vite avec un truc fugly du genre: 
<div class="machin machin-sousMachin machin-sousMachin-sousSousMachin">


Après réflexion, je me rends compte que ce n'est pas super utilisable en prod (voire pas du tout), ne serait-ce qu'à cause du fait qu'un espace avant la classe, et c'est mort.

Mais bon, faut bien essayer des trucs parfois Smiley cligne
Sujet clos
Aller à