Advanced styling of browser console.log

Question

The output of console.log can be styled and the basics are covered at the StackOverflow question Colors in JavaScript console.

Basic Styling

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');

Advanced Styling

What about advanced styles? How far can console.log be styled?

How about images? Using background-image doesn't seem to work.

How about display: block? It seems that setting display: block has no effect.

How about custom fonts? font-family seems to work but how to use custom fonts?

For my use case, I only need Chrome support.

Edit

I managed to implement images. The trick is to use a padding to set the size of the image. For example:

var style = [
  'background-image: url("https://media.giphy.com/media/3o85xoi6nNqJQJ95Qc/giphy.gif")',
  'background-size: contain',
  'background-repeat: no-repeat',
  'color: #000',
  'padding: 20px 20px',
  'line-height: 0px'
  ].join(';');
console.log('%c ', style);

Edit 2

Firefox blocks external images in console styles, but supports dataURIs: https://bugzil.la/1134512. Also, Firefox let's you simply display: block entries, see the list of properties supported by Firefox.

Answer 1

Chrome / Chromium seems to allow CSS properties beginning with any of the following prefixes:

• background
• border
• color
• font
• line
• margin
• padding
• text
• -webkit-background
• -webkit-border
• -webkit-font
• -webkit-margin
• -webkit-padding
• -webkit-text

For completeness' sake, @myf has already linked to the properties supported by Firefox. They are:

• background and its longhand equivalents.
• border-radius
• border and its longhand equivalents
• box-decoration-break
• box-shadow
• clear and float
• color
• cursor
• display
• font and its longhand equivalents
• line-height
• margin
• outline and its longhand equivalents
• padding
• text-* properties such as text-transform
• white-space
• word-spacing and word-break
• writing-mode