Browser support
Browser support
Mantine은 마이너·메이저 릴리스마다 실제 기기에서 아래 브라우저를 대상으로 테스트해요. Chrome, Safari, Firefox, Edge, iOS Safari, Chrome for Android 그리고 그 외 다른 브라우저 테스트는 수행하지 않아요.
출처: 문서
본문
Supported browsers
모든 Mantine 컴포넌트와 훅은 다음 브라우저에서 동작하도록 테스트했어요.
- Chromium 계열 브라우저 108+ – Chrome, Edge, Chrome for Android 등
- Firefox 101+
- Safari 15.4+
- IE(모든 버전)는 지원하지 않아요
Mantine 스타일에 필요한 [:where selector](https://caniuse.com/mdn-css_selectors_where)와 [@layer directive](https://caniuse.com/mdn-css_at-rules_layer) 기능을 지원하는 브라우저 버전(아래 버전은 스타일에 큰 문제가 있을 수 있어요):
- Chromium 계열 브라우저 99+ – Chrome, Edge, Chrome for Android 등
- Firefox 97+
- Safari 15.4+
CSS features that contribute to browser support
Mantine 컴포넌트는 다음 CSS 기능을 사용해요.
- 모든 컴포넌트의
:where셀렉터 - 모든 스타일의
@layer지시자 - 여러 컴포넌트의 비핵심 스타일에서
:has가상 클래스 - 대부분의 컴포넌트에서 flexbox gap
- 여러 컴포넌트의 dvh 단위
color-mix함수는 기본적으로 어떤 컴포넌트에서도 사용하지 않지만, alpha PostCSS 함수와 함께 직접 사용할 수 있어요.- 여러 컴포넌트에서
aspect-ratioCSS 속성 사용 - 모든
@mantine/schedule컴포넌트와 prop으로 명시적으로 옵션이 활성화된 일부 컴포넌트에서 container queries 사용
위 나열된 모든 CSS 기능은 모든 최신 브라우저(2024년 1월 기준 전 세계 사용량의 90% 이상)에서 지원돼요.
이전 브라우저를 지원해야 한다면 다음을 하세요:
- 사용 전 컴포넌트의
Browser support섹션을 확인하고 이 컴포넌트가 여러분의 상황에서 동작할지 판단 - 이전 브라우저에서 훅/컴포넌트가 동작하도록 필요한 폴리필을 설치
- 해당 브라우저에서 컴포넌트가 직접 동작하는지 확인(위 목록보다 오래된 브라우저에서는 Mantine을 테스트하지 않아요)
Polyfills
Mantine은 기본적으로 폴리필을 포함하지 않아요. 이전 브라우저를 지원해야 한다면 직접 설치해야 해요. 보통 폴리필은 여러분의 프레임워크 번들러(webpack, vite 등)가 browserslist 구성에 따라 프로젝트에 자동으로 추가해 줘요.