html5에서 IE 대응하기
몇년전까지만 하더라도 무척 괴롭게 IE 6 까지 대응하여 크로스브라우징을 했었는데, windows10 업데이트가 나오면서 IE7, 8을 대응하여 크로스브라우징 할 수 있도록 분위기가 됐다는 것은 개인적으로 축복해야할 일이라고 생각한다. 그래도 포탈사이트나 국가기관 사이트처럼 몇몇 공공기관, 규모가 큰 사이트들은 아직도 고통받고 있는 것 같지만 말이다. (XP를 쓰고 있는 사람이 아직도 있다는 믿기지 않는 사실..)
html5와 웹표준화 정책이 나온지도 꽤 됐다. 지저분한 DOCTYPE 4.* 들과 table, div들은 버리고 html5에 기준한 DOCTYPE을 사용하자. 여기 html5 기준 IE를 대응하기 위해 자주 쓰는 것들을 몇가지 모아봤다.
1. ie9/8의 html5 태그 지원
참고 : https://github.com/afarkas/html5shiv
ie9,8의 경우 header, footer, section 과 같은 html5 태그에 대한 별도 지원이 되지 않아 위 경로의 JS파일이 필요하다.
dist 폴더의 html5shiv.js를 다운로드 한 후 <head></head>부분에 아래 스크립트 소스를 삽입해주면 된다.
<!–-[if lt IE 9]>
<script src=”경로/html5shiv.js”></script>
<![endif]–->
2. ie9/8의 placeholder 지원
참고 : http://jamesallardice.github.io/Placeholders.js/
input 에서 자주 쓰이는 placeholders를 지원해주기 위해서는 위 경로의 placeholders.min.js를 다운로드 해서 마찬가지로 <head></head>부분에 스트립트를 삽입해주면 된다.
하지만 ie8 이하로는 적용이 되지 않기 때문에 그 이하의 브라우저를 지원해주기 위해선 placeholders를 사용하기보단 <span>같은 요소를 input 요소에 absolute 로 붙여 설명글을 달아주는 것이 안전하다.
<!–-[if lt IE 9]>
<script src="경로/placeholders.min.js"></script>
<![endif]–->
추가 : 브라우저별로 placeholder에 스타일을 부여하려면 아래처럼 webkit 옵션을 추가해주면 된다.
input[type="text"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */color: #adb5bd; }
input[type="text"]::-moz-placeholder { /* Firefox 19+ */ color: #adb5bd;}
input[type="text"]:-ms-input-placeholder { /* IE 10+ */color: #adb5bd;}
input[type="text"]:-moz-placeholder { /* Firefox 18- */color: #adb5bd;}
3. ie8이하 background 적용시에는
background-image / background-repeat / background-position 같이 모든 css를 별도로 지정해줘야 한다. 아쉽게도 background-size 는 지원이 되지 않는다..
예) i {background-image:url('이미지'); background-repeat:no-repeat; background-position:0 0;}
4. ie8/7에서 background-size 에 대한 지원
요소에 직접 background-image 와 filter를 통한 background-size를 기입하여 제어해줄 수 있다.
하지만 이 방법도 html에 직접 inline css를 기입하는 방법이라 온전한 방법이라곤 할 수 없으므로 사용을 자제해야한다. 뭐 모바일 view의 경우 ie8 이하로 접근하게 되는 경우는 없기 때문에 모바일에선 별 문제가 없으니 pc에서만 사용을 지양하면 된다 생각한다.
참고 : http://css-tricks.com/perfect-full-page-background-image/
<div style="background-image('이미지'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='이미지@2X.png', sizingMethod='scale');"></div>
5. ie7이하에서의 box-sizing:border-box 적용
보통 * {box-sizing:border-box} 같이 초기css파일에 삽입하면
padding과 border요소가 영역을 추가로 잡아주는 것을 방지해주기 때문에 유용하게 쓰게 되는데 이 css가 애석하게도 ie7에서는 지원이 되지 않는다.
아래 JS코드를 <head></head>에 넣어주면 된다.
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
6. ie7이하에서의 가상선택자(:before, :after, …) 대응
IE 하위 버전에서는 CSS2문법인 싱글콜론만 지원하기 때문에, 더블콜론이 아닌 싱글콜론을 사용해주면 된다.
참고 : https://code.google.com/p/ie7-js/
/* CSS3 */
::after { }
::before { }
/* CSS 2.1 */
:after{ }
:before { }
7. ie7/8에서의 last-child 적용법
<ul>
<li></li>
<li></li>
</ul>
의 경우
css
ul li + li + li {}
와 같이 기입해주면 마지막 요소를 찾아서 css를 넣어주지만 요소갯수가 헷갈릴 우려가 있으므로 나는 주로 .last class 를 마지막요소에 추가한다.
8. ie9 이하에서 select box 이쁘게 보여주기.
input 요소와 달리 select box에서 css를 부여하기가 까다롭기 때문에 이를 사용하지않고 div와 ul/li를 이용하여 모양을 잡아주고 스타일을 주는 경우도 있지만, 일부분의 경우 select box를 사용해야만 하는 경우도 있다. 이럴 땐 기존 select의 border / background 등 모든 요소를 없애준 후 새로운 스타일을 부여해준단 느낌으로 작업하면 된다.
일단 구조는 아래와 같이 잡아준다.
<div>
<select><option></option></select>
</div>
그다음 기본적인 css에서는..
일단 select를 감싸는 div에 width / height / border / background-color 등 기본적인 css를 부여해준 후
div > select 에는 / 동일한 width / 2px 적은 height / text-indent를 대신하며 화살표 아이콘을 넣어주기 위한 좌우 padding / padding을 위한 box-sizing:border-box 요소 / 기본적인 text-align과 size를 넣고 / border은 none으로 / 그리고 background-image에 arrow.png 아이콘을 삽입 / background-position을 95% 50% 정도로 삽입 / 타 브라우저를 대응하기 위해 -webkit-appearance: none;-moz-appearance: none; 를 추가로 삽입해주면 된다.
여기까지 내가 사용한css를 살펴보면 이렇다.
div {display: inline-block;height: 40px;border: 1px solid #dee2e6;border-radius: 2px;box-sizing: border-box;vertical-align: middle;background-color: #fff;}
div select {padding: 0 24px 0 12px;width: 100%;height: 38px;border: none;box-sizing: border-box;font-size: 14px;text-align: left;background-position:95% 50%;letter-spacing: -1px;-webkit-appearance: none;-moz-appearance: none;}
그리고 ie11 이하부터의 hack을 쓰면서 소소하게 수정을 해주면 되는데
ie8
- div select 에 height:auto 와 padding으로 조정하며 화살표 요소가 가운데로 이쁘게 위치할 수 있도록 조정하면 된다.
ie9
- div select에 margin-top:0 으로 지정하여 자동적으로 먹는 margin-top을 제거하고 padding 을 조정하여 위치를 잡는다.
ie8 /9 동시에
- css 각 요소 뒤에 \0/ hack을 붙여 padding / height:auto / background:none을 붙여준다.
ie10
- div select::-ms-expand 와 같이 select 뒤에 문구를 붙여 arrow 요소를 없애준다.
- select에 margin:0 하여 없애주고 height 값을 div보다 2px 적게 지정해준다.
ie11
- select에 margin:0하여 없애주고 padding을 조정하여 위치를 맞춰준 후 height 마찬가지로 div값보다 2px 적게 지정해준다.
위 값들을 종합하여 hack으로 추가한 css 을 보면 이렇다.
@media \0screen { /* ie 8 hack */
div select {height:auto\0/ !important; padding-top:10px !important}
}
@media screen\0 { /* ie9 hack */
div select {padding-top:4px; margin-top:0 }
}
div select {/*margin-top:4px\0/;*/padding:7px\0/;height:auto\0/;background:none\0/ } /* ie 8/9 hack */
_:-ms-lang(x), div select {margin:0;height:38px} /* ie10 hack */
div select::-ms-expand {opacity:0} /* ie10 hack */
_:-ms-fullscreen, :root div select {margin:0;padding:0 6px 0 12px;height:38px} /* ie11 hack */
... 이렇게 하면 반듯하고 예쁜 select box가 완성된다.
hack에 대한 부연설명은 구글링을 추천.
이 외에도 display:table-cell 이나 border-radius 같은 것들도 ie7 에서는 지원이 안된다. 하루빨리 ie7/8 이하 브라우저가 퇴출..되는 것이 좋지만 그래도 ie7까지의 지원을 해야한다면 각 css의 요소의 지원여부를 잘 살펴보고 페이지의 접근범위를 고려하여 스타일을 지정해주는 것이 좋다.
오늘도 ie와 열심히 싸우며 웹표준에 다가가본다.
