크로스 브라우저 차이 분류

지원 범위 정의

막연히 모든 브라우저가 아니라 사용자 비율, OS, 기기, 회사 정책을 바탕으로 target을 정합니다.

범위

JS API, CSS 속성, form 기능은 caniuse, MDN, 실제 테스트로 확인하고 필요한 polyfill을 구분합니다.

feature

폰트 렌더링, flex/grid edge case, viewport 단위, 스크롤바가 화면을 바꿀 수 있습니다.

layout

쿠키 SameSite, autoplay, CORS, file input, permission API는 브라우저 보안 정책에 따라 다르게 보입니다.

policy

CSS

지원 여부와 fallback 스타일을 함께 확인 @supports로 새 기능을 점진 적용하면 구형 브라우저도 기본 경험을 유지합니다.

style

JavaScript API

문법 변환과 API polyfill을 구분 optional chaining은 Babel, fetch나 ResizeObserver는 polyfill 검토 대상입니다.

runtime

Device

마우스, 터치, 키보드, 화면 크기 차이를 같이 봄 hover 전용 UI는 터치 기기에서 접근 문제가 됩니다.

input

대상 선언 프로젝트의 browserslist가 실제 지원 정책과 맞는지 먼저 확인합니다.

실기기 확인 에뮬레이터만 믿지 말고 핵심 경로는 실제 브라우저 조합에서 봅니다.

fallback 지원하지 않는 기능이 있을 때 빈 화면이 아니라 제한된 동작으로 떨어지게 합니다.

if ('IntersectionObserver' in window) {
  enableLazyLoading();
} else {
  loadImagesImmediately();
}