Français

Outils de développement · Éditeur HTML WYSIWYG

Des balises <font> au CSS : comment le formatage Web est sorti du balisage

· Contexte

html css nettoyage de texte

Police de présentation et balises centrales supprimées tandis que le contenu sémantique reste pour le style CSS
Illustration vectorielle originale de ToolAcre

Raconte comment le HTML de présentation, tel que les attributs de police, de centrage et d'alignement, a cédé la place au CSS, et pourquoi cette histoire explique le débat actuel sur le style en ligne dans les éditeurs.

HTML de présentation dans les pages plus anciennes — aucune revendication de date ne provient d'ici

Les fragments de page plus anciens expriment souvent leur apparence directement à travers des éléments tels que la police et le centre ou des attributs tels que bgcolor et align. Le classeur joint une chronologie du milieu des années 1990, mais aucune source de référentiel ne vérifie ces dates. L'implémentation peut seulement démontrer comment cet éditeur traite ce balisage aujourd'hui.

ToolAcre n'autorise pas la police ou le centre et ne préserve pas les attributs de présentation. Les wrappers ordinaires non pris en charge sont déballés, de sorte que leurs mots visibles peuvent survivre pendant que l'instruction de formatage disparaît. Cette sortie est un brouillon nettoyé, et non une restauration fidèle d’une page héritée.

font, center et bgcolor : présentation dans les balises — décrit les éléments et attributs ajoutés par les navigateurs pour l'apparence

Lorsque la présentation réside dans des balises et des attributs, le contenu et la conception deviennent difficiles à modifier indépendamment. Un choix de couleur répété dans les articles doit être modifié dans chaque fragment, et un titre centré n'a aucune signification structurelle inhérente. La copie de ces constructions importe également les hypothèses d'une mise en page obsolète.

Le balisage sémantique nomme des rôles tels que le titre, le paragraphe, la liste et la citation. La feuille de style de destination peut présenter toutes les occurrences de manière cohérente. ToolAcre prend en charge ce vocabulaire plus petit et supprime également la classe et le style, laissant le système récepteur responsable de sa propre couche de présentation.

CSS sépare la structure de la présentation ; les dates des normes sont en dehors des preuves du référentiel

CSS fournit des sélecteurs et des déclarations distincts de l'arborescence de contenu. Cette division architecturale permet à une modification de conception d'affecter de nombreux documents sans réécrire chaque corps. Cet article n’invente pas de date de première recommandation ni de séquence de normes car de telles affirmations historiques nécessitent des spécifications externes.

La règle pratique reste testable : les fragments copiés depuis ToolAcre ne contiennent aucun attribut de style ni nom de classe. Le document complet téléchargé inclut la propre feuille de style wrapper de ToolAcre, mais ce CSS n'est pas inséré dans le fragment nettoyé renvoyé par Copy HTML.

Les éléments de présentation ne figurent pas dans cette liste autorisée, sans revendication de chronologie de niveau de vie.

Le cahier d'exercices décrit la dépréciation et l'éloignement du niveau de vie. Ce module n'a pas d'archive de normes, donc l'article s'arrête à la politique actuelle : les éléments de présentation ne sont pas pris en charge et sont soit déballés, soit supprimés en fonction de leur catégorie de risque. Il ne s’agit pas d’une prétention chronologique normative.

Le rapport de suppression constitue la preuve utile. Collez une balise de police autour du texte et observez que le wrapper est rejeté tandis que les mots restent. Collez un conteneur de style dangereux et son corps est entièrement supprimé, car le contenu de style brut peut créer des surfaces de requête et d'analyse au-delà de la portée de cet éditeur.

Les styles en ligne existent ailleurs mais cet éditeur les supprime

Le style en ligne est un mécanisme de syntaxe moderne, mais ToolAcre le décline complètement. Par conséquent, cet éditeur ne peut pas démontrer un attribut de style « compromis » survivant ni recommander l'un de ses propres modes de sortie. Le seul style autonome apparaît dans le document d'aperçu généré autour du corps HTML filtré.

D'autres contextes, notamment la production d'e-mails, peuvent nécessiter des déclarations en ligne. Cette exigence nécessite un pipeline distinct avec des tests clients et une politique CSS. Ajouter un style arbitraire ici contredirait la liste d’autorisation actuelle et élargirait les responsabilités du désinfectant sans preuves ni tests.

Exemple concret : moderniser un extrait des années 1990 – réécrit le balisage de la balise de police en HTML sémantique plus une classe et compare les deux

Modernisez `<center><font color="red"><b>Maintenance</b></font></center><p align="left">Tonight</p>` en choisissant un vrai titre et un vrai paragraphe. ToolAcre déballe la présentation non prise en charge, mappe b sur strong, supprime l'alignement et conserve p, mais il ne peut pas en déduire que Maintenance doit être h2.

Réécrivez explicitement la signification sous la forme `<h2>Maintenance</h2><p>Tonight</p>`, puis ajoutez des classes de destination approuvées ou des règles de feuille de style en dehors de l'éditeur. Si l'importance est voulue dans une phrase, fort peut convenir ; si le gras n'était qu'un poids de police, ne conservez pas de sémantique trompeuse.

Ce que cela ne couvre pas : débats sur la méthodologie CSS ou style spécifique au framework

Cet article ne compare pas les méthodologies CSS, les frameworks, les classes utilitaires ou les jetons de conception. Il ne revendique pas de dates historiques pour les transitions de polices, CSS ou standards. Il ne propose pas non plus de convertisseur automatisé capable de déduire des rôles sémantiques à partir du balisage visuel hérité.

Le filtrage n'est pas une prévention XSS universelle. Le tokenizer écrit à la main de ToolAcre est limité et son aperçu est mis en bac à sable séparément. Un serveur acceptant le HTML hérité ou généré par l'utilisateur a besoin d'un désinfectant basé sur un analyseur, de tests de migration et d'une liste blanche spécifique à la destination.

À retenir : sachez pourquoi la règle existe – résume l'historique et comment l'inspection de la sortie dans l'éditeur HTML WYSIWYG de ToolAcre permet de garder la présentation en dehors de votre balisage.

Sachez pourquoi la structure et la présentation sont séparées : le sens doit survivre à la refonte, tandis que l'apparence doit être régie de manière cohérente. ToolAcre applique cette limite de manière agressive en supprimant à la fois la présentation héritée et le style moderne en ligne ou basé sur les classes des fragments copiés.

Utilisez la vue source pour identifier ce qui a été perdu, puis restaurez la sémantique manuellement et le style à la destination. Ce processus ne préserve peut-être pas l'ancien aspect, mais il produit un contenu plus facile à réviser, à migrer et à adapter sans appliquer de décisions obsolètes dans chaque thème futur.