Expression régulière en CSS

Version imprimable

08/09/2024, 17h39
TocToc72

Expression régulière en CSS

Bonjour à tous,

Je code depuis de nombreuses années en CSS, mais j'ai un peu lâché ces derniers temps l'évolution des sélecteurs « complexes ».
Voici ce que je souhaiterai faire :

Dans un sommaire avec un nombre conséquent d'entrées du style :
marque (en un ou plusieurs mots), modèle
Je souhaiterai mettre la marque en gras.
Donc pour le moment j'ai mis :

Code:

<strong>marque</strong>, modèle

Problème je commence à avoir un nombre de DOM trop important et je me demandai s'il n'existait pas une expression régulière comme en PHP pour dire :
« mettre en gras tous les caractères se situant avant la virgule, dans la balise li »

Ce qui réduirait énormément le code et le poids de la page, et les DOM.

Merci pour votre lecture et pour vos réponses
09/09/2024, 20h03
mathieu

je n'ai pas vu de sélecteurs qui agissent en fonction du contenu :
https://www.w3.org/TR/selectors-3/#selectors

Citation:

Envoyé par TocToc72

un nombre de DOM trop important

trop important pour l'édition de la page ou plutot à l'affichage ?

si l'édition pose souci, vous pouvez voir du côté serveur si vous pouvez utiliser une base de données pour générer le contenu.

et si le souci est dans la navigateur, pour le téléchargement ou l'affichage, vous pouvez peut-être découper le contenu en plusieurs pages. et éventuellement utiliser javascript pour que ça soit plus pratique à utiliser pour les utilisateurs.

et pourquoi ne pas le faire en JS ? tu fais une requete ajax pour recuperer toutes tes infos (marques/models) et tu les ajoute a la page en specifiant des classes (pour le style)
=> l'ajax serait un json (leger) et le JS ajouterai des classes css simples

Code:

<div id="container"></div>

Code:

1
2
3
4
5
6
.marque {
  color: red;
}
.model {
  color: blue;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// supposons un retour de fetch()
const datas = [
  {marque:'Marque1', model:'Model1'},
  {marque:'Marque1', model:'Model2'},
  {marque:'Marque1', model:'Model3'},
  {marque:'Marque2', model:'Model1'},
  {marque:'Marque2', model:'Model2'},
  {marque:'Marque2', model:'Model3'},
];
$container = document.getElementById('container');
datas.forEach(data => {
  const div = document.createElement('div');
  $container.append(div);
 
  const marque = document.createElement('span');
  marque.className = 'marque';
  marque.textContent = data.marque;
  div.append(marque);
 
  const model = document.createElement('span');
  model.className = 'model';
  model.textContent = data.model;
  div.append(model);
});

10/09/2024, 15h27
TocToc72

Bonjour,

Merci pour vos réponses.

Le nombre de DOM est uniquement à l'affichage. C'est une liste du style catalogue, donc en fait ce qui est écrit n'est jamais retouché, par contre s'ajoute régulièrement de nouvelles entrées.

Pour Ajax, je ne sais pas faire. Est-ce qu'il faut que la liste soit figée ou peut-elle être évolutive ?
10/09/2024, 15h36
mathieu

dans l'exemple que vous a montré Doksuri, il s'agit du code javascript qui est exécuté dans le navigateur.
donc la liste de marques peut très bien être générée à partir d'une base de données lue en php par exemple.

ensuite je proposais de découper la page parce que je suis tombé plusieurs fois sur des pages tellement grande qu'un utilisateur ne va pas la lire entièrement. donc au final ce n'est pas utile de la charger en entier.
c'est peut-être le moment de réorganiser cette page avec, par exemple, une recherche avec autocomplétion.
si la page est actuellement utilisée par plusieurs personnes, un changement risque de déplaire à certains utilisateurs. pour cela vous pourrez mettre un lien vers l'ancien système qui affiche tout sur une page. ça sera l'utilisateur qui aura choisi de cliquer sur le lien pour accéder à cette ancienne liste donc ça veut dire qu'il sera prêt à attendre plusieurs secondes pour voir cette liste.
10/09/2024, 18h24
TocToc72

C'est une bonne solution que de revoir la pagination.
Je vais partir sur cela et sur un loading lazy en plus pour limiter les requêtes.
Merci