CSS 하위브라우저 대응기법

CSS 하위브라우저 대응기법

1. CSS 핵

1) HTML 필터 

- 윈도우즈용 IE4~6, 맥용 IE4~5

*html p { color: red; }

2) 언더스코어 핵 (IE4~6)

p { _color: red; }

3) 해시 핵 (IE4~7)

p { #color: red; }

2. 조건 주석문

- IE를 제외한 나머지 브라우저에서는 주석문으로 인식

<!--[if lte IE8]>

<link rel=“stylesheet” type=“text/css” href=“oldie.css” />

<![endif]-->

3. CSS 관련 사이트

http://css3maker.com/

http://css-button-generator.com/

http://css-tricks.com/examples/ButtonMaker/

http://www.css3shapes.com/

http://www.hongkiat.com/blog/css3-button-tutorials/

4. CSS3 미지원 브라우저 대응 

1) Selectivizr 

http://selectivizr.com/

- IE6~8에서 level3 선택자 인식

- 익스플로러에서 지원 안되는 css3는 자바스크립트 코드 삽입을 통해 구현 가능

(벤더프리픽스가 안되는 경우) box-shadow, border-radius 등

<!--[if (gte IE 6)&(lte IE 8)]>

<script type="text/javascript" src="selectivizr.js">

</script>

<noscript>

<link rel="stylesheet" href="[fallback css]" />

</noscript>

<![endif]-->

2) css3pie

http://css3pie.com/

border-radius, box-shadow, border-image, 다중 배경 이미지, 배경이미지로의 linear-gradient

- 익스플로러에서 지원안되는 css3(border-radius,box-shadow)를 사이트에서 다운 받아

 behavior:url("PIE.htc");로 css에 삽입시켜 실행시키는 방식