Zendesk a introduit un nouvel éditeur d’article au deuxième trimestre 2025. La transition de l’ancien au nouvel éditeur se fera en quatre étapes. Le nouvel éditeur d’article apporte des améliorations et des modifications, notamment le style des tableaux aux niveaux HTML et CSS.
Comme le nouvel éditeur n’est pas 100 % compatible avec l’ancien éditeur, il est possible que vous rencontriez des problèmes courants liés aux tableaux pendant ou après la mise à niveau. Cet article explique aux administrateurs et aux développeurs de thèmes comment gérer ces problèmes et trouver des solutions alternatives pour s’assurer que les tableaux respectent le style de leur marque.
Modifications du style des tableaux dans le nouvel éditeur
Le plus grand changement concernant les tableaux dans le nouvel éditeur d’article est l’utilisation de styles CSS intégrés, appliqués directement aux éléments des tableaux (par exemple, <table>, <tr> et <td>), au lieu d’utiliser les attributs HTML ou les classes CSS externes pour appliquer des styles aux tableaux. Les nouveaux tableaux sont désormais placés entre balises <figure>.
-
Dans l’ancien éditeur, les styles de tableau étaient appliqués en utilisant une combinaison d’attributs HTML (par exemple,
cellpadding,border), et d’éléments CSS intégrés. -
Dans le nouvel éditeur, la personnalisation des tableaux (comme la largeur et la couleur du cadre, la couleur d’arrière-plan, la hauteur/largeur des cellules, la couleur du texte et le remplissage) est appliquée uniquement sous la forme de styles CSS intégrés.
Les styles intégrés ont la spécificité CSS la plus élevée, ce que signifie que :
-
Vos styles CSS de thèmes personnalisés ciblant les tableaux ne peuvent pas remplacer ces styles intégrés, sauf si vos sélecteurs utilisent la spécificité égal/supérieur ou
!important. -
Pour les anciens thèmes et styles CSS qui ciblaient les sélecteurs d’éléments ou les attributs HTML sans spécificité, il est possible que les styles de tableaux soient corrompus ou appliqués de façon incohérente après le passage au nouvel éditeur.
Exemples de conversions des tableaux pendant la mise à niveau
Les exemples suivants illustrent les problèmes qui peuvent survenir lors de la conversion des tableaux pour le nouvel éditeur d’article.
Remplissage de cellule converti d’attribut en style intégré
L’ancien éditeur d’article utilise l’attribut [cellpadding] pour spécifier le remplissage et le nouvel éditeur utilise les styles intégrés. Les anciens styles qui ciblaient les attributs [cellpadding] ou les éléments qui attendaient cette propriété devront être ajustés pour pouvoir fonctionner.
<table cellpadding="20"><td style="padding: 20px;">Modifications du traitement du cadre
Les exemples suivants illustrent la façon dont sont traités les cadres des tableaux dans l’ancien éditeur, le nouvel éditeur et les anciens articles convertis pour le nouvel éditeur.
<table style="border-collapse: collapse; width: 100%" border="1">
<tbody>
<tr>
<td style="width: 50%">A</td>
<td style="width: 50%">B</td>
</tr>
<tr>
<td style="width: 50%">C</td>
<td style="width: 50%">D</td>
</tr>
</tbody>
</table>
<figure style="width: 100%" class="wysiwyg-table">
<table style="border-style: solid; border-width: 1px">
<tbody>
<tr>
<td style="border-style: solid; border-width: 1px">A</td>
<td style="border-style: solid; border-width: 1px">B</td>
</tr>
<tr>
<td style="border-style: solid; border-width: 1px">C</td>
<td style="border-style: solid; border-width: 1px">D</td>
</tr>
</tbody>
</table>
</figure>
<figure style="width: 100%" class="wysiwyg-table wysiwyg-table-align-left">
<table
style="border-collapse: collapse; border-style: solid; border-width: 1px"
>
<tbody>
<tr>
<td style="border-style: solid; border-width: 1px; width: 50%">A</td>
<td style="border-style: solid; border-width: 1px; width: 50%">B</td>
</tr>
<tr>
<td style="border-style: solid; border-width: 1px; width: 50%">C</td>
<td style="border-style: solid; border-width: 1px; width: 50%">D</td>
</tr>
</tbody>
</table>
</figure>
Problèmes courants et comment y remédier
Cette section décrit plusieurs problèmes courants dus à la conversion des tableaux de l’ancien au nouvel éditeur, ainsi que la façon de les résoudre.
Le CSS du thème ne remplace pas les styles des tableaux (remplissage, cadres et couleurs)
Problème : votre CSS de thème personnalisé qui contrôlait auparavant les cadres, le remplissage de cellule ou les couleurs d’arrière-plan n’est pas appliqué, car l’éditeur utilise désormais les styles intégrés.
Solutions possibles :
-
Augmentez la spécificité CSS : utilisez des sélecteurs plus spécifiques pour cibler les éléments de tableau au sein de l’article. L’ajout de
!importantgarantit que vos styles remplacent les styles intégrés..article-body table, .article-body table td { border: 1px solid #ccc !important; padding: 10px !important; background-color: #f9f9f9 !important; } -
Ciblez l’enveloppement des figures : l’éditeur enveloppe désormais les tableaux au sein des éléments
<figure>avec des classes.wysiwyg-table. Personnalisez l’enveloppement en fonction de vos besoins :figure.wysiwyg-table { margin: 1em auto; max-width: 90%; } -
Mettez à jour les styles qui utilisent des attributs HTML : si votre thème utilise des sélecteurs d’attributs (comme
[cellpadding]ou[border]) pour le style des tableaux, mettez-les à jour pour cibler la nouvelle structure en utilisant des classes ou des styles intégrés.
Les tableaux n’ont pas le même aspect après la mise à niveau
Problème : les tableaux perdent leurs configurations de largeur ou d’alignement, ou vous voyez des cadres et des espacements inattendus.
- Le nouvel éditeur place le tableau à l’intérieur d’une balise
<figure>avec une largeur intégrée. Il est possible que vous deviez modifier ou remplacer cette configuration.figure.wysiwyg-table { width: 100% !important; text-align: center; } figure.wysiwyg-table table { width: 100% !important; border-collapse: collapse; } - Vérifiez les styles par défaut
tablede votre thème et adaptez-les à votre nouvelle structure.
Les éléments HTML personnalisés ou complexes sont corrompus ou doivent être ajustés manuellement
Solutions possibles :
- Vérifiez le code source HTML de l’article migré pour les tableaux.
- Modifiez ou réécrivez le code HTML personnalisé de façon à suivre le nouveau modèle :
- Enveloppez la balise
<table>dans une balise<figure class="wysiwyg-table">. - Utilisez les styles intégrés pour
<table>et<td>.
- Enveloppez la balise
-
Envisagez de recréer les tableaux complexes dans le nouvel éditeur pour garantir leur compatibilité.
Meilleures pratiques pour les développeurs de thèmes et les administrateurs
- Utilisez des sélecteurs CSS spécifiques ciblant
.wysiwyg-table, des tableaux à l’intérieur de.article-bodyou des élémentsfigurepour envelopper les tableaux. - Utilisez
!importantavec précaution pour remplacer les styles intégrés. - Testez les tableaux dans plusieurs navigateurs et avec plusieurs tailles d’appareil, pendant et après la mise à niveau.
- Prévenez les rédacteurs de contenu qu’il est possible que des styles intégrés soient utilisés et qu’ils doivent limiter la personnalisation des tableaux pour une maintenance facile.
- Sauvegardez le thème de votre centre d’aide et le contenu de vos articles avant toute mise à niveau de masse ou personnalisation importante.