Ou appuyez sur ESC pour fermer.

Test HTML de la Mort

25 Aug 2026 50 Min de lecture
Test HTML de la Mort

💫 Le Test HTML de la Mort

Une seule page pour torturer le moteur de rendu : dégradés animés, grilles, cartes, tableau de prix, vidéo, accordéon et plus encore.

42
Composants testés
100%
CSS inline/scopé
0
Dépendance externe
Style

Fonctionnalités

🎯

Précision

Rendu pixel-perfect avec CSS Grid et Flexbox imbriqués.

Animations

Dégradés animés, blobs flottants et barres de progression.

📱

Responsive

Grilles qui s'adaptent sur mobile via media query.

🎨

Thématisable

Couleurs fixes conçues pour rester lisibles en light/dark.

🔄

Accordable

Blocs <details>/<summary> natifs, sans JS.

🎥

Embeds

iframe vidéo responsive en 16:9.

Progression

HTML brut95%
CSS animé88%
Compatibilité dark mode100%
Nouveau Stable Beta Expérimental Recommandé

Tarifs (juste pour tester un tableau de prix)

Starter

0€
  • 1 article de test
  • Support communautaire
  • Badge basique
Choisir

Studio

49€/mois
  • Tout Pro inclus
  • Support prioritaire
  • Accès anticipé
Choisir

Démo vidéo

Si ça passe ce test, ça passera n'importe quel article.

— Un admin qui a testé en dark mode

Questions fréquentes

Est-ce que le HTML brut est vraiment enregistré tel quel ?

Oui, sans échappement, grâce au mode "Code HTML" de l'éditeur.

Est-ce que ça fonctionne en mode sombre du site ?

Toutes les couleurs de ce bloc sont fixes (inline), donc indépendantes du thème clair/sombre du site.

Et les animations CSS ?

Dégradé animé, blobs flottants et barres de progression animées sont définis via une balise <style> scopée.

Info : ce bloc utilise une balise <style> scopée sous .ggp-test-demo.
Succès : le tableau de prix utilise CSS Grid avec une carte mise en avant.
Attention : les animations continues (dégradé, blobs, badges) tournent en boucle infinie.
Danger : si vous voyez ce texte en blanc sur blanc, un bug est revenu !

Extrait de code

// Exemple de snippet coloré à la main
function toggleCodeMode(editor) {
  const pretty = html_beautify("<div>...</div>");
  return pretty;
}

Fin du test

Si tout est aligné, coloré, animé et lisible : c'est gagné.

🎉 Ça marche

Commentaires

Laisser un commentaire



A lire aussi