Intersection Observer comes to Firefox
Knowing whether or not an element is #visible has traditionally been difficult on the Web. Most solutions listen for scroll and resize events, then use #DOM #APIs like getBoundingClientRect() to manually calculate where elements are relative to the #viewport. This usually works, but it’s inefficient and doesn’t take into account other ways in which an element’s visibility can change, such as a large image finally loading higher up on the page, which pushes everything else downward.
These techniques kill performance, drain batteries, and would be completely unnecessary if the browser could just notify us whenever an element’s visibility changed.
At its most basic, the #IntersectionObserver API looks something like:
let observer = new IntersectionObserver(handler);
observer.observe(target); // <-- Element to watch
IntersectionObserver is available by default in Edge 15, Chrome 51, and Firefox 55, which is due for release next week.
A polyfill is available which works effectively everywhere, albeit without the performance benefits of native implementations.
Using #Feature_Queries in #CSS ★ Mozilla Hacks – the Web developer blog
There’s a tool in CSS that you might not have heard of yet. It’s powerful. It’s been there for a while. And it’ll likely become one of your favorite new things about CSS.
Behold, the #@supports rule. Also known as Feature Queries.
With @supports, you can write a small test in your CSS to see whether or not a particular “feature” (CSS property or value) is supported, and apply a block of code (or not) based on the answer.