What CSS properties should be supported by %c?

[xirzec]

The naive answer is to accept whatever the user passes as the second argument (as Firefox appears to), but there are plenty of styles that don't make sense to allow (e.g. display, float, etc.) Chrome seems to block several of these in its console, though I can't find a documented list of what they allow/disallow.

I can imagine there may be some security considerations if no filtering is done where a malicious webpage could abuse CSS to break the console or trick the user.

I feel like it would be helpful to have a standard list of supported properties, that all consoles should make sure work (e.g. color, background-color, font-weight.) Does anyone have any thoughts about this? Otherwise I can hazard going through all the possible css properties myself.

Full disclosure: I'm currently working on the Edge F12 Console trying to add this support and I don't want to miss a CSS property that folks want to set.

[domfarolino]

@xirzec Thanks for raising this issue. It looks like even Firefox doesn't support things like opacity, visibility, and display, and both Chrome and Firefox support padding in the x-axis but not the y-axis.

My guess is the best thing for now is to first get a basic list of necessary "core" already-widely-supported properties, as those are obviously a priority and fair game for developers to expect to work. As far as an extensive list goes, perhaps @paulirish may have some information regarding what properties Chrome allows/supports? Maybe this could help us curate a core set of properties assuming this is the best route to go.

[domenic]

@JosephPecoraro may also be able to help us understand what CSS WebKit supports in %c

[paulirish]

Here's our whitelist:

'background', 'border', 'color', 'font', 'line', 'margin', 'padding', 'text', '-webkit-background',
  '-webkit-border', '-webkit-font', '-webkit-margin', '-webkit-padding', '-webkit-text'

A few twists though:

1. It's a startsWith() whitelist. So any text-* style like text-decoration will work.
2. Technically, we take the string of css, apply it to an element, then iterate over elem.style and then check this whitelist. This approach was adopted when the whitelist was first adopted.

[JosephPecoraro]

Same for WebKit.

[terinjokes]

How should we document these properties? What should the behavior be for non-GUI implementations?

[domfarolino]

Regarding non-GUI implementations, following #6 I think we should explain, similarly to how we do in https://console.spec.whatwg.org/#formatting-specifiers and https://console.spec.whatwg.org/#object-formats, that the application of styles is optional, and then perhaps document what some common implementations support (like the whitelist above).