1579197 - document which CSS is supported for %c styling

Status: RESOLVED FIXED

(DevTools :: Console, enhancement, P3)

Description

[Pomax]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36

Steps to reproduce:

I've been trying to find any documentation on which CSS properties can, and cannot, be used for styled console.log text using the %c syntax, and while the MDN docs for console.log mention that %c exists, there is zero information on what it actually supports.

Could someone who knows where the list of supported properties lives in the tree update the console.log MDN article to include which properties are/are not supported?

Comment 1

[:Harald Kirschner :digitarald]

Yes, MDN team can hopefully help with this.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Here's the regex we use for the allowed properties:

devtools/client/webconsole/components/Output/GripMessageBody.js#91-96

Comment 3

[Chris Mills [:cmills]]

I've had a go at doing this:

https://developer.mozilla.org/en-US/docs/Web/API/Console#Styling_console_output

Let me know what you think.

I tested pretty much all of the properties that the regex would match, but I missed out a couple of bits that really don't look like they have any discernable effect. The main ones that come to mind are transition (you can't enter a state for the logged message such as :hover, so how would this do anything?) and (min|max)-width|height — no combinations of these would do anything, afaics.

Let me know if you think I'm missing anything; thanks!

Comment 4

[:Harald Kirschner :digitarald]

This is great, thanks so much Chris.

Closing this bug for now. Please re-open (or edit on MDN) if you see any gaps.

Comment 5

[Pomax]

That's fantastic, thanks so much!