Latest CSS Styles in Framer

Framer broadly supports CSS properties often used in implementing modern UIs. For example, properties such as Blur, Filters, Blending, Z Index, Cursor, Pointer Events, and User Select are supported, and all these styles work reliably in the latest browsers.

In this guide, we will look at the Overscroll and Mask properties, which have been recently introduced to browsers.

Overscroll Property

Overscroll controls the response when a user reaches the end of a scrollable area. It is most effectively used when a Frame or Stack is set to Overflow: Scroll.

Overscroll Browser Support

• Chrome: 65+

• Chrome on Android: 111

• Edge: 79+

• Safari: 16+ (from September 2022)

• Safari on iOS: 16+

• Firefox: 59+

• Opera: 52+

• Opera Mobile: 73

• Samsung Internet: 8.2+

• Android Browser: 119

• Firefox for Android: 119

Mask Property

Mask is used to hide or reveal specific parts of an element (such as a Frame) using an image or gradient. It's especially useful in UIs requiring delicate visual expressions.

Mask Browser Support

• Chrome: 120+

• Chrome on Android: 120+

• Edge: 120+

• Safari: 15.4+

• Safari on iOS: 15.4+

• Firefox: 53+

• Opera: 106+

• Opera Mobile: 80

• Samsung Internet: 25+

• Android Browser: 120

• Firefox for Android: 53+

Conclusion

Thanks to Framer's latest CSS support, you can preserve design details while maintaining stable cross-browser compatibility. You can check the latest Framer support information on Can I Use.

This article is a translated and adapted content from Framer's official blog, ‘CSS Styles Support’.