Comments (8)
FYI Chrome might ship ResizeObserver in July: https://twitter.com/atotic/status/875754054780985344
Also, the Firefox implementation is most-of-the-way-there-but-stalled: https://bugzilla.mozilla.org/show_bug.cgi?id=1272409 Looks like there’s nothing but the lack of developer-bandwidth holding it back. (I’m super curious to see what WICG/resize-observer#17 looks like in practice)
from cq-prolyfill.
As an alternative for browsers that don’t support ResizeObserver, we could listen to some events that might trigger resizing of elements, like window.resize
, animationiteration
, animationcancel
, animationend
, transitioncancel
, transitionend
.
Maybe also observe changes to DOM attributes via MutationObserver, but this would reevaluate all container queries if a class name on the body element gets added. Might be too bad for performance.
from cq-prolyfill.
@ausi @tomhodgins @eeeps Chrome 64 will ship ResizeObserver.
To see the difference it makes, load this demo in both 63 and 64: https://twitter.com/ZeeCoder/status/951171243264303104
from cq-prolyfill.
This should be a boost in performance where you can use it. Have you decided how you'll handle this in browsers that don't support resizeObserver? Will they use a different version of the plugin, or will it keep a workaround for weaker browsers?
from cq-prolyfill.
My current plan is to offer a configuration option where you can pass a ResizeObserver polyfill if you want to use one. Otherwise it will fall back to the global ResizeObserver if available.
cq-prolyfill doesn’t currently watch for resizing of elements, it only reacts to the window resize event and to inserted DOM nodes. So If you choose not to use a ResizeObserver polyfill only the window resize event will trigger the script.
How do you handle resizing elements in EQCSS?
from cq-prolyfill.
cq-prolyfill doesn’t currently watch for resizing of elements, it only reacts to the window resize event and to inserted DOM nodes.
Hey @ausi :D We do it the exact same way in EQCSS, and with the goal of maintaining IE8 support (the browser before CSS media queries) I'm not sure we'll ever do things differently in EQCSS.
There is a lot of benefit to using a resize observer, and also mutation observers in the browsers that support them for hinting to your plugin that a recalculation might be needed, so in newer plugins targeted only at more recent browsers I'd definitely take advantage of them! :D
from cq-prolyfill.
I think ResizeObservers are perfectly suitable as an enhancement. We can use them soon, even if we still support older browsers.
But regarding browser support, I will probably raise the minimum IE version from 9 to 11 in one of the next releases. I don’t think it is necessary to support an old insecure browser with less than 0.5% market share, especially at the expense of other browsers.
from cq-prolyfill.
Great 🎉🎊👍
So I need to hurry up now to get this implemented in the next version :)
from cq-prolyfill.
Related Issues (20)
- Does cq-prolyfill inlined my style? HOT 1
- Minified cq-prolyfill.js file with gulp-concat doesn't work HOT 1
- Add stylesheet URL whitelist option
- Idea: ability to pre-parse CSS at build time
- Try to remove or reduce the FOUC problem HOT 10
- Add support for attribute selector based queries HOT 1
- Don’t run the script multiple times in the same frame HOT 1
- Use CSS Houdini (CSS Typed OM Level 1) to get the computed style HOT 1
- Check for max- and min-width and -height values
- In Safari with disabled cache container queries doesn't apply on first script load HOT 4
- Production as default, development/demo configurable HOT 1
- Improve getContainer, remove duplicated calls to getComputedStyle
- Raise minimum supported browser versions HOT 3
- Handling CSS Import Rule
- getContainer() delivers wrong element if element has size defined in percent HOT 8
- mixins.scss missing from package
- [IE11] Wrong Result if used with CSS Grid Layout HOT 2
- Don't work in Chrome 112 HOT 2
- Not working in Chrome anymore HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cq-prolyfill.