console.delight - Utiliser CSS, SVG et HTML dans la console du navigateur

• Embellir la fenêtre de console pour renforcer l’image de marque auprès des utilisateurs curieux
• La version en ligne de Photoshop affiche sa version dans la console avec des icônes et diverses couleurs
• console.log/info sont limités, mais il est tout de même possible d’afficher des images en utilisant CSS/SVG et data:image

Fonctionnalités prises en charge dans la console

• SVG
  • Expressions SVG de base : circle, path, etc.
  • Gradient, Clip Path, Mask, Filter, Transform, animation SMIL, foreignObject, Patterns
• CSS
  • Animations CSS, variables CSS, requêtes @media, unités de viewport
  • background-image: linear-gradient()
• JavaScript
  • Références DOM dans le SVG, modification du DOM SVG
  • Utilisation de variables globales et de variables CSS
• Rendu HTML
  • Présente des limitations similaires à SVG. Impossible d’utiliser la balise a, pas de listeners d’événements, etc.
  • Le HTML à l’intérieur du foreignObject d’un SVG peut aussi utiliser des transformations 3D