실전 비 표준 가이드 ‘CSS Hack’.

UI 개발자가 ‘웹 표준’ 방식으로 전환하게 되면 으레 ‘브라우저 호환성’까지 확보하는 작업을 병행하게 됩니다. 정해진 표준 명세에 따라서 코드를 작성하는 것은 쉬우나 ‘브라우저 호환성’을 확보하는 일은 그 반대로 정말 고된 작업입니다. 저는 여기서 적지않은 오해가 발생한다고 생각합니다. ‘웹 표준은 더 많은 자원을 필요로 한다’ 라고 말하는 거죠. 저는 이것이 ‘브라우저 호환성 유지 작업은 더 많은 자원을 필요로 한다’ 라는 사실의 잘못된 표현이라고 생각합니다. ‘웹 표준’과 ‘브라우저 호환성’은 서로 다른 개념인데 이 두 개념을 아무 구분없이 뭉뚱그려 사용함으로서 웹 표준에 대한 그릇된 인식이 형성되었다고 생각합니다. 웹 사이트를 개발함에 있어 ‘브라우저 호환성’은 목표이고 ‘웹 표준’은 방법론 입니다. ‘웹 표준≠브라우저 호환성’ 서로 같지 않습니다.

솔직히 사람들은 ‘웹 표준’ 이라는 키워드를 더 많이 찾지만 ‘크로스브라우징’ 이라는 키워드에 더 환호한다고 생각합니다. 그래서 오늘은 이것을 준비 했습니다. ‘실전 비 표준 가이드’. 말 그대로 표준이 아닌 가이드 입니다. 제가 악마에게 영혼이라도 판걸까요? 이제서야 정리하는 이유는 이제 막 당구에 입문하는 친구에게 찍어치기를 먼저 알려주지 않는 것과 마찬가지 이유 입니다. 찍어치기를 먼저 알려주면 얇게 쳐도 될 공을 찍어치기 때문이죠.

주요 브라우저 호환성 확보를 위한 실전 비 표준 가이드 ‘CSS Hack’

Target Browser	CSS Hack	Comment
IE 5.5 ~ IE 7	#selector { *property:value }	DTD와 무관하게 작용
IE 5.5 ~ IE 6	#selector { _property:value }	DTD가 Quirks Mode인 경우 IE 7에도 작용함
IE 5.5	#selector { _property /**/:value }	DTD가 표준모드인 경우 작용
Firefox 2	#selector { property:default-value; } #selector, x:-moz-any-link { property:firefox-value; } #selector, x:-moz-any-link, x:default { property:default-value; }	첫 번째 라인은 희망하는 값 두 번째 라인은 FF 2 디버깅 값 세 번째 라인은 다시 희망하는 값 DTD가 표준모드인 경우 작용
Opera 9	html:first-child #selector { property:value; }	Opera 9.5 부터 작용하지 않음 DTD와 무관하게 작용
Safari 3	없음	없음

브라우저 호환성을 유지하는데 너무 많은 시간이 소요된다면 이런 CSS Hack 이라도 사용해서 시간을 절약해 보세요. 단, 다른 장치나 브라우저에서 어떻게 작용하게 되는지에 대하여 저는 아무것도 보증하지 않습니다. Hack을 사용하기 전에 반드시 알아두면 좋은 것은 ‘어느 브라우저가 CSS 표준 명세에 따라 렌더링 하고 있는지’에 대한 정보 입니다. 브라우저 마다 렌더링이 달라서 어느것이 표준인지 모르겠다면 Opera 와 Safari 를 먼저 참고하세요. 이 두 브라우저가 99.9% 정도 표준에 따라 렌더링 하는 브라우저들 입니다.

출처 : http://naradesign.net/wp/ 나라디자인