Personnaliser un bandeau d’actualités avec JSON et CSS
Dans l’article « Alimenter un bandeau d’actualités avec JavaScript et JSON », nous avions fait évoluer le composant pour ne plus avoir à écrire les actualités directement dans le HTML. Le fichier JSON est devenu la source de données, JavaScript s’est chargé de construire les bandeaux, et CSS a continué à gérer leur présentation et leur défilement. Mais ce fichier contient déjà une autre piste que nous avions volontairement laissée de côté : l’objet datas.bandeau, destiné à décrire le composant lui-même.
Au cours de cet article, nous allons explorer diverses pistes permettant de personnaliser le bandeau sans modifier son fonctionnement général. Nous verrons qu’en restant sur la même approche, le même composant pourra aussi adopter d’autres formes de présentation, simplement en le pilotant depuis le fichier JSON.
Ce que nous allons personnaliser… et ce qui reste commun
Nous ne repartons pas de zéro. Le composant conserve la même structure et le même fonctionnement général : le viewport, le track, la construction dynamique du premier bandeau, son clonage pour assurer la continuité du défilement, ainsi que les règles d’accessibilité mises en place précédemment, bandeau-v3.0.html.
Ce qui va évoluer concerne cette fois la manière dont le composant se présente. Couleurs, typographie, durée du défilement, espacements ou autres propriétés pourront varier d’un bandeau à l’autre. Puis nous irons un peu plus loin en faisant évoluer non plus seulement son apparence, mais la manière même de présenter une actualité.
Faire de .news-actualites une base configurable
Jusqu’à présent, plusieurs propriétés du composant étaient définies directement dans .news-actualites. Cela fonctionne très bien tant que tous les bandeaux doivent partager exactement la même présentation, mais devient plus contraignant dès que nous souhaitons faire varier leur apparence.
Nous allons donc commencer par transformer les valeurs utilisées par .news-actualites en variables CSS disposant de valeurs par défaut. Largeur, marges, taille de caractères, hauteur de ligne, couleurs ou typographie deviennent ainsi configurables sans modifier la structure de la règle.
Le comportement ne change pas : si aucune valeur particulière n’est fournie, le composant continue d’utiliser les valeurs par défaut définies dans .news-actualites. Dans bandeau-v3.1.html, ce principe est appliqué à l’ensemble des propriétés que nous souhaitons rendre configurables : couleurs, dimensions, espacements, typographie ou encore durée du défilement.
.news-actualites {
--news-width: 920px;
--news-margin: 20px auto;
--news-font-size: 16px;
--news-line-height: 2;
--news-color: #F8BF43;
--news-background: #383B3B;
--news-font-family: serif;
width: var(--news-width);
margin: var(--news-margin);
font-size: var(--news-font-size);
line-height: var(--news-line-height);
color: var(--news-color);
background-color: var(--news-background);
font-family: var(--news-font-family);
}.news-actualites devient ainsi la base commune du composant, tandis que les variantes pourront simplement surcharger les variables nécessaires, sans avoir à réécrire toute la règle ni modifier le fonctionnement général du bandeau.
Les différentes versions de démonstration utilisées dans cet article chargent leurs données JSON avec
fetch(). Pour les tester dans les mêmes conditions, nous les exécuterons donc depuis un serveur web local, plutôt qu’en ouvrant directement les fichiers HTML avecfile://. Nous avions détaillé ce fonctionnement dans l’article précédent, ainsi que dans « Installer et configurer un serveur web en local » et « Créer un serveur Node rapide pour servir des fichiers statiques ».
Transformer datas.bandeau en variables CSS
Dans l’article précédent, nous avions volontairement laissé de côté l’objet datas.bandeau. Il peut maintenant remplir son rôle : fournir les valeurs qui viendront surcharger les variables CSS définies par défaut dans .news-actualites.
Nous venons justement de modifier notre feuille de styles pour que les propriétés du composant reposent sur des variables comme --news-background, --news-font-family ou --news-duration. Il nous faut maintenant faire correspondre les propriétés du JSON avec ces variables CSS.
Pour bien visualiser le mécanisme, utilisons volontairement des valeurs différentes de celles définies par défaut dans .news-actualites, actualites-v3.2.json. :
"bandeau": {
"news-background": "#EAF2FF",
"news-font-family": "Verdana, sans-serif",
"news-duration": "22s"
}news-background → --news-background
news-font-family → --news-font-family
news-duration → --news-durationJusqu’ici, notre fonction construireBandeau(), présente dans actualites-v3.0.js, s’occupait essentiellement du contenu des actualités. Puisque nous allons maintenant travailler sur la configuration du composant lui-même, autant confier cette nouvelle tâche à une fonction dédiée, actualites-v3.3.js :
function construireBandeau(banner, datas) {
// Configuration du composant à partir de datas.bandeau.
configurerBandeau(banner, datas.bandeau);
// Construction des actualités...
}Nous pouvons alors créer configurerBandeau(). Pour l’instant, elle ne modifiera encore rien dans la feuille de styles : nous allons simplement vérifier dans la console les variables CSS que nous sommes capables de produire à partir du JSON.
La méthode Object.entries() nous permet de parcourir chaque propriété de l’objet avec sa valeur. Pour revenir plus en détail sur cette manière de manipuler un objet, nous pouvons nous reporter à l’article « Parcourir et manipuler des objets efficacement avec JavaScript ».
function configurerBandeau(banner, bandeau) {
Object.entries(bandeau).forEach(function ([property, value]) {
// Chaque propriété du JSON devient le nom d’une variable CSS.
const cssVariable = '--' + property;
// Pour l’instant, nous vérifions simplement
// la correspondance obtenue.
console.log(cssVariable + ' : ' + value);
});
}
À chaque passage dans la boucle, property contient le nom récupéré dans le JSON et value sa valeur associée. Il suffit donc d’ajouter le préfixe -- pour retrouver la variable correspondante dans notre feuille CSS.
Cette approche devient surtout intéressante maintenant que toutes les propriétés configurables de .news-actualites reposent sur des variables. JavaScript n’a pas besoin de savoir si une valeur correspond à une couleur, une dimension, une typographie ou une durée : il parcourt simplement datas.bandeau et établit la correspondance.
Ajouter plus tard
news-width,news-font-sizeou une autre propriété au JSON ne demandera donc pas de modifier cette boucle.
Il reste maintenant à déterminer où appliquer ces variables pour qu’elles ne concernent que le bon composant. C’est précisément ce qui va nous amener à donner une signature propre à chacun de nos bandeaux.
Donner une signature propre à chaque bandeau
Nous savons maintenant transformer les propriétés de datas.bandeau en variables CSS. Il reste à déterminer à quel composant ces valeurs devront s’appliquer. Nos différents bandeaux partagent tous la classe .news-actualites ; si nous surchargeons directement cette classe, nous risquons donc d’appliquer la même configuration à l’ensemble des composants présents dans la page.
Nous disposons déjà d’une information permettant de les distinguer : le fichier indiqué dans data-news-src. Nous pouvons simplement reprendre son nom pour construire une signature propre à chaque variante :
actualites.json → .news-actualites--actualites
evenements.json → .news-actualites--evenementsPuisque configurerBandeau() reçoit déjà le composant concerné, nous pouvons compléter cette fonction en récupérant le nom du fichier JSON utilisé, actualites-v3.4.js :
function configurerBandeau(banner, bandeau) {
// Nous récupérons uniquement le nom du fichier JSON,
// sans son chemin ni son extension.
const sourceName = banner.dataset.newsSrc
.split('/')
.pop()
.replace('.json', '');
// Ce nom devient la signature propre à la variante.
const variantClass = 'news-actualites--' + sourceName;
// Pour l’instant, vérifions simplement le résultat.
console.log('Variante du composant : .' + variantClass);
Object.entries(bandeau).forEach(function ([property, value]) {
const cssVariable = '--' + property;
console.log(cssVariable + ' : ' + value);
});
}Avec nos deux composants, la console nous permet alors de distinguer clairement les configurations traitées, bandeau-v3.4.html :
Dans les captures d’écran de cet article, les fichiers utilisés pour les tests portent volontairement des numéros de version, comme
actualites-v3.2.json,actualites-v3.4.jsoubandeau-v3.4.html. Ces suffixes permettent de suivre la progression de la démonstration et pourront donc apparaître dans la console ou dans les chemins affichés, même lorsque nous employons dans le texte des noms plus simples commeactualites.jsonouevenements.json.
Le nom du fichier devient ainsi une signature prévisible, sans avoir besoin d’ajouter une nouvelle information dans le JSON. Le composant alimenté par actualites.json pourra être identifié par .news-actualites--actualites, tandis que celui utilisant evenements.json recevra .news-actualites--evenements, actualites-v3.5.js.
// La classe de base reste en place.
// Nous ajoutons simplement la signature de cette variante.
banner.classList.add(variantClass);Nous pouvons maintenant appliquer réellement cette classe au composant, bandeau-v3.5.html :
Nous conservons donc .news-actualites comme socle commun, tout en disposant désormais d’une classe propre à chaque variante. Il ne reste plus qu’à rattacher les variables préparées précédemment à cette signature pour que les deux bandeaux puissent réellement adopter des configurations différentes.
Appliquer les variables à la variante correspondante
Nous avons maintenant tout ce qu’il nous faut. datas.bandeau nous fournit les propriétés à transformer en variables CSS, tandis que variantClass identifie précisément le composant auquel elles doivent s’appliquer. Il reste donc à réunir ces deux informations pour produire une règle CSS propre à chaque variante.
Reprenons notre fonction configurerBandeau(). Au lieu de simplement afficher les variables dans la console, nous allons maintenant construire progressivement leurs déclarations, actualites-v3.6.js :
function configurerBandeau(banner, bandeau) {
// ...
// Nous préparons les variables CSS issues du JSON.
let cssVariables = '';
Object.entries(bandeau).forEach(function ([property, value]) {
cssVariables += `--${property}: ${value};`;
});
// Une règle CSS propre à cette variante est créée.
const style = document.createElement('style');
style.textContent = `
.${variantClass} {
${cssVariables}
}
`;
document.head.append(style);
}JavaScript ne modifie donc toujours pas directement background-color, font-family ou animation-duration. Il se contente de produire les variables CSS fournies par le JSON et de les associer à la classe correspondant au composant. Avec actualites.json, nous pouvons ainsi obtenir une règle du type :
.news-actualites--actualites {
--news-background: #EAF2FF;
--news-font-family: Verdana, sans-serif;
--news-duration: 22s;
}tandis que evenements.json produira sa propre variante avec ses propres valeurs.
Une petite précaution reste nécessaire avec les fichiers de démonstration utilisés dans l’article. Leurs noms comportent des suffixes comme
-v3.2ou-v3.6; or le point présent dans ce numéro de version devient gênant lorsqu’il est réutilisé dans un sélecteur CSS. Nous retirons donc cette partie avant de construirevariantClass. Cela peut se faire en deux temps aveclet, sisourceNameest réaffecté, ou directement dans la chaîne de traitement avecconstlorsque la valeur est construite une seule fois.
Les propriétés qui ne figurent pas dans le JSON continuent, elles, à utiliser les valeurs par défaut définies dans .news-actualites. Nous obtenons ainsi le comportement recherché : un même socle CSS, mais des configurations différentes pour chacun des bandeaux, bandeau-v3.6.html.
Plusieurs niveaux de personnalisation
Nous venons de voir comment surcharger les variables CSS d’un composant précis en nous appuyant sur sa signature, tout en conservant .news-actualites comme socle commun. Cette première personnalisation agit donc sur l’ensemble du bandeau concerné.
Dans l’article précédent, nous avions déjà préparé d’autres possibilités dans le chapitre « Préparer plusieurs niveaux de personnalisation » : une actualité pouvait recevoir une propriété classe, tandis que le composant pouvait indiquer une feuille de styles complémentaire avec data-style. Nous étions alors restés au stade de la préparation. Nous pouvons maintenant reprendre ces deux pistes et voir comment elles s’intègrent à la logique de variantes que nous venons de mettre en place.
Nous disposons donc maintenant de deux niveaux de personnalisation.
- Le premier concerne le composant dans son ensemble : ses variables CSS peuvent être surchargées à partir de
datas.bandeau, et une feuille complémentaire peut ajouter des règles propres à sa variante. - Le second peut concerner une actualité particulière : une propriété comme
classe, présente dans un objet dedatas.actualites, peut permettre d’appliquer un style spécifique à un seul item.
Mais nous pouvons aller encore plus loin. Une actualité pourrait également indiquer non plus seulement comment elle doit être stylée, mais sous quelle forme elle doit être construite. Une propriété type, par exemple, pourrait conserver notre présentation actuelle sous forme de fil, ou demander une structure plus riche avec une image, un titre et un texte.
// Pour conserver le fonctionnement actuel sous forme de fil :
{
"type": "fil",
"text": "Une certaine idée du développement",
"link": "https://www.puce-et-media.com/une-certaine-idee-du-developpement/",
"target": "_blank"
}
// Et pour une présentation plus riche :
{
"type": "note",
"titre": "ALL of us TED 2026",
"text": "Une conférence consacrée aux idées, aux échanges et aux grandes questions contemporaines.",
"image": "images/ted-2026.jpg",
"link": "https://conferences.ted.com/ted2026",
"target": "_blank"
}Dans le premier cas, type: "fil" indique que JavaScript doit conserver la structure que nous utilisons déjà : un item textuel dans le ruban. Dans le second, type: "note" annonce une construction différente, capable d’exploiter cette fois un titre, un texte et une image. La donnée ne décrit donc plus seulement le contenu à afficher, elle commence aussi à orienter la manière dont ce contenu sera construit.
C’est cette distinction qui va guider la suite : personnaliser le composant, personnaliser un item, puis faire évoluer sa forme de présentation.
Personnaliser une actualité particulière
Dans l’article précédent, nous avions prévu qu’un objet de datas.actualites puisse recevoir une propriété classe, sans encore l’exploiter. Nous pouvons maintenant l’utiliser pour distinguer une actualité particulière, indépendamment de la configuration appliquée au composant dans son ensemble. Dans actualites-v3.7.json, ajoutons par exemple une classe à l’une des actualités :
{
"text": "Une certaine idée du développement",
"link": "https://www.puce-et-media.com/une-certaine-idee-du-developpement/",
"target": "_blank",
"classe": "news-important"
}Cette information doit ensuite être prise en compte au moment où JavaScript construit chaque item. Dans actualites-v3.7.js, nous intervenons donc dans construireBandeau(), juste après avoir créé le lien et ajouté sa classe de base :
item.classList.add('news-actualites__item');
// Si une classe particulière est prévue dans l’objet JSON,
// nous l’ajoutons uniquement à cette actualité.
if (actualite.classe) {
item.classList.add(actualite.classe);
}Lançons le fichier bandeau-v3.7.html et constations que l’élément généré pourra alors prendre cette forme :
<a class="news-actualites__item news-important" ...>
Une certaine idée du développement
</a>
Reste maintenant à définir ce que doit faire cette classe. Une règle CSS pourrait, par exemple, mettre cette actualité en évidence :
.news-actualites__item.news-important {
color: red;
}Mais cette règle est encore trop générale : elle concernerait toutes les actualités portant news-important, quel que soit le composant auquel elles appartiennent. Ajoutons une classe .news-important à une des actualités du fichier evenements-v3.8.json et lançons le fichier bandeau-v3.8.html.
{
"text": "MAX 2020 : les inscriptions sont officiellement ouvertes !",
"link": "https://blog.adobe.com/fr/publish/2020/08/17/adobe-max-2020-ouverture-inscriptions",
"target": "_blank",
"classe": "news-important"
}
Nous pouvons justement réutiliser la signature mise en place dans le chapitre « Donner une signature propre à chaque bandeau ». Si le composant courant possède la classe .news-actualites--actualites, nous pouvons cibler uniquement ses items :
.news-actualites--actualites
.news-actualites__item.news-important {
color: red;
}La propriété classe reste donc attachée à l’objet de l’actualité, mais la règle CSS peut être limitée à une variante précise grâce à la signature du composant, comme nous pouvons le constater depuis le fichier bandeau-v3.9.html.
Il faut enfin que cette règle CSS soit réellement disponible dans la page. Nous pouvons bien sûr l’ajouter à la feuille de styles principale du composant, mais une autre possibilité consiste à la placer dans une feuille CSS complémentaire propre à cette variante. C’est précisément là que data-style, préparé dans l’article précédent, et que nous allons explorer dans le prochain chapitre, va devenir utile.
Exploiter une feuille CSS complémentaire
Puisque notre règle doit être disponible dans la page, autant profiter de la possibilité que nous venons d’évoquer : placer ces styles dans une feuille CSS complémentaire propre à la variante concernée. Pour notre bandeau Événements, nous allons donc utiliser data-style pour lui associer un fichier evenements.css.
<section
class="news-actualites"
data-news-src="evenements-v3.8.json"
data-style="evenements-v3.10.css" >
<div class="news-actualites__viewport">
<div class="news-actualites__track"></div>
</div>
</section>Cette information appartient bien au composant. Nous allons donc la récupérer au moment où nous le configurons. Dans actualites-v3.10.js, après avoir déterminé puis ajouté variantClass, nous pouvons appeler une fonction dédiée :
function configurerBandeau(banner, bandeau) {
// ...
// Détermination de variantClass
// puis ajout de la signature au composant.
banner.classList.add(variantClass);
// Chargement éventuel d’une feuille CSS complémentaire.
chargerStyleComplementaire(banner);
// ...
}La fonction chargerStyleComplementaire() récupère simplement data-style et ajoute la feuille dans le <head> :
function chargerStyleComplementaire(banner) {
// Le composant peut indiquer une feuille CSS complémentaire.
const styleSrc = banner.dataset.style;
// Si aucune feuille n’est prévue, nous n’avons rien à charger.
if (!styleSrc) {
return;
}
// Nous évitons de charger plusieurs fois la même feuille.
if (document.querySelector(`link[href="${styleSrc}"]`)) {
return;
}
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = styleSrc;
document.head.append(link);
}La feuille est bien chargée dans la page entière. C’est justement là que la signature du composant devient importante : ce n’est pas data-style qui limite la portée du CSS, mais les sélecteurs que nous écrivons dans evenements.css.
Dans le chapitre précédent, nous avons déjà ajouté la classe news-important à l’un des objets de evenements-v3.8.json. Il nous reste maintenant à rendre disponible une règle CSS capable de l’exploiter. Plutôt que d’ajouter cette règle à la feuille principale du composant, nous allons la placer dans une feuille complémentaire, evenements-v3.10.css, dédiée au bandeau Événements. Commençons par ne cibler que la règle .news-important.
.news-actualites--evenements
.news-actualites__item.news-important {
color: #F7D917;
}Mais nous pouvons, par exemple, également agir sur tous les liens de cette variante, sans toucher au bandeau Actualités :
.news-actualites--evenements a {
text-decoration-style: dashed;
text-decoration-thickness: 2px;
}Lançons le fichier bandeau-v3.10.html, pour constater que l’élément ciblé par la classe .news-important est bien de couleur jaune, et que tous les liens de ce composant sont soulignés de trait discontinus d’une épaisseur de 2px.
La distinction apparaît alors clairement : data-style permet de charger une feuille complémentaire, news-actualites--evenements limite ses règles au composant concerné, tandis que news-important peut cibler une actualité particulière à l’intérieur de celui-ci.
Nous commençons ainsi à combiner les différents niveaux de personnalisation préparés jusque-là, sans modifier ni la structure commune du composant ni son script de construction.
Faire varier la présentation avec type
Jusqu’à présent, toutes les actualités étaient construites de la même manière : un lien textuel, suivi de son séparateur, puis ajouté au bandeau. Nous allons maintenant permettre au fichier JSON d’indiquer sous quelle forme une actualité doit être présentée.
Deux types vont nous suffire pour cette première évolution. Si aucune propriété type n’est précisée, ou si elle vaut fil, JavaScript conserve le fonctionnement que nous connaissons déjà. L’actualité reste un item textuel dans le ruban.
{
"type": "fil",
"text": "Une certaine idée du développement",
"link": "https://www.puce-et-media.com/une-certaine-idee-du-developpement/",
"target": "_blank"
}En revanche, lorsqu’un objet indique type: "note", nous allons produire une structure plus riche. Cette présentation nécessite alors quelques informations supplémentaires : titre pour identifier l’actualité, text pour une courte présentation, et image pour lui associer une illustration carrée ou presque carrée, affichée dans un espace de dimensions fixes.
{
"type": "note",
"titre": "ALL of us TED 2026",
"text": "Une conférence consacrée aux idées et aux échanges.",
"image": "ted-2026.webp",
"link": "https://conferences.ted.com/ted2026",
"target": "_blank"
}La propriété type ne sert donc plus seulement à modifier un style : elle indique à JavaScript quelle structure HTML doit être construite. Le type fil conserve notre présentation actuelle ; le type note va maintenant nous permettre d’organiser autrement l’image, le titre et le texte.
Construire une actualité sous forme de note
Dans evenements-v3.11.json, nous pouvons maintenant transformer l’événement TED en note :
{
"type": "note",
"titre": "ALL of us TED 2026",
"text": "Une conférence consacrée aux idées et aux échanges.",
"image": "ted-2026.webp",
"link": "https://conferences.ted.com/ted2026",
"target": "_blank"
}Il faut ensuite adapter la construction de l’item dans actualites-v3.11.js. Jusqu’ici, chaque actualité produisait directement un lien contenant son texte. Nous allons conserver ce comportement pour fil, mais construire une structure différente lorsque actualite.type vaut note.
Dans construireBandeau(), au moment où l’item est créé, nous pouvons distinguer les deux cas :
// Chaque actualité devient un lien dans le bandeau.
const item = document.createElement('a');
item.classList.add('news-actualites__item');
item.href = actualite.link;
item.target = actualite.target;
// Si aucun type n'est indiqué, nous conservons le comportement
// utilisé jusqu'ici : une actualité sous forme de simple fil.
if (!actualite.type || actualite.type === 'fil') {
// Le texte du JSON est ajouté comme simple contenu textuel.
item.textContent = actualite.text;
}
// Si le JSON demande une présentation sous forme de note,
// nous construisons une structure plus riche à l'intérieur du lien.
if (actualite.type === 'note') {
// Cette classe permettra au CSS de reconnaître une note
// et de lui appliquer une présentation spécifique.
item.classList.add('news-actualites__item--note');
// Création de l'illustration associée à l'actualité.
const image = document.createElement('img');
image.classList.add('news-actualites__note-image');
image.src = actualite.image;
image.alt = '';
// Création du conteneur qui réunira le titre et le texte.
const noteContent = document.createElement('span');
noteContent.classList.add('news-actualites__note-content');
// Création du titre de la note.
const noteTitle = document.createElement('strong');
noteTitle.classList.add('news-actualites__note-title');
noteTitle.textContent = actualite.titre;
// Création du court texte de présentation.
const noteText = document.createElement('span');
noteText.classList.add('news-actualites__note-text');
noteText.textContent = actualite.text;
// Le titre et le texte sont réunis dans la colonne de contenu.
noteContent.append(noteTitle, noteText);
// L'image et le contenu sont ensuite ajoutés dans le lien.
item.append(image, noteContent);
}Le HTML produit pour cette actualité prendra alors une forme proche de celle-ci :
<a
class="news-actualites__item news-actualites__item--note"
href="https://conferences.ted.com/ted2026"
target="_blank"
>
<img src="ted-2026.webp" alt="">
<span class="news-actualites__note-content">
<strong class="news-actualites__note-title">
ALL of us TED 2026
</strong>
<span class="news-actualites__note-text">
Une conférence consacrée aux idées et aux échanges.
</span>
</span>
</a>La feuille evenements-v3.11.css peut alors compléter les styles déjà utilisés pour cette variante. La note s’organise en deux colonnes : l’image à gauche, puis le titre et le texte à droite. Le lien englobe l’ensemble, sans soulignement ni autre ornement.
.news-actualites--evenements
.news-actualites__item--note {
display: grid;
grid-template-columns: 56px 1fr;
gap: 0.75rem;
align-items: center;
white-space: normal;
text-decoration: none;
}
.news-actualites--evenements
.news-actualites__note-image {
display: block;
width: 56px;
height: 56px;
object-fit: contain;
align-self: center;
}
.news-actualites--evenements
.news-actualites__note-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.news-actualites--evenements
.news-actualites__note-title {
display: block;
line-height: 1.2;
}
.news-actualites--evenements
.news-actualites__note-text {
display: block;
line-height: 1.4;
}Il ne reste plus qu’à préparer le HTML du fichier bandeau-v3.11.html en pointant vers le bon JSON et la bonne feuille de style CSS, puis de lancer le navigateur.
<section
class="news-actualites"
data-news-src="evenements-v3.11.json"
data-style="evenements-v3.11.css" >
<div class="news-actualites__viewport">
<div class="news-actualites__track"></div>
</div>
</section>
Cette fois, le même composant ne se contente plus d’afficher une simple ligne de texte. Le JSON décrit la forme attendue de l’actualité, JavaScript construit la structure correspondante et la feuille CSS complémentaire en assure la présentation. Le ruban, son défilement et son fonctionnement général restent pourtant identiques.
Conclusion : du contenu à la configuration
Au fil de cet article, notre bandeau est resté le même dans son fonctionnement général, mais sa manière de se présenter est devenue beaucoup plus souple. Les variables CSS permettent désormais de personnaliser chaque variante, une actualité peut recevoir sa propre classe, une feuille de styles complémentaire peut être associée au composant, et la propriété type peut même orienter la structure HTML qui sera construite.
Les fichiers JSON ne servent donc plus seulement à alimenter le bandeau : ils commencent aussi à décrire la manière dont leurs contenus doivent être présentés. La prochaine étape consistera à ne plus modifier directement ces fichiers à la main. Dans un quatrième volet, nous pourrons construire une interface CRUD permettant d’ajouter, modifier ou supprimer des actualités et leur configuration depuis une interface dédiée.
