• IE에서는 event listeners를 붙이거나 없앨 때, addEventListener/removeEventListener 대신에, attachEvent/detachEvent를 쓴다.
• IE에서는 event 이름의 형식이, event가 아닌, onevent 형식을 쓴다.
• IE에서는 event object를 해당 listener의 한 전달 변수(argument)로 돌려주지 않아서, 대신 global event 변수를 써서 접근해야 한다.
• event 발생시 기본적으로 주어진 action이 실행되는 것을 막으려면 preventDefault method를 쓰는 것이 정석이지만, IE에서는 event object의 returnValue 속성 값을 false로 지정해 주어야 한다.
• IE는 event 전달 과정(propagation) 중에서 보통 맨 처럼 진행되는 capture phase를 지원하지 않는다.
• 다른 객체들로의 event 전달 과정을 멈추려면, stopPropagation method를 쓰는 대신에, event object의 cancelBubble 속성 값을 true로 지정해 줘야 한다.

• IE에서는 event listeners를 method가 아닌 독립된 function으로 불러와서, event를 일으킨 target element를 알아볼 때 간단한 this 키워드를 쓸 수가 없고, 대신에 여러 단계의 상당히 복잡한 과정을 거처야만 얻을 수 있다.

  if (typeof element.addEventListener != "undefined") {
    element.addEventListener("event", eventListener, false);
  } else if (typeof element.attachEvent != "undefined") {
    var thisListener = function() {
      var event = window.event;
      if (Function.prototype.call) {
        eventListener.call(element, event);
      } else {
        target._currentListener = eventListener;
        target._currentListener(event);
        target._currentListener = null;
      }
    };
    element.attachEvent("onevent", thisListener);
  }

• IE에서는 어느 한 element의 event listener가 DOM에 속해있는 또 다른 node의 reference를 포함하고 있을 경우, 사용자가 다른 페이지로 이동하더라도 해당 listener와 함께 관련된 DOM node들이 메모리에서 지워지지 않고 상주하게 된다. (IE 6의 memory leak 현상은 근래에 있었던 보안 패치에도 불구하고 여전한 듯.)

프휴~ 🙁

얼마있으면 Leopard 발표와 더불어 함께 공개될 WebKit 엔진에 기초한 Safari 3를 앞두고, Apple에서는 웹 표준에 기반한 웹 개발을 도모하기 위해 더 엄격해진 코딩 기술을 요구하게 될 예정이며, 이를 위해 몇 가지 웹 표준화 대비 지침 사항들을 공개하였다.

이미 잘 알려져 있다시피, 의도하지 않은 렌더링 오류를 피하려면 올바른 Doctype의 사용을 권장하고 있으며 CSS에서 색깔 지정시 hex 값은 항상 hash(#)로 시작할 것을 요구하고 있다. 또 특정 요소에 접근할 때는 그 요소의 id 값을 사용해서, document.getElementById('myInput')처럼 쓸 것이며, document.myForm.myInput과 같은 축약 용법은 name 속성이 지정되어 있을 때만 사용할 수 있다.

이 밖에도, 어떤 요소의 속성 값을 얻을 때 다음과 같은 축약 용법 대신에,

var target = document.getElementById('someID');
var targetTitle = target.title;

표준에 정의되어 있는 method인 getAttribute, setAttribute을 쓰라고 하는데, getAttribute method의 경우 실제 다른 브라우저들에서는 돌려주는 값이 상황에 따라 저마다 다르기 때문에, 어차피 이에 대한 대비도 필요할 것이다.

그리고 그림의 크기 지정과 관련해서, 보통 지정된 그림의 크기가 실제 그림 크기와 다를 경우 이미지의 크기는 자동적으로 조절되어 표시되는데 , 만약 이 차이가 한 쪽에서만 발생할 경우 어떤 브라우저에서는 실제 그림의 측면 비율을 무시하고 지정된 한 쪽 면의 크기만 조절되어 표시되는데, Safari 3에서는 CSS 규약에 나와있는 대로 가로 세로 측면 비율에 따라 양쪽 면의 크기가 함께 자동 조절되어 표시된다. 여기서 의도되지 않은 상황을 피하려면, 양쪽 가로 세로의 크기를 함께 지정해 주면 되겠다.

결국, 웹 표준 코딩의 중요성은 앞으로도 더욱 부각될 것이지만, 더욱 성가시게 된 것은 바로 IE 6 잔당들이지.

아래는 CSS를 적용하면서, 꼭 한두 번씩은 개발자의 골치를 썩게 하였을 잘 알려진 IE 6의 버그들을 모아보았다.

Doubled Float-Margin Bug

요넘은 모든 float된 요소들에서 나타나는데, 만약 float된 방향과 같은 쪽에 margin 값을 주어서(float:left된 박스에 margin-left 값을 준 경우) 이 요소의 margin이 float된 박스를 포함하고 있는 부모 요소와 맞부딪칠 경우, 그 너비가 두 배로 늘어나는 현상. (같이 float된 요소들 중에 첫 번째 요소에서만 나타난다.)

해결책으로는, float된 박스에 display:inline을 선언해 주면 된다.
좀 더 자세한 설명은 IE Doubled Float-Margin Bug – CSS fixes and workarounds 참고.

Three-Pixel Jog

이놈은 서로 연결되어 있는 float된 요소들 사이에서 나타나는 놈으로, 잘 드러나지 않을 수도 있다. 이것은 float된 놈과 다음에 있는 inline 요소들 사이에 3 pixels 값의 공간을 추가해 버리는 버그인데, inline 요소들이 block 요소에 둘러싸여 있어도 발생한다.

다행히 쉬운 해결책으로, float된 박스와 옆에 붙어있는 박스의 각기 서로의 이웃한 margin 값을 -3px 빼주면 된다. (물론 다른 브라우저들에 영향을 미치지 않으려면 IE hacks 만을 위한 css 파일에 따로 지정해 놓아야 한다.)
추가 참고 글 – IE6 Three Pixel Gap

Absolute Positioning in a Relative Container

일반적으로, position:absolute으로 위치한 요소가 기본 static 위치가 아닌 다르게 지정된 위치(position:relative 혹은 position:absolute)를 가지는 부모 안에 포함되어 있을 경우, 브라우저 창의 왼쪽 구석이 아닌, 부모 요소의 위치를 기준으로 한 상대적 위치 값을 가지게 되는데, IE 6에서는 부모 요소에 height 값이 안 주어져 있을 경우에는 그냥 무조건 페이지 모서리를 기준으로 위치가 정해져 버린다.

해결책은, absolute으로 위치한 요소를 감싸고 있는 부모 요소에 height:1% 혹은 zoom:1 값을 지정해 주면 된다. 이렇게 하면, absolute하게 위치한 박스의 위치가 올바르게 적용되고, 또 부모 요소가 자식 요소들을 모두 둘러쌀 수 있도록 늘어나게 된다.
참고 글 – Absolutely Buggy II

Whitespace Bug

주로 ul로 메뉴를 작성할 때 나타나는 벌레로, 메뉴 사이에 의도하지 않은 빈 공백이 생기는 버그.

예를 들어 특정 너비의 세로 메뉴를 아래와 같이 짰을 경우,

<ul>
  <li><a href="page1.html">Link 1</a></li>
  <li><a href="page2.html">Link 2</a></li>
  <li><a href="page3.html">Link 3</a></li>
  <li><a href="page4.html">Link 4</a></li>
  <li><a href="page5.html">Link 5</a></li>
</ul>

IE 6에서는 코드의 li 사이에 있는 빈 공백을 페이지에도 그대로 표시해 버린다.

물론, 해결 방법으로 코드에 있는 li 사이의 공백들을 없애주면 되지만, 코드 스타일을 흐트러뜨리지 않으려면, 이젠 눈에 익은 다음과 같은 꼼수를 써주면 된다.

ul li a { height: 1%; }

더는 종잡을 수 없는 벌레들이 남기고 간 오물들로 당황하는 날이 오지 말기를 바라지만, 당장은 상황에 따라 제대로 대처할 수 있는 해결책들을 숙지해 놓는 수 밖에 없을 것이다. 😕

jQuery 1.2 발표후 보고된 자질한 버그들을 잽싸게 잡으면서 jQuery 1.2.1이 배포되고 있다.
벌레 잡기와 함께 바뀐 주요 변경 내용은, 새로 추가되었던 상대적 애니메이션 효과의 API가 기존 애니메이션 스타일과 충돌을 일으키는 문제를 해결하면서 상대적 애니메니션 효과의 문법이 아래처럼 약간 바뀌었다.

$(...).animate({ height: "+=50px", width: "-=20%", fontSize: "+=2em" });

위에서, +=는 현재 위치에서 더하고, -=는 현재의 위치에서 값을 빼라는 의미로 사용.

그리고 대체 용법을 제공하면서 사라졌던 .eq() method가 다시 추가되었다. 여기에는 많은 플러그인들이 그 동안 .eq() method를 많이 써왔다는 점과, 기존에 이것을 대체하려고 했던 .slice()가 이 경우 자연스런 해법이 아닌 것 같아서 삭제가 재고되었단다.

1.2 발표 후, 연이어 급히 벌레 잡는 발표로 불안한 인상을 주기도 하지만 그 만큼 더 안정화 되었다고 믿고 싶다.

한편, 얼마 전에 예고되었듯이 jQuery UI가 공식 페이지와 함께 공개되기 직전인가보다.
아직 공식 발표 소식은 없지만, 잠깐 데모를 살펴봤는데 Safari에서는 몇몇 동작이 제대로 동작하지 않는 등, 아직 개발이 활발히 진행중인 상태라 실제 적용에는 아직 무리가 있는 듯 하지만, 앞으로 분명 UI 개발자들에게 다양한 선택의 폭을 넓혀주리라 믿는다.

데모 어플리케이션 중에, JavaScript Speed Test 어플리케이션을 Safari에서 열어보면 여지없이 Safari가 뻗어버려서 주의가 요구됨. 😳

근래에 있었던 작은 버전들의 갱신 후에 드디어 커다란 걸음을 내딛는 jQuery 1.2 버전이 공개되었다. 이번 버전은 여러 새로운 기능들이 추가되었고, 이번에 소개된 새로운 jQuery Animation API를 이용해서 특정 요소에 색깔 변화 효과를 줄 수 있는 Color Animation Plugin을 포함해서 호환성 문제 해결을 위한 새로운 plugin들도 소개되었다. 반면에, 그 동안 잘 사용되지 않고 혼란을 가중시킬 수 있었던 몇 가지 기능들도 함께 제거되었는데, 제거된 기능들은 보다 나은 대체 기능들을 사용하면 되겠다. 물론 굳이 없어진 기능들을 계속 사용하려면, 이번에 새로 소개된 하위 버전과 호환성을 유지시켜 주는 Compatibilility Plugin을 사용하면 된다.

또, 한 가지.
User Interface의 특수 효과와 관련해서 jQuery의 공식 plugin으로 자리잡을 jQuery UI가 이번 16일 일요일에 드디어 공개될 예정이다. jQuery UI의 대략적인 구성은 이미 공개되었듯이 Draggables, droppables, resizables, shadows, sliders, sortables, tabs, accordions, selectables, trees, 그리고 modals이 포함되게 된다. 이렇게 되면 다른 라이브러리들의 의존성도 줄이고 선택면에서 더 이상 부럽지 않겠군. 8)