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

HC5 - Inline styles #6173

Open
sebastianbochan opened this Issue Dec 23, 2016 · 4 comments

Comments

Projects
None yet
3 participants
@sebastianbochan
Contributor

sebastianbochan commented Dec 23, 2016

Expected behaviour

No inline styles

Actual behaviour

Inline styles are still applied.

Live demo with steps to reproduce

We still have inline styles:

Affected browser(s)

All browsers

zrzut ekranu 2016-12-23 o 11 02 08

EDIT:

  • errors when content-security-policy header is applied
@KacperMadej

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Jan 30, 2017

Contributor

Another inline CSS can be found in defaultOptions for tooltip. It is later producing style="font-weight:bold" in SvgRenderer.

Contributor

KacperMadej commented Jan 30, 2017

Another inline CSS can be found in defaultOptions for tooltip. It is later producing style="font-weight:bold" in SvgRenderer.

@KacperMadej

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Feb 1, 2017

Contributor

Another problem: For Content Security Policy <style>.highcharts-tooltip-0{filter:url(#drop-shadow-0)}</style> that is being added to <defs> when displaying a tooltip (here in code) is considered violation of inline styles.

Demo: http://jsfiddle.net/ksvbztm0/ (content of the problematic style tag in browser console)

Contributor

KacperMadej commented Feb 1, 2017

Another problem: For Content Security Policy <style>.highcharts-tooltip-0{filter:url(#drop-shadow-0)}</style> that is being added to <defs> when displaying a tooltip (here in code) is considered violation of inline styles.

Demo: http://jsfiddle.net/ksvbztm0/ (content of the problematic style tag in browser console)

@KacperMadej KacperMadej reopened this Feb 1, 2017

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Feb 2, 2017

Collaborator

Now that's a tough one. I don't know how we can apply the drop shadow without this inline style. It references another definition, and if we put the style rule in the external CSS, we mess up the reference. So in order to accomplish this I think we need to disable the shadows entirely or if possible avoid using filters. The same goes for the different faces of 3D columns.

A workaround is to override the Tooltip.applyFilter function: http://jsfiddle.net/highcharts/ksvbztm0/1/

Collaborator

TorsteinHonsi commented Feb 2, 2017

Now that's a tough one. I don't know how we can apply the drop shadow without this inline style. It references another definition, and if we put the style rule in the external CSS, we mess up the reference. So in order to accomplish this I think we need to disable the shadows entirely or if possible avoid using filters. The same goes for the different faces of 3D columns.

A workaround is to override the Tooltip.applyFilter function: http://jsfiddle.net/highcharts/ksvbztm0/1/

@sebastianbochan

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Aug 11, 2017

Contributor

+1

Contributor

sebastianbochan commented Aug 11, 2017

+1

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