DEV Community

Discussion on: Rethinking responsive Webdesign

Collapse
 
blindfish3 profile image
Ben Calder

On Android Firefox I see:

ResizeObserver is not defined

Collapse
 
rezi profile image
Tomas Rezac

You are right, that browser doesn't support Resize Observer Api caniuse.com/#search=ResizeObserver

Collapse
 
miketalbot profile image
Mike Talbot ⭐

Will that work with a resize observer polyfill? I'm using that in a few places - think it works off mutationobserver

Thread Thread
 
rezi profile image
Tomas Rezac

I am affraid that even if it works, there is another api (Web Components), which is not supported much better. But I am considering to make kind of framework specific plugins for react, angular, vue, svelte frameworks. It would enable me to skip web component api and use something like this library: github.com/marcj/css-element-queries nstead of the ResizeObserver. It would make it bit more expensive, slightly bigger in size, but with way better support. The functinality should remain the same.

Thread Thread
 
miketalbot profile image
Mike Talbot ⭐ • Edited

Yeah I was looking at the polyfill for custom elements - not sure if that would work or not. I think this is very important work, but won't work for me unless it has IE11 support "somehow" as I write B2B software and 20%+ of my users are IE11 (don't trust caniuse stats for browsers in that environment...)

I do use ResizeObserver polyfilled and that is fine.

Thread Thread
 
rezi profile image
Tomas Rezac • Edited

Maybe I try to experiment first with some polyfills. It is always better to maintain one project, than 5 of them, for different frameworks. Will see if some of them fit to my needs. Anyway, I wanted to get some feedback first, before investing time to this project ;)
thanks for feedback btw

Thread Thread
 
miketalbot profile image
Mike Talbot ⭐

Count me in, anything I can do to help let me know.

Thread Thread
 
rezi profile image
Tomas Rezac • Edited

Currently the biggest help would be to try to use the grid in some real world markup (can be some random webpage template) and bring some feedback based on it. For instance, it could help me with a dilemma — whether the grid needs classes for sticky content (telling an element to be always aligned to the left/right side of the container).. It can be done now with the nesting of grids, but maybe people would appreciate being able to control it without nesting. I did not include that so far, as I wanted to keep it as small as possible for the beginning (sticky thing would need to generate quite lot of css rules based on element queries)

Thread Thread
 
miketalbot profile image
Mike Talbot ⭐

Ok sure, when I get a moment I'll go rework me recently written page to use it, could benefit from ultrawide having columns etc.