2012년 3월 30일 금요일

미디어쿼리 2탄.... IE를 지원하는 법

인터넷에 IE를 위한 미디어쿼리 지원법에 대해서 다양한 해법이라 해야 할지 꼼수라고 해야 할지 아무튼 여러가지 방법이 나와 있는 것을 확인했다. 이것은 오늘 아침의 일로 시작된다. 어제 새벽에 열심히 미디어쿼리를 시험 적용한 후에 즐거운 마음으로 회사에 가서 IE 8을 여는순가 CSS가 모두 사라진 웹페이지를 보고 필자는 정말 충격에 빠졌다.

하지만 인터넷의 모든 해법은 거의 인터넷에 있는 법. 이런 고민을 한 사람은 나뿐만이 아닌듯... 대략 요약하면.. IE 6,7,8 형제들은 CSS3를 지원하지 않기 때문에 나는 에러...

1. jQuery를 이용하는 법.
2. 자바스크립트를 이용하는 법
3. 기타 꼼수들...

을 통해 해법을 찾은 듯 하지만 필자는 좀 억울 한 생각과 꼭 이렇게 까지 해서 IE를 지원해 줘야 하는가? 하는 생각이 들어 다음과 같이 소스를 정리했다.


<link rel="stylesheet" media="screen and (max-width: 980px)" href="/ranktoy/narrow_css.css" />
980픽셀 미만의 가로 해상도를 가지고 있으면 narrow_css.css파일을 써라
<link rel="stylesheet" media="screen and (min-width: 981px)" href="/ranktoy/normal_css.css" />
981픽셀 이상의 가로 해상도를 가지고 있으면 normal_css.css파일을 써라
<!--[if IE]> <link href="/ranktoy/common_css.css" rel="stylesheet"/><![endif]-->
혹시 IE면 그냥 원래 하던대로 하자...
IE의 책임있는 행동이 필요한 때다...



-----------------------------
RankToy.com - Click and cast Your vote
Fairedu.com - Photo card book for your children

댓글 없음:

댓글 쓰기