variable width using css custom properties

[fujeffrey1]

No description provided.

[antony]

Looks good apart from some minor tweaks. Out of interest, how is browser compatibility for CSS vars?

[ahopkins]

Out of interest, how is browser compatibility for CSS vars?

@antony Quite good in my opinion. Definitely acceptable in for my work.

[antony]

Out of interest, how is browser compatibility for CSS vars?

@antony Quite good in my opinion. Definitely acceptable in for my work.

Unfortunately lack of support for IE11 is a dealbreaker. What options do we have regarding the support for legacy (but not dead) browsers?

[fujeffrey1]

The simplest way is to try using this polyfill: https://jhildenbiddle.github.io/css-vars-ponyfill/#/

Otherwise, I can also look into other workarounds/implementations.

[fujeffrey1]

I also got it to work with this: https://stackoverflow.com/a/31868716/11268067

It looks more hacky, but doesnt require any polyfills/libraries.

[antony]

Short of adding ponyfills (note, it is indeed a ponyfill, you have to run it for each new element), which seems like overkill for one property, I think we'd need to look at a more static way of doing this for one very specific reason - with the code as it is now, if you were to create a 20vw notification and then an 80vw one, it would resize all elements currently on the screen when it appeared.

[fujeffrey1]

Short of adding ponyfills (note, it is indeed a ponyfill, you have to run it for each new element), which seems like overkill for one property, I think we'd need to look at a more static way of doing this for one very specific reason - with the code as it is now, if you were to create a 20vw notification and then an 80vw one, it would resize all elements currently on the screen when it appeared.

I agree that could be an issue but it seems like a very specific edge case. I can't imagine a use case where a NotificationDisplay component would be created dynamically to trigger this. I also didn't plan for multiple NotificationDisplays because the existing code doesn't really support this (notify would notify all components, they would all be positioned in the top right and overlap, etc).

[antony]

@fujeffrey1 I'm not talking about multiple NotificationDisplay components, I'm saying, if you create a custom notification size it will resize all other notifications which already exist on the screen, since it resizes the container.

The code definitely doesn't support multiple NotificationDisplay components, that would (at least per my original plan) defeat the purpose.

[mehdiraized]

i need this in desktop very bad show notification toast

[antony]

@mehdiraized then have a think about how we can work around the issue mentioned above and we can progress the PR.

[antony]

In a few months we can merge this, since IE11 will be truly dead!

[antony]

Coming back to this, I think this would be better implemented as a style prop: https://svelte.dev/docs#template-syntax-component-directives---style-props