CSS utilisateur et thèmes publics sûrs : source partagée, rendu cloisonné et versions figées

Un éditeur de profil qui permet d’ajuster les couleurs et les espacements dans une interface graphique et de modifier toute la mise en page avec du CSS doit tenir compte à la fois de l’ergonomie et de la sécurité du code affiché sur les pages publiques. Ce cas anonymisé présente les limites entre modification et distribution.

Choisir séparément liberté de style et distribution

Pour l’édition personnelle, testez d’abord confinement et conflits de sauvegarde. La distribution exige aussi IDs fixes, conditions d’usage et apparence standard après suspension. Un petit thème avec Grid et pseudo-éléments permet de vérifier navigation extérieure intacte et versions appliquées stables après mise à jour de l’auteur.

W3C Selectors：Vérifier la portée des sélecteurs

Partager une même source de CSS entre l’interface graphique et l’édition directe

Dans une extension ultérieure, le CSS complet est devenu la source de vérité du thème et l’interface graphique a été modifiée pour éditer les mêmes déclarations CSS. Les commentaires écrits à la main, les déclarations que l’interface ne gère pas et les règles responsives sont conservés. L’ancien format avec paramètres de l’interface et CSS supplémentaire est également repris dans une feuille de style complète modifiable. Modifier uniquement les paramètres auxiliaires qui servent à afficher une liste d’options ne signifie pas que le CSS de rendu a changé.

Les extensions backend et frontend ont chacune été intégrées dans leur branche main ; la CI et les tests d’implémentation ont été vérifiés. Dans le périmètre de cet audit, cela ne prouve ni la mise en production ni un parcours de bout en bout testé par un utilisateur connecté.

Prendre en charge une syntaxe CSS étendue dans le périmètre de rendu

Les limites initiales fondées sur une petite liste de propriétés autorisées ont été élargies pour prendre en charge Grid, Flex, les variables, les dégradés, les pseudo-éléments, les transformations, les animations et des règles comme @media, @supports et @container. Cela ne signifie pas que du CSS arbitraire est inséré sans contrôle. L’arbre syntaxique est analysé et chaque branche de sélecteur est limitée aux descendants de la région de profil désignée. La même frontière s’applique à l’intérieur des règles conditionnelles ; les commandes d’exploitation et les badges de licence à l’extérieur ne font pas partie du thème. W3C Selectors est un point de départ pour consulter la spécification des sélecteurs.

Les noms de variables et de keyframes sont remplacés par des noms uniques dans le CSS publié afin d’éviter les conflits avec les variables de l’interface extérieure ou les animations d’un autre thème. Les noms d’origine restent disponibles pour l’édition. Le wrapper de rendu extérieur utilise aussi containment et isolation pour limiter les effets des règles de mise en page étendues à la région de profil.

La récupération de ressources externes, les règles globales comme @import et @font-face, la syntaxe impossible à analyser, CSS nesting, la balise de fermeture style du HTML et les références d’animation dont les noms ne peuvent pas être résolus de façon sûre sont refusés. La taille de l’entrée et celle du résultat généré sont également contrôlées. Lors de la publication et du chargement d’un snapshot, la cohérence du périmètre, des noms uniques et de la chaîne CSS canonical validée est vérifiée à nouveau. Prendre en charge une syntaxe étendue ne garantit pas un rendu identique dans tous les navigateurs.

Séparer l’aperçu, le brouillon et la publication

Essayer ou appliquer un thème modifie un brouillon. La page publique ne change qu’après publication par son propriétaire. Pouvoir modifier à nouveau le CSS écrit à la main ne signifie pas non plus que ce texte d’origine est transmis aux visiteurs. Le contrat d’enregistrement détecte les conflits et empêche une nouvelle tentative de dupliquer une version ou une mise à jour du brouillon.

Empêcher la mise à jour d’un autre auteur de modifier un design actif

Les informations modifiables de la fiche du thème sont séparées de ses versions immuables. L’utilisateur importe une version précise par son ID ; la publication d’une nouvelle version par l’auteur ne modifie pas automatiquement les brouillons ni les versions publiées existants. L’origine et la version appliquées, ainsi que la source des conditions d’utilisation, restent associées après modification. Si un profil public redevient privé, le nom et l’image du brouillon de l’auteur ne doivent pas fuiter dans le thème distribué.

Distinguer le retrait de la liste d’une suspension opérationnelle

Le retrait d’un thème par son auteur empêche de nouvelles découvertes et applications, mais ne révoque pas nécessairement immédiatement les utilisations existantes d’une version figée. La suspension opérationnelle d’un thème dangereux a une autre portée : elle arrête la récupération publique et le CSS des snapshots existants, puis rétablit l’apparence standard. Même lors d’un retour à un ancien snapshot, l’état actuel de suspension est vérifié pour ne pas réactiver le CSS antérieur à la suspension.

1. 1 Source CSS partagée L’interface graphique et l’édition directe utilisent la même source CSS et préservent les règles écrites à la main.
2. 2 Analyser et limiter la portée Prend en charge Grid/Flex, variables, pseudo-éléments, règles responsives et animations. Refuse les entrées externes, globales ou impossibles à analyser.
3. 3 Publier une version explicite Publier une version immuable après aperçu/brouillon. Le retrait de la liste et la suspension opérationnelle sont distincts.

Vérifications avant publication

Vérifiez les sélecteurs hors périmètre, les requêtes externes, la taille de l’entrée, les conflits d’enregistrement, les nouvelles tentatives, le passage du profil de l’auteur en privé, le retrait, la suspension opérationnelle et le retour arrière. La mise en production du magasin à versions figées et l’affichage de données de test ont été confirmés, mais dans le périmètre de cet audit la mise en production et la recette avec session ouverte de l’extension d’édition CSS ne sont pas confirmées. Une vérification antérieure a relevé zéro thème public ; ce chiffre ne représente pas le nombre actuel. Les essais de bout en bout où de vrais utilisateurs soumettent et appliquent des thèmes, ainsi que des ventes payantes, n’ont pas été démontrés. Les conditions d’utilisation ne peuvent pas garantir que le CSS livré au navigateur ne sera jamais copié.

Pour l’entrée de modification, consultez l’importation de profils en brouillon ; pour l’exploitation du CMS, consultez le guide Sveltia CMS.