Passer un paramètre à une classe CSS

Version imprimable

14/08/2015, 21h49
laurentSc

Passer un paramètre à une classe CSS
Bonsoir,

une petite recherche n'ayant rien donné, voici ma question :
j'ai n classes du type :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 .table_cellspacing2 { border-spacing: 2px; border-collapse: collapse; } .table_cellspacing3 { border-spacing: 3px; border-collapse: collapse; } etc
et au lieu de les multiplier, je voudrais faire un truc du style :
Code:

1 2 3 4 5 .table_cellspacing(param) { border-spacing: param px; border-collapse: collapse; }
que je pourrais appeler par exemple comme

Code:

<table class="table_cellspacing(3)">...</table>

Est-ce possible ?
15/08/2015, 09h26
vttman

Hello LaurentSc,
je pense qu'il faudra se tourner vers des préprocesseurs CSS
pour faire ça
=>
http://blog.soat.fr/2014/07/preproce...-less-vs-sass/
15/08/2015, 10h53
laurentSc

Merci pour ta réponse ; cela dit, même la version soi-disant pour les débutants (less) me semble pas simple...Donc tant pis...

Et pourquoi pas avec php?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
function tablecell($num) {
echo '<table class="table_cellspacing'.$num'">'."\n";
?>
<!doctype html>
<html>
<head>
...
...
<?php tablecell(3); ?>
...
</table>

16/08/2015, 10h27
laurentSc

Quand j'ai vu ta réponse (hier), elle m'a plu mais l'ai mise de côté pour plus tard et là où je voulais me pencher dessus, je vois un inconvénient : certes, l'appel est paramétré mais ça n'évite pas la création de multiples classes CSS...
16/08/2015, 15h08
Invité

Bonjour Laurent,
sans vouloir te vexer...

Tu as déjà du mal à comprendre les notions de BASE en CSS, PDO, PHP.......

POURQUOI t'acharnes-tu sans arrêt à vouloir TE/NOUS compliquer la vie ??????????? :weird:
Et, par la même occasion, à MOBILISER des BÉNÉVOLES sur DVP pour REPONDRE à tes questions ?

Tout ça pour "économiser" 4 lignes de code CSS !!!!!!!!!!! :marteau:
16/08/2015, 16h16
laurentSc

Mon objectif n'était pas de compliquer mais de simplifier...

En fait, des classes CSS pour fixer la propriété width, pour ce site, j'en ai pas 4 mais 18...et y a d'autres propriétés du même genre.

Tu peux aussi facilement limiter le nombre de lignes CSS en réorganisant :

Code:

<table class="table spacing3">

Code:

<table class="table spacing4">
Code:

1 2 3 .table { border-collapse:collapse; /* et toutes les autres propriétés similaires aux différentes classes */ } .spacing3 { border-spacing:3px; } .spacing4 { border-spacing:4px; }

19/08/2015, 00h02
laurentSc
OK, merci Bisunurs ; dans le cas des classes table_cellspacingx, ça convient mais dans le cas des 18 classes pour width, non :
Code:

1 2 3 4 .widthXXX { width: XXX px; }
19/08/2015, 09h12
Bisûnûrs

Oui, il faut faire 18 classes différentes, mais chacune de ces classes ne comprendront qu'une seule ligne, vu que tu auras bien pensé à agréger les données similaires dans une autre classe. Ton fichier CSS en sera que plus léger et plus lisible.

Mais, soit dit en passant, si tu as 18 classes pour les largeurs, c'est que tu as un grave problème de conception.

Laurent,
il faut DORMIR LA NUIT, et OUVRIR LES YEUX LE MATIN !!!
Code:

1 2 3 .widthXXX { width: XXX px; }
Comme d'habitude :

1/ Tu n'es pas capable de mettre le CODE REEL (celui qui ne marche pas) !!

2/ Tu n'es même pas capable, en écrivant ton code moisi, de VOIR que tu as mis un ESPACE entre XXX et px !!!
Évidemment, ça ne marche pas !!! :roll:

3/ Je :plusser: Bisunurs : ce que tu cherches à faire est une aberration, voire une stupidité.
Mettre dans ton code HTML des class="widthxx" équivaut à écrire du CSS online style="width: xxpx;",
puisque, si tu dois modifier la largeur, tu devras le faire DANS le code HTML (en remplaçant par class="widthyy")!!
C'est là toute l'aberration !

Une feuille de style CSS externe permet de modifier le style EN DEHORS du code HTML.

C'est clair, ou pas ??

4/ Le seul usage possible/utile est avec les media queries :
Code:

1 2 3 4 5 6 <div class="width50"> ... </div> <div class="width50"> ... </div>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 /* desktop */ @media screen and (min-width:1025px) { .width50 { width:33.33%; float:left; clear:none; } /* 3 blocs par ligne */ } /* tablet */ @media screen and (min-width:641px) and (max-width:1024px) { .width50 { width:50%; float:left; clear:none; } /* 2 blocs par ligne */ } /* phone */ @media screen and (max-width:640px) { .width50 { width:100%; float:none; clear:both; } /* 1 bloc par ligne */ }

19/08/2015, 18h37
laurentSc
OK, si j'ai mis un espace dans mon post, c'est pour augmenter la lisibilité, sans faire attention que du coup, c'était syntaxiquement incorrect, par contre, dans le vrai fichier CSS, je ne les ai pas mis.

Ce que tu me fais réaliser, c'est l'aberration de la chose.
En fait, comme je l'ai déjà dit, je suis en train de modifier un vieux code et notamment de corriger tout ce qui est obsolète. La raison des 18 classes et de l'aberration (des classes dont le nom devrait changer si on changeait la valeur), vient du fait que dans ce vieux code, la largeur était modifiée dans le code html (exemple : <table width="100%">) et donc pour supprimer ça, à chaque fois, j'ai créé une classe CSS (pour l'exemple c'était .width100pour100). C'est clair que cette conception est nulle. Je vais donc tout reprendre et créé seulement 5 classes (par exemple) : width_minuscule, width_petit, width_moyen, width_grand et width_tres_grand et par exemple :
Code:

1 2 3 4 .width_minuscule { width:5%; }
ça serait mieux ?