ブラウザ互換性

サポートマトリックス

ブラウザ最小バージョン
Chrome88+
Edge88+ (Chromium)
Firefox85+
Safari15.4+
iOS Safari15.4+
Samsung Internet15+

IE 11はサポートされていません。 このライブラリは、CSSカスタムプロパティ、最新のJavaScript API、およびReact 18+に依存しています。

Safari 15.4の最小要件は、Styledパッケージのフォーカスインジケータースタイルで使用されている :focus-visible のサポートによって決まります。

CSS機能

機能使用箇所最初のサポート
CSS Custom Propertiesすべてのstyledパッケージ (テーマ設定)Chrome 49, Firefox 31, Safari 9.1
:focus-visibleフォーカスインジケーター (Styled)Chrome 86, Firefox 85, Safari 15.4
color-schemeダークモードのネイティブ入力 (Styled)Chrome 81, Firefox 96, Safari 12.1
prefers-color-scheme自動ダークモード (Styled)Chrome 76, Firefox 67, Safari 12.1
prefers-reduced-motionモーション削減 (Styled)Chrome 74, Firefox 63, Safari 10.1
scroll-snap-typeタイムピッカーのスクロール (Styled)Chrome 69, Firefox 68, Safari 11
FlexboxレイアウトUniversal
CSS GridカレンダーグリッドChrome 57, Firefox 52, Safari 10.1

JavaScript API

API使用箇所最初のサポート
Intl.DateTimeFormatcreateLocale() ロケール生成すべてのモダンブラウザ
Intl.DateTimeFormat.formatToPartsAM/PMラベルの抽出Chrome 57, Firefox 51, Safari 11
ResizeObserver@floating-ui/react ポップアップ配置Chrome 64, Firefox 69, Safari 13.1
React 18+ hooksすべてのフックとコンポーネントReact 18.0+

パッケージ別の注意点

Headless

CSSの依存関係はありません。React 18+と標準のJavaScript APIのみが必要です。Reactをサポートするすべての環境と互換性があります。

Styled

CSSカスタムプロパティ、:focus-visible、color-scheme、および scroll-snap-type を使用します。ブラウザサポートのボトルネックは Safari 15.4+ (:focus-visibleのため) です。

スクロールベースのタイムピッカーは、非表示のスクロールバーで scroll-snap-type: y mandatory を使用します。慣性/運動量の実装がプラットフォームごとに異なるため、スクロールの挙動が若干異なる場合があります。

Tailwind v3

Tailwind CSS v3が必要です。JavaScriptの互換性はHeadlessと同じです。CSSのサポートはTailwind v3の出力に依存します (広く互換性があります)。

Tailwind v4

Tailwind CSS v4が必要です。v4自体がモダンなCSS機能 (@layer, @property, CSSネスティング) を使用しています。詳細については、Tailwind CSS v4のブラウザサポートを参照してください。

ポリフィル

最小バージョンをわずかに下回るブラウザをサポートする必要があるプロジェクト向け:

機能ポリフィル
:focus-visiblefocus-visible
ResizeObserverresize-observer-polyfill
Intl.DateTimeFormat@formatjs/intl-datetimeformat (エッジケースのみ)
💡 Tip

モダンブラウザ (2022年以降にリリース) を対象とするほとんどのプロジェクトでは、ポリフィルは不要です。