본문 바로가기
Front-end/HTML

ie조건부 주석처리::익스플로러 버전별로 코딩따로하기 (크로스 브라우징)

by mooyou 2019. 1. 16.
728x90
300x250

크로스 브라우징의 가장 애물단지가 익스 하위 버전이 아닐까?

그나마 요즘에는 7,8은 거의 포기하지만 7,8까지 맞출 때는 정말 스트레스받는다.


보통 웬만한 브라우저들은 다 맞는다. 그러나 익스 하위버전들이 문제임

만약 다 맞췄는데 익스 하위 버전만 문제라면 이거 맞추다가는 다른 브라우저들이 안맞는다.


이럴때 사용할 수 있는게 ie조건부 주석처리!!


1
2
3
4
5
<!--[IF IE 8]>
    <script type="text/javascript">
        alert("Please Upgrade Your BROWSER !");
    </script>
<![endif]-->


이 코드를 헤더 부분에 추가해준다.

그러면 익스8 이하버전에서는 니 브라우저 업데이트좀 하라는 얼럿창이 나오게 된다.


그러나 최신익스플로러는 지원하지 않는다는 단점이 있다.


그래서 사용해줄수 있는게


조건부주석처리 js를 이용하는 방법이다.



https://github.com/Unk/IE-Checker


위 사이트에서 스크립트를 다운받는다.





ie-checker.js 파일을 js 폴더에 넣고


1
2
<!-- script -->
<script src="js/ie-checker.js"></script>


헤더에 연결시켜준다.








익스 탐색기에서 확인해보면

html에 자동으로 클래스가 붙은걸 확인할수 있다.

ie버전별로 ie8, lt-ie11등의 클래스가 부터있다.


그래서 수정해주고 싶은버전의 클래스만 앞으로 빼서 수정해주면된다.




728x90
반응형

댓글