들어가기
CSS3를 활용한 모바일 페이지를 최대한 HTML 수정없이 IE 하위 버전에서도 정상노출하기 위한 테스트를 진행하였었습니다.
이를 위해 조사해보니 다양한 방법이 있어, 그 중 몇가지 적용 사례를 소개합니다.
가상선택자(:before, :after, …), box-sizing:border-box (IE7)
하위 버전 IE에서 지원하지 않는 속성을 지원하기 위한 스크립트를 사용하였습니다.
아래 코드를 head 안에 넣어서 사용합니다.
<!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]-->
가상 선택자는, CSS3문법인 더블콜론(::)과 CSS2문법인 싱글콜론(:) 문법을 가지고 있습니다.
IE 하위 버전에서는 CSS2문법인 싱글콜론만 지원하여, 더블콜론을 싱글콜론으로 변환해주어야합니다.
/* 기존 CSS3 코드 */
::before { }
::before { }
/* IE 대응을 위한 CSS 2.1 코드 */
:before { }
:before { }
더 자세한 사용법은 아래 URL에서 확인할 수 있습니다.
https://code.google.com/p/ie7-js/
background-size:cover (IE7/IE8)
IE8 이하 버전에서 background-size:cover 속성을 지원하지 않습니다.
이 경우 두가지 방법을 사용할 수 있습니다.
htc 파일 활용
<!--[if lt IE 9]>
.test{
...
background-size:cover;
behavior: url('backgroundsize.min.htc');
}
<![endif]-->
첫번째 방법은 htc파일을 사용하는 것입니다.
htc파일은 MS에서 제공하는 HTML Component 파일로 지원하지 않는 속성이 있을 경우 해당 파일을 불러와서 적용하는 것이 가능합니다.
하지만 한 페이지에서 여러개의 코드를 사용할 경우, 그 중 하나에서만 작동하는 문제가 있습니다.
정확한 원인을 파악할 수 없지만, 특정 모듈의 충돌 이슈로 보입니다.
또한 로딩속도가 매우 느리기 때문에, 구현은 가능하나 추천하지 않습니다.
사용예시는 아래 URL에서 확인가능합니다.
http://sibasisjena.wordpress.com/2014/12/08/background-size-property-is-not-working-in-ie8-and-ie7/
filter 속성 활용
background-size가 들어가는 코드에 filter 속성을 추가해주는 방법입니다.
<div style="background-image:url(im/@thumb2.jpg); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='im/@thumb2.jpg', sizingMethod='scale');"></div>
CSS로 background-image를 제어하는 경우에는 큰 문제는 없지만,
HTML에서 inline-style로 background-image를 제어하는 경우 HTML을 수정해야하는 번거로움이 있을 수 있습니다.
외에도 여러가지 방법이 있으며, 각 방법은 아래 경로를 참고하시길 바랍니다.
http://css-tricks.com/perfect-full-page-background-image/
display:table, display:table-cell (IE7)
htc파일을 불러와서 구현이 가능합니다.
body{behavior: url(/_/js/display-table.min.htc);}
#nav {-dt-display:table}
#nav li {-dt-display:table-cell}
이 경우 body에서 htc 파일을 불러온 뒤, display:table을 적용한 모든 코드에 -dt-display를 추가해야하는 번거로움이 있습니다.
또한, htc파일의 로딩 시간 이슈로 구현은 가능하나 추천하지는 않습니다.
적용예시는 아래 URL을 참고하시면 됩니다.
http://tanalin.com/en/projects/display-table-htc/
좌, 우 정렬을 위해 display:table을 활용한 경우 IE7 핵을 사용하여 비슷한 UI구현이 가능합니다.
.tab_menu {display:table; *display:block; *overflow:hidden;}
.tab_menu li {display:table-cell; *float:left;}
디자인과 완전히 일치한다고 할 수 는 없지만, UI가 깨지지 않는 범위 내에서 구현이 가능합니다.
color:transparent (IE7/IE8)
IE8이하에서는 transparent 속성이 작동하지 않아, 텍스트를 제거해야합니다.
\9 핵은 IE 6,7,8에서만 동작하는 핵입니다.
color:transparent; overflow:hidden\9; text-indent:-9999px\9; color:transparent; overflow:hidden\9; line-height:999px\9;
border-radius (IE7/IE8)
PIE.htc파일을 사용할 수 있습니다.
#tests div{
... behavior: url(/pie/PIE.htc);
}
지금까지와 마찬가지로 htc 파일은 로딩속도에 이슈를 주고,
border-radius는 디자인 속성으로 작동하지 않는 환경에서, UI가 깨지는 등의 이슈는 발생하지 않기 때문에,
지원하지 않는 환경에서 강제로 구현하기 보다는, 지양하는 편이 더 유연하게 환경을 대응하는 데 좋습니다.
사용방법에 대한 자세한 내용은 아래 URL을 참고하시면 됩니다.
http://css3pie.com/
마무리
하위버전 IE에 CSS3를 적용하는 방법은 다양합니다.
허나, 대부분의 경우 Script를 사용하거나 htc파일을 불러와야했고,
그로 인해 웹사이트 성능 저하가 발생했습니다.
그냥.. 이런 방법이 있다!
정도로 가볍게 봐주셨으면 좋겠습니다.
각각의 상황에 맞게 PC는 PC답게~ 모바일은 모바일 답게~
마크업을 하는게 가장 깔끔한 코드를 유지하는 길이 아닌가 싶습니다^^
0개의 댓글