브라우저 호환성

지원 매트릭스

브라우저최소 버전
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 사용자 지정 속성모든 스타일 패키지 (테마)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레이아웃보편적
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+ 훅모든 훅 및 컴포넌트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가 필요합니다. Headless와 동일한 JavaScript 호환성을 가집니다. 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년 이후 출시)를 대상으로 하는 대부분의 프로젝트에는 폴리필이 필요하지 않습니다.