console.delight - CSS, SVG und HTML in der Browser-Konsole verwenden

• Die Konsole optisch ansprechend gestalten, um bei neugierigen Nutzerinnen und Nutzern Markenwirkung zu erzeugen
• Die Online-Version von Photoshop zeigt in der Konsole mit Icons und verschiedenen Farben die Version an
• console.log/info sind zwar eingeschränkt, aber mit CSS/SVG und data:image lassen sich auch Bilder darstellen

In der Konsole unterstützte Funktionen

• SVG
  • Grundlegende SVG-Darstellungen: circle, path usw.
  • Gradient, Clip Path, Mask, Filter, Transform, SMIL-Animationen, foreignObject, Patterns
• CSS
  • CSS-Animationen, CSS-Variablen, @media-Queries, Viewport-Einheiten
  • background-image: linear-gradient()
• JavaScript
  • DOM-Referenzen innerhalb von SVG, Änderungen am SVG-DOM
  • Nutzung globaler Variablen und CSS-Variablen
• HTML-Rendering
  • Ähnliche Einschränkungen wie bei SVG. Nutzung von a-Tags nicht möglich, keine Event-Listener usw.
  • HTML innerhalb von foreignObject in SVG unterstützt auch 3D-Transformationen