Framerの最新CSSスタイル

FramerではモダンUIを実現する際によく使用されるCSSプロパティを幅広くサポートしています。例えばBlur、Filters、Blending、Z Index、Cursor、Pointer Events、User Selectといったプロパティはスタイルをサポートしており、これらのすべてのスタイルは最新のブラウザで安定して動作します。

今回のガイドでは、その中でも最近ブラウザに導入されたOverscrollプロパティとMaskプロパティについてご紹介します。

Overscrollプロパティ

Overscrollは、ユーザーがスクロール可能な領域の末尾に到達した際にどのような動作をするかを制御するプロパティです。FrameやStackがOverflow: Scrollに設定されている場合に最も有効に利用されます。

Overscrollブラウザ対応状況

• Chrome: 65+

• Chrome on Android: 111

• Edge: 79+

• Safari: 16+ (2022年9月から)

• Safari on iOS: 16+

• Firefox: 59+

• Opera: 52+

• Opera Mobile: 73

• Samsung Internet: 8.2+

• Android Browser: 119

• Firefox for Android: 119

Maskプロパティ

Maskは、画像やグラデーションを使用して要素（Frameなど）の特定の部分を隠したり露出させたりするのに使われます。繊細な視覚表現が必要なUIで特に有用なプロパティです。

Maskブラウザ対応状況

• 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+

まとめ

Framerの最新CSSサポートのおかげで、デザインのディテールをそのまま実現しつつ、安定したクロスブラウジングを維持できます。Framerの最新サポート情報はCan I Useで確認できます。

本記事はFramer公式ブログの『CSS Styles Support』の内容を翻訳・アレンジしたコンテンツです。