'브라우저 호환성'에 해당되는 글 2건

  1. 2007/09/29 Cross Browsing : Event 객체
  2. 2007/09/26 Cross-Browsing : 브라우저간 호환성 확보 (2)

Cross Browsing : Event 객체

Computer/Programming 2007/09/29 10:01

IE와 비 IE 브라우저는 이벤트가 발생했을 때 이벤트에 대한 세부정보를 담고 있는 event 객체를 사용하는 방법에 있어서 많은 차이를 보인다. 가장 먼저, 그 전달 방법부터가 다르다. 다음은 브라우저 별 event 객체의 전달 방법을 나타내었다.

obj의 onclick 이벤트에 process() 함수를 할당

IE의 경우function process()
{
        alert(event.srcElement.getAttribute("id"));
}

<div id="obj" onclick="process();"/>

비 IE 브라우저의 경우function process(e)
{
        alert(e.target.getAttribute("id"));
}

<div id="obj" onclick="process(event);"/>

event 객체를 사용하는 방법이 다를 뿐만 아니라 event 객체의 속성 중 이벤트가 발생한 객체를 나타내는 속성의 이름도 각각 srcElement와 target으로 다르다. 이외에도 많은 속성 이름이 호환되지 않기 때문에 주의를 요한다.

따라서 IE와 비 IE 브라우저 모두에서 작동하는 코드를 작성하기 위해서는 다음과 같이 한다.

IE 및 비 IE 브라우저 모두에서 작동하는 소스function process(e)
{
        if(event) alert(event.srcElement.getAttribute("id"));
        else alert(e.target.getAttribute("id"));
}

<div id="obj" onclick="process(event);"/>



2008년 1월 19일 이후 작성된 모든 글에 대해서 퍼가는 것을 금지합니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
Posted by Harry
TAG Cross Browsing, Event, Firefox, Internet Explorer, Javascript, onclick, Opera, srcElement, target, 객체, 변수, 브라우저, 브라우저 호환성, 웹 프로그래밍, 이벤트, 프로그래밍, 호환
Trackback 0 , Comment 0

Cross-Browsing : 브라우저간 호환성 확보

Computer/Programming 2007/09/26 19:46

컴퓨터에서 Cross 라는 말이 붙으면 호환이 된다는 의미이다. Cross-Language라고 하면 언어 간 호환이 되는 패키지나 클래스를 일컫고, Cross-Platform이라고 하면 플랫폼간 호환이 가능한 것을 말한다. 마찬가지로, Cross-Browsing이라는 브라우저간 호환이 되도록 하는 것을 일컫는다.

Apec Cyber Academy의 과제 중 하나로 학교와 고장, 팀원을 소개하는 웹 페이지를 작성하게 되었다. 그런데 여기서 제시한 '잘 만들어진 페이지'의 기준 중 하나가 '모든 브라우저에서 정상적으로 작동한다'이다. 즉, Cross-Browsing이 얼마나 잘 되었느냐가 채점 시 반영된다는 것이었다. 때문에 페이지 하나를 만들면서도 Cross-Browsing 문제에 굉장히 예민해질 수밖에 없었다.

많은 사람들이 아직까지 Cross-Browsing에 대해 많은 지식이나 개념을 갖지 못하고 있는 것이 사실이다. Cross-Browsing은 브라우저를 크게 Microsoft Internet Explorer와 그 이외의 브라우저, 두 개로 나누었을 때 둘 간의 호환이 많은 부분 되지 않기 때문에 이를 해결해 주는 것이다. 역시 문제는 MS IE이다. IE 7로 넘어 오면서 상당 부분 개선된 것은 사실이나 아직 Opera나 Firefox의 표준 준수율을 따라가기에는 그 거리가 굉장히 멀다. 시장 지배력은 가장 큰 브라우저로서 페이지 제작과 이용의 편의를 위해 MS는 각성하고 하루 뻘리 표준 준수율을 높여야 할 것이다.

필자가 페이지를 작성하면서 두 브라우저간 소스를 다르게 작성한 부분은 다음과 같다.

호환성 확보 항목
  • Width & Height의 영역 차이
    • IE는 Width와 Height으로 정해진 범위 내에 Padding이 포함되지만, 이외의 브라우저는 Padding이 Width와 Height의 밖에 있다. 엄밀히 따진다면 IE가 옳지 못한 렌더링이다.
  • 투명도 관련 스타일의 차이
    • IE의 경우 투명도 값을 filter로 조절하지만, 이외의 브라우저의 경우 투명도 값을 opacity로 조절한다.
  • Javascript로 Stylesheet를 조절하는 방법의 차이
    • IE의 경우 object.style.cssText="width:100%;"와 같이 스타일을 변경할 수 있지만, 이외의 브라우저의 경우 object.style.width="100%;"와 같이 한다.
  • Event 객체의 전달 방법의 차이
    • IE의 경우 이벤트가 발생했을 때 호출된 함수에서 자유롭게 브라우저 내장객체인 event를 사용할 수 있지만, 이외의 브라우저의 경우 이벤트 발생 시점에서 함수에 매개변수로 event객체를 넘겨 주어야 함수 내부에서 이를 참조할 수 있다.
  • Class 속성 이름의 차이
    • IE의 경우 className이라는 속성 이름을 통해 객체의 Class 이름에 접근할 수 있지만, 이외의 브라우저는 class라는 속성 이름으로 접근해야 한다.
  • 동적 이벤트 할당 방법의 차이
    • IE의 경우 onclick 속성값에 함수 인스턴스를 할당하면 되지만, 비 IE 브라우저의 경우 setAttribute 함수를 이용해야 한다.



2008년 1월 19일 이후 작성된 모든 글에 대해서 퍼가는 것을 금지합니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
Posted by Harry
TAG Apec Cyber Academy, Class, Cross Browsing, CSS, Event, Firefox, Internet Explorer, Javascript, Microsoft, Opera, Stylesheet, Web Browser, 객체, 브라우저, 브라우저 호환성, 스타일시트, 표준, 호환
Trackback 0 , Comments 2