웹 페이지를 디자인 하거나 개발할 때 여러 웹 브라우저들에서 보여지는 결과물은 각기 그 편차는 있겠지만 다양한 종류의 브라우저들의 수 만큼이나 천차만별이다. 그렇기 때문에 각기 다른 브라우저들에서 개발 웹 사이트가 실제로 어떻게 보이는지를 확인하는 것은 개발 과정 중 필수이다.
물론 이런 경우를 대비해서, Mac에서는 Parallels와 같은 가상 머신을 돌려서 확인해 볼 수도 있지만 간단한 확인 만을 필요로 할 때는 번거로운 작업이 될 수도 있다. 이런 잠깐의 확인이 필요할 경우 도움이 될 만한 여러 Web Rendering 서비스들이 있는데, 그들 중 IE NetRenderer 브라우저 호환성 검사 서비스는 무료에다가 비교적 빠른 결과물을 보여준다.
현재는 IE 5.5부터 IE 7 중 원하는 웹 브라우저를 선택해서 주소만 입력하면 해당 브라우저에서 보여지는 웹 페이지의 모습을 그림으로 바로 보여준다.

비교적 빠르게 그 결과를 확인할 수 있었는데, 몇 가지 아쉬운 것은 웹 페이지의 길이가 길 경우 대략 768 픽셀 이하는 잘려 버리고 한국어도 지원하지 못해서 글자가 무참히 깨져버린다. 그래도 웹 페이지의 단순 배치 구도를 확인만 할 경우에는 유용한 서비스일 듯하다.

아래는 웹 브라우저의 책갈피에 저장해 놓고 바로 확인할 수 있게 만든 bookmarklet.

• Render this page on IE 6
• Render this page on IE 7

덤으로, 웹 페이지에 있는 글자가 배경 색깔과 충분히 대조를 이루는가를 검사해주는 Juicy Studio의 Colour Contrast Firefox Extention이 최근 버전의 draft Web Content Accessibility Guidelines 2.0 내용에 맞추어 갱신되었단다.

브라우저들의 개성 파악은 웹 개발자들의 취미 생활.

물론 여기에 소개된 꼼수들은 완전한 세상에 살고 있다면 불필요한 과정이겠지만, 냉험한 현실 속의 웹 브라우저들은 개발자들에게 차별 대우를 요구한다.

IE 7에서는 이제 CSS의 maxHeight 속성을 이해한다는 것을 이용해서, 다음과 같은 JavsScirpt 코드로 구별할 수 있다:

if (typeof document.body.style.maxHeight != "undefined") {
  // IE 7, Mozilla, Safari, Opera 9 
} else {
  // IE 6, older browsers 
}

IE 7의 변화에 따른 다음과 같은 더 간단한 방법도 있다:

if (window.XMLHttpRequest) {
  // IE 7, Mozilla, Safari, Opera 9
 
} else {
  // IE 6, older browsers 
}

물론, 전통적으로 사용되어 왔던 MSDN에 자세하게 소개되어 있는 조건부 주석을 이용한 구별 방법도 유효하다:

<!--[if IE 7]>
<script type="text/javascript">isIE7 = true;</script>
< ![endif]-->
 ... 기타 브라우져들을 위한 코드

덤으로, CSS 속성 이름 앞에 * 혹은 .(점) 그리고 _(밑줄)이 붙어있는 경우에는 브라우져들 마다 제각기 다르게 인식한다는 것을 이용해서 다음과 같은 방법을 사용할 수도 있다. (IE8의 경우 스타일 선언문 마지막에 꼭 “\9″을 붙여주어야 한다.):

/***** Attribute Hacks ******/
#header {
  margin: 10px;   /* any browsers */
  margin: 12px\9; /* IE 8 and below */
  *margin: 15px;  /* IE 7 and below */
  _margin: 20px;  /* IE 6 and below */
}
 
/***** Selector Hacks ******/
/* IE6 and below */
* html #someDiv { color: red }
/* IE7 */
*+html #someDiv { color: red }

– 참고 글

• Ajaxian – Detecting IE7+ in JavaScript
• CSS Tip: Targeting IE 5.x, 6 and 7 Separately – Edward Eliot
• IMSafer Nerd Blog | CSS for IE6 & IE7
• Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters

오랜만에 IEBlog에 IE7에 적용될 CSS 변화들에 관한 환영할 만한 글이 올라와 있다.

여기에는 <!DOCTYPE> 전환에 의한 strick 모드 하에서만 적용되는, CSS2.1와의 호환성을 높이기 위한 거의 200 개 이상의 변화들과 개선된 사항들이 있을 예정이라고 한다.

물론 예전의 잘 못된 습관들에 의해서 개발된 사이트들은 이에 따른 수정도 불가피하게 되었지만, 수정에 필요한 도구들도 마련해 두었다고 하니 지켜볼 일이다.

IEBlog에 올려진 글에 의하면, 차기 Vista에 포함될 IE 7에서는 그동안 웹 개발자들의 골치를 썩여왔던 웹 표준과 CSS 관련 벌레들이 만족할 만한 수준은 아니지만 어느 정도는 수정되어서 발표될 예정이라고 한다.

그 동안 개발자들로부터 가장 많이 요구되어 왔던, PositionIsEverything과 Quirksmode에서 지적되어 왔던 것들을 포함한, 버그들의 수정과 함께 완전한 CSS 2의 지원을 목표로 하고 있다고…
이로써, 그 동안 자행되어 왔던 땜질 처방은 정식 IE 7 발표와 동시에 많이 줄어들겠지만, 또 다른 땜질 제거 작업과 더불어서 당분간 혼란한 상황은 계속될 듯 하다.

땜질에 익숙한 웹 개발자의 입장이라면, 정식 IE 7의 발표가 가져다 줄 상황은 상당히 복합적일 듯. 🙄

최근 수 많은 벌레들의 안식처가 되고 있는 Internet Explorer와 관련된 일련의 좋지 않은 경험들과 더불어, 광범위하게 자행되고 있는 웹 표준 파괴 현상에 지대한 원인의 빌미를 제공하고 있다는 경각심에서, 더 이상 Internet Explorer의 군림을 막아야 겠다는 다짐과 항의의 표시로 주렁주렁 훈장처럼 달고 있는 이 곳의 표딱지에 또 하나의 딱지를 달아 놓는다.

현재 이 세상에 존재하는 여러 브라우져들 중, 가장 최악의 브라우져인 Interent Explorer가 맨 위에서 군림하고 있는 현실을 안타깝게 생각하며, 모든 면에서 월등한 다른 여러 브라우져들이 현재의 불합리한 군림을 저지할 수 있는 날이 오기를 기원한다.