웹 개발에서 브라우저 호환성은 중요한 문제입니다. 최신 CSS, JavaScript 기능을 사용하면서도 구버전 브라우저 지원을 고려해야 합니다. 이런 상황에서 browserslist를 활용하면 프로젝트의 대상 브라우저를 명확하게 관리할 수 있습니다.
Browserslist란?
browserslist는 프로젝트에서 지원할 브라우저의 범위를 정의하는 도구입니다.
주로 Autoprefixer, Babel, ESLint, Stylelint 등과 함께 사용되어, CSS 전처리, JS 트랜스파일, 코드 린팅 등에서 브라우저 호환성을 자동으로 관리할 수 있습니다.
- 브라우저 버전을 직접 명시하거나
- 점유율, 최신 버전 등을 기준으로 범위를 지정
할 수 있습니다.
기본 문법 예시
터미널에서 바로 쿼리하려면 아래와 같이 작성하면 됩니다.
npx browserslist "쿼리"1. 점유율 기준
> 0.5%- 글로벌 점유율 0.5% 이상인 브라우저를 모두 포함합니다.
- Chrome, Safari, Edge, Firefox, iOS Safari 등 사용자가 많은 브라우저는 자동으로 포함됩니다.
2. 최신 브라우저 기준
last 2 versions- 각 브라우저의 최근 2개 버전을 포함합니다.
- 예: Chrome 140, 139 / Firefox 143, 142 등
3. 특정 브라우저 제외
not IE 11- IE 11을 지원 대상에서 제외합니다.
- 필요에 따라 구버전 브라우저를 제거할 수 있습니다.
Browserslist 통계 정보
browserslist는 기본적으로 Can I use 데이터를 사용합니다.- 점유율 기준(
> 0.5%)은 전 세계 사용량 통계를 기반으로 합니다. - 통계 정보는 주기적으로 업데이트되므로, 프로젝트에서 항상 최신 통계를 반영할 수 있습니다.
npx browserslist --update-db- 위 명령어로 브라우저 점유율 데이터베이스를 최신 상태로 갱신할 수 있습니다.
- 새로운 브라우저 등장, 점유율 변화 등을 반영하여 호환성을 유지합니다.
package.json에 적용 예시
{
"browserslist": [
"> 0.5%",
"last 2 versions",
"not dead",
"not IE 11"
]
}> 0.5%: 점유율 0.5% 이상 브라우저 포함last 2 versions: 최근 2개 버전 지원not dead: 개발 중단 브라우저 제외not IE 11: IE 11 제외
정리
browserslist를 통해 브라우저 지원 범위를 명확하게 정의 가능- 점유율, 최신 버전, 특정 브라우저 제외 등 다양한 기준을 조합 가능
- 통계 데이터 업데이트(
npx browserslist --update-db)로 최신 점유율 반영 - Babel, Autoprefixer 등 다양한 도구와 연동하여 자동 호환성 관리 가능
웹 프로젝트에서 브라우저 호환성 관리는 정기적인 유지보수가 필요합니다.browserslist를 사용하면 기준을 한 곳에서 관리하고, 도구가 자동으로 처리하도록 만들어 개발 효율성을 높일 수 있습니다.