부트스트랩 및 많은 웹 개발에서 사용되고 있는 Respond.js에 대하여 알아봅니다.
Respond.js 소개
IE 6~8 버전에서 미디어쿼리를 해석할 수 있도록 만들어주는 자바스크립트 라이브러리이다. 어떤 용도로 사용해도 제한이 없는 MIT 또는 BSD 라이선스를 가지고 있기 때문에 소스 코드에 포함된 라이선스 명시 조항만 지우지 않으면 github에서 언제든 내려받아 사용할 수 있다.
- DEMO
- 데모보기
Respond.js 사용법
IE8 이하 버전에서만 사용하도록 조건부 주석문을 사용한다. 시작과 동시에 로딩이 되도록 <head>에 위치시키고 respond.js는 웹서버 환경에서 테스트 해야 작동한다.
아래는 CDN을 사용했으나 직접 다운로드 받은 파일을 링크해도 된다.
<head>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
CDN/X-Domain Setup
Respond.js는 AJAX를 통해 CSS의 사본을 요청하는 방식으로 작동한다. 그래서 CDN(또는 서브도메인)을 통해 CSS를 호스팅하는 경우에는 도메인 간 통신을 가능하게하는 프록시 페이지를 업로드해야 한다.
cross-domain/example.html 데모를 보라 :
- 외부(external) 도메인에
cross-domain/respond-proxy.html를 업로드한다. - 원래(origin) 도메인에
cross-domain/respond.proxy.gif를 업로드한다. <link>요소를 통해 파일을 참조 :<!-- Respond.js proxy on external server --> <link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" /> <!-- Respond.js redirect location on local server --> <link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" /> <!-- Respond.js proxy script on local server --> <script src="/path/to/respond.proxy.js"></script>
If you are having problems with the cross-domain setup, make sure respond-proxy.html does not have a query string appended to it.
Respond.js 지원 및 주의사항
염두에 두어야할 몇가지 :
- 이 스크립트는 의도적으로 매우 적은 부분만을 지원한다 :
min-width와max-width쿼리와 모든 미디어타입(screen, print, etc)을 지원하지 않는 브라우저를 지원하도록 만든다. 파일크기, 유지보수, 성능에 대해 단순함을 유지하고 싶었기 때문에, 의도적으로 반응형(모바일 퍼스트기법) 디자인을 구축하는 것에 필수적인 쿼리만 지원해 왔다. 미래에 추가적인 미디어쿼리 기능등을 포함한 재작업이 있을 수 있다. - 기본적으로 CSS3 미디어쿼리를 지원하는 브라우저는 이 스크립트를 가능한한 빨리 제거한다. 지원을 위한 테스트에서 모든 다른 브라우저들은 스크립트를 실행하기 전에 미디어 쿼리의 지원 여부를 결정하기 위해 빠른 시험을 실시한다. 이 테스트는 상단에 별도로 포함되어 있고,
window.matchMedia폴리필을 사용한다(https://github.com/paulirish/matchMedia.js). 만약에 이미 Modernizr와 같은 폴리필등을 사용하고 있다면 그 부분을 제거하길 바란다. - 이 스크립트는 다른 프레임워크나 스크립트에 의존적이지 않고, 모바일 전송량을 최적화 시켰다(~1Kb 파일사이즈 min/gzip).
- 당신의 추측대로, 이 구현은 CSS 해석 룰에 관해서는 아주 바보이다. 정말 빠르게 실행되는 좋은 점이 있지만, 이 느슨함이 예기치 않은 행동을 야기할 수도 있다. 예를 들면: 미디어쿼리 룰을 비활성화하기 위해 주석처리 할 경우에, 미디어쿼리를 지원하지 않는 브라우저에서는 그 룰을 활성화시킨다는 것을 알아채게 될 것이다.
- Respond.js는
@import를 통해 참조한 CSS를 해석하지 않고, 해석을 위해 재요청하지 않으므로<style>요소안에 미디어쿼리도 작동하지 않는다(Respond.js doesn't parse CSS referenced via @import, nor does it work with media queries within style elements, as those styles can't be re-requested for parsing.) - 보안 제한 사항으로 인해, 어떤 브라우저들은 이 스크립트가
file://URL에서 작동하는 것을 허락하지 않는다 (xmlHttpRequest 사용하기 때문에). 웹서버에서 실행해라. - 만일, MQ-specific styling을 포함하는 CSS 요청이 리다이렉트 뒤에 있다면 Respond.js는 자동으로 실패한다. CSS 파일은 200 상태로 응답한다.
- 현재,
<link>요소에 미디어쿼리 속성이 지원되지만, 오직 링크된 스타일시트에 미디어쿼리가 없는 경우로만 국한된다. 만일 쿼리를 포함하고 있다면, 미디어 속성은 무시되고 내부 쿼리는 정상적으로 해석될 것이다. 다시말하면, CSS의 우선순위는@media구문이다. - 보고된바에 의하면, CSS 파일이 BOM(Byte-Order-Mark)이 포함된 UTF-8로 인코딩되어 있다면, Respond.js 는 IE7과 8에서 작동하지 않을 것이다. Noted in issue #97
- 주의 :
@font-face속성을 미디어쿼리 안에 포함하면 IE7과 8이 로드하는 중에 중단될 수 있다. 이 문제를 해결하기 위해@font-face속성은 외부에 작성하도록 한다. - 만일 32개 이상의 CSS를 참조한다면 IE는 Invalid procedure call or argument 에러를 발생시킨다.
- Sass/SCSS 소스 맵은 지원하지 않는다; @media -sass-debug-info 는 Respond.js를 중단시킨다. Noted in issue #148
- IE 9는 CSS3 미디어쿼리를 지원하지만, 프레임 내의 외부 파일에 미디어 쿼리를 포함하는 CSS가 있을때는 지원하지 않는다(이 버그를 보라). 또한 이 문제를 해결하는 방법을 보라.
- 중첩된 미디어 쿼리는 지원하지 않는다.
'웹개발론 > 크로스브라우징' 카테고리의 다른 글
| HTML5 Placeholder jQuery Plugin - 폼힌트 크로스브라우징 (0) | 2015.05.22 |
|---|---|
| Modernizr - 브라우저 기능검사 (9) | 2015.05.21 |
| Font Smoothing Detection - 클리어타입 활성화 여부 (0) | 2015.05.20 |
| Box Sizing Polyfill - 박스모델 크로스브라우징 (4) | 2015.05.20 |
| CSS3PIE - CSS3 속성 크로스브라우징 (0) | 2015.05.19 |
