console.delight - ブラウザのコンソール画面で CSS、SVG、HTML を使う

• コンソール画面をきれいにして、好奇心旺盛なユーザーにブランドを印象づける
• Photoshop のオンライン版は、コンソールでアイコンやさまざまな色を使ってバージョンを表示している
• console.log/info では制限はあるものの、CSS / SVG および data:image を活用して画像表現も可能

コンソールでサポートされる機能

• SVG
  • 基本的な SVG 表現: circle、path など
  • Gradient、Clip Path、Mask、Filter、Transform、SMIL アニメーション、foreignObject、Patterns
• CSS
  • CSS アニメーション、CSS 変数、@media クエリ、Viewport ユニット
  • background-image: linear-gradient()
• JavaScript
  • SVG 内での DOM リファレンス、SVG DOM の変更
  • グローバル変数および CSS 変数の活用
• HTML レンダリング
  • SVG と似た制限がある。a タグは利用不可、イベントリスナーも不可など
  • SVG の foreignObject 内の HTML では 3D Transform も可能