브라우저와 기기

브라우저와 기기 (Browsers and devices)

Bootstrap이 공식적으로 지원하는 브라우저와 기기의 범위를 정리한 문서예요. 프로젝트에서 어떤 브라우저까지 지원할지 기준을 세울 때 참고하면 좋아요.

출처: 문서

본문

지원하는 브라우저 (Supported browsers)

Bootstrap은 모든 주요 브라우저와 플랫폼의 최신 안정 버전을 지원해요.

최신 버전의 WebKit, Blink, Gecko를 사용하는 대체 브라우저는(플랫폼의 web view API를 통해서든 직접이든) 명시적으로 지원되지는 않아요. 하지만 대부분의 경우 Bootstrap은 그런 브라우저에서도 정상적으로 표시되고 동작해야 해요. 더 자세한 지원 정보는 아래에서 확인할 수 있어요.

지원하는 브라우저 범위와 버전은 .browserslistrc 파일에서 확인할 수 있어요.

# https://github.com/browserslist/browserslist#readme

>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11
not kaios <= 2.5 # fix floating label issues in Firefox (see https://github.com/postcss/autoprefixer/issues/1533)

우리는 Autoprefixer를 사용해서 CSS 접두사(prefix)를 통해 의도한 브라우저 지원을 처리하는데, 이때 Browserslist로 해당 브라우저 버전을 관리해요. 이 도구들을 프로젝트에 어떻게 통합하는지는 각각의 문서를 참고하세요.

모바일 기기 (Mobile devices)

일반적으로 Bootstrap은 각 주요 플랫폼의 기본 브라우저 최신 버전을 지원해요. 프록시 브라우저(Opera Mini, Opera Mobile의 Turbo 모드, UC Browser Mini, Amazon Silk 등)는 지원하지 않는다는 점 참고하세요.

	Chrome	Firefox	Safari	Android Browser & WebView
Android	지원	지원	—	v6.0+
iOS	지원	지원	지원	—

데스크톱 브라우저 (Desktop browsers)

마찬가지로 대부분의 데스크톱 브라우저 최신 버전을 지원해요.

	Chrome	Firefox	Microsoft Edge	Opera	Safari
Mac	지원	지원	지원	지원	지원
Windows	지원	지원	지원	지원	—

Firefox의 경우 최신 일반 안정 버전 외에도 최신 Extended Support Release (ESR) 버전도 함께 지원해요.

비공식적으로는 Chromium과 Linux용 Chrome, 그리고 Linux용 Firefox에서도 Bootstrap이 충분히 잘 표시되고 동작해야 하지만, 공식 지원 범위는 아니에요.

Internet Explorer

Internet Explorer는 지원하지 않아요. Internet Explorer 지원이 필요하다면 Bootstrap v4를 사용하세요.

모바일에서의 모달과 드롭다운 (Modals and dropdowns on mobile)

오버플로우와 스크롤 (Overflow and scrolling)

iOS와 Android에서는 <body> 요소에 overflow: hidden;을 적용하는 지원이 상당히 제한적이에요. 그래서 두 기기의 브라우저에서 모달의 위나 아래 끝을 지나 스크롤하면 <body> 콘텐츠가 함께 스크롤되기 시작해요. Chrome 버그 #175502(Chrome v40에서 수정됨)와 WebKit 버그 #153852를 참고하세요.

iOS 텍스트 필드와 스크롤 (iOS text fields and scrolling)

iOS 9.2부터는 모달이 열려 있는 상태에서 스크롤 제스처의 첫 터치가 텍스트 <input>이나 <textarea>의 경계 안에서 시작되면, 모달 자체가 아니라 모달 아래의 <body> 콘텐츠가 스크롤돼요. WebKit 버그 #153856을 참고하세요.

z-index 계산이 복잡하기 때문에 iOS에서는 내비게이션에서 .dropdown-backdrop 요소를 사용하지 않아요. 따라서 내비게이션 바에서 드롭다운을 닫으려면 드롭다운 요소 자체를(또는 iOS에서 click 이벤트를 발생시키는 다른 요소) 직접 클릭해야 해요.

브라우저 확대/축소 (Browser zooming)

페이지 확대/축소는 Bootstrap과 웹 전반에서 일부 컴포넌트에 렌더링 아티팩트를 피할 수 없이 만들어내요. 문제에 따라서는 수정할 수 있을 수도 있어요(먼저 검색해 보고, 필요하면 이슈를 열어 보세요). 하지만 대부분 임시방편 외에는 직접적인 해결책이 없는 경우가 많아서, 우리는 보통 이런 문제들을 무시하는 편이에요.

검증기 (Validators)

Bootstrap은 오래되고 버그가 많은 브라우저에서도 최상의 경험을 제공하기 위해 몇몇 곳에서 CSS 브라우저 해킹을 사용해서 특정 브라우저 버전에 맞춘 특수 CSS를 적용해 브라우저 자체의 버그를 우회해요. 이런 해킹 때문에 CSS 검증기에서 유효하지 않다고 경고하는 것은 당연한 일이에요. 또 몇몇 곳에서는 아직 완전히 표준화되지 않은 최신 CSS 기능을 사용하기도 하는데, 이는 순전히 점진적 향상(progressive enhancement)을 위한 것이에요.

이런 검증 경고는 실제로 문제가 되지 않아요. 해킹이 아닌 부분의 CSS는 완전히 검증을 통과하고, 해킹 부분도 해킹이 아닌 부분의 정상적인 동작을 방해하지 않기 때문이에요. 그래서 우리는 이런 특정 경고들을 의도적으로 무시해요.

우리의 HTML 문서에도 특정 Firefox 버그에 대한 우회책을 포함했기 때문에 사소하고 무해한 HTML 검증 경고가 몇몇 있어요.

더 알아보기 (Learn more)

Bootstrap 문서

브라우저와 기기