본문 바로가기

Web/HTML

브라우저별 조건부 주석 사용 및 활용하기

반응형

국내 웹 환경을 고려해보면 아직까지도 익스플로러를 무시할 수 없기 때문에 웹페이지를 제작함에 있어서 브라우저에 따라 혹은 브라우저 버젼별로 조건부 주석이 필요한 경우가 많다.


브라우저의 호환성에 따른 문구를 제시하거나 여러가지 용도로 사용할 수 있는 조건부 주석은 아래와 같다.


<!--[if IE 9]> 관련 내용 <![endif]-->

- IE 9 버전에서 표시할 내용


<!--[if gte IE 9]> 관련 내용 <![endif]-->

- IE 9 이상 버전에서 표시할 내용


<!--[if gt IE 9]> 관련 내용 <![endif]-->

- IE 9 초과 버전에만 표시할 내용


<!--[if lte IE 9]> 관련 내용 <![endif]-->

- IE 9 이하 버전에만 표시할 내용


<!--[if lt IE 9]> 관련 내용 <![endif]-->

- IE9 미만 버전에만 표시할 내용

활용 1. (* html5shiv 응용)
html5를 지원하지 않는 구버전의 브라우저에서도 html5 스타일을 지원할 수 있도록 해주는 html5shiv 스크립트를 조건부 주석으로 넣어줄 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>조건부 주석 삽입</title>

	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
	
</body>
</html>

사이트 링크 : https://code.google.com/p/html5shiv/


활용 2. (* IE9.js)
익스플로러의 하위 버전에서도 최신 브라우저에서 보여지는 것과 같도록 호환성을 개선하고 투명png의 문제등을 해결한 IE7.js / IE.8.js / IE.9.js 자바스크립트 라이브러리를 조건부 주석으로 삽입해 줄 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>조건부 주석 삽입</title>

	<!--[if lt IE 9]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
	<![endif]-->
</head>
<body>
	
</body>
</html>

사이트 링크 : https://code.google.com/p/ie7-js/

반응형