Browser compatibility

[lbineau]

Browser compatibility

[AustinGil]

Oh dang. Yeah, I do think browser compatibility is important. I based the decision on caniuse

https://caniuse.com/mdn-css_selectors_where
https://caniuse.com/mdn-css_properties_inset

Do you mind sharing the details of your system so I can double-check it? https://www.whatsmybrowser.org/

For now, you can stick to a previous version until I sort out a good approach forward :)

(Also, curious if you might share what projects you're using Vuetensils on?)

[lbineau]

Thanks for the fast reply as always :-)
Here is the browserlist I'm using based on my client requirements:

  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11",
    "Chrome >= 81",
    "Edge >= 81",
    "ChromeAndroid >= 81",
    "Firefox >= 75",
    "FirefoxAndroid >= 68.7",
    "Safari >= 13.1",
    "iOS >= 13.1",
    "Samsung >= 11.1",
    "Opera >= 68"
  ]

Basically, iOS is often the bottleneck because Safari version is coupled with the OS version. I is not rare to have iOS13 for instance.
The problem is if :where is not available, the whole selector is being ignored and there is in the end no CSS applied on Vuetensils component for browsers < 2021.
I'm unfortunately not allowed to share the work, but I can give you the stack we are using:

• Adobe Experience Manager monolith approach, DOM generated by the Backend.
• VueJs on the frontend with 1 Vue application per component as components can be added, edited, or removed dynamically from the page by an author.
• I'm using VDrawer, VToggle (I had to fork it), VAlert. I'm also considering "Try" which looks really great for async calls.

[AustinGil]

Yeah, that makes sense. Ugh, too bad because :where makes the specificity of the library so much better to deal with.

Why did you have to fork VToggle? I do try to make them easily forkable, so that's cool. VTry is pretty basic, but you should really checkout VAsync for async stuff. It's one of my favorites :) I'd like to figure out a composable for it as well, but the API is hard to get right.

[lbineau]

Mostly at first because the Vue 3 version was not ready yet at the time. Then my project is in Typescript so I had to rework the component, and then I started to tweak it here and there (close on click outside, close on escape key, etc). Eventually, I tweaked too much the component to replace it back with yours when Vue 3 version was released 😅.

[AustinGil]

Cool. Well if any of it makes sense for to add to Vuetensils, let me know, or feel free to submit a PR.

[AustinGil]

Cool. Well if any of it makes sense for to add to Vuetensils, let me know, or feel free to submit a PR.

[AustinGil]

Just published a new version without :where