New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

What CSS properties should be supported by %c? #98

Open
xirzec opened this Issue Mar 24, 2017 · 6 comments

Comments

6 participants
@xirzec

xirzec commented Mar 24, 2017

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

This comment has been minimized.

Member

domfarolino commented Mar 24, 2017

@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

This comment has been minimized.

Member

domenic commented Mar 26, 2017

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

@paulirish

This comment has been minimized.

paulirish commented Mar 27, 2017

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

This comment has been minimized.

JosephPecoraro commented Mar 28, 2017

Same for WebKit.

@terinjokes

This comment has been minimized.

Collaborator

terinjokes commented Apr 5, 2017

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

@domfarolino

This comment has been minimized.

Member

domfarolino commented May 27, 2018

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment