RESPONSIVE WEB & CROSS BROWSING

///////////////////////// 크로스브라우징을 위한 내 경험 /////////////////////////

JQUERY도 이해는 하고 있지만, 자바스크립트만으로 타 Framework에 의존하지 않고 해보는 것도 재밌을 것 같아서 

2달째 무작정 코딩과 디버깅을 하며 경험을 쌓고 있습니다. 

 

///// IE에서는 INPUT DOM객체의 ID를 document.getElementById('')로 잡아와야한다.

아직 추측이지만 INPUT태그의 ID는 바로 객체화 되지 않는 모양이다.

///// IE구버전에서는 function을 호출할 때, event를 인자로 넣어주고 function에서 받아줘야한다.

X function(){}

O function(event){}

Event 이벤트 내장객체는 전역이라고 생각했지만.. IE 구버전에서는 달랐다.

///// Firefox에서는 window.event객체에 직접 넣어줘야한다. 

///// IE 8이하(?)에서는 event.preventDefault()와 event.stopPropagation()을 지원하지 않는다.

///// IE구버전에서는 'px' 까지 넣어줘야만 에러가 발생하지 않았다. (단위를 입력해야한다.)

X el.style.top = 0;  

O el.style.top = '0px';

JAVASCRIPT에서 특정 DOM객체의 CSS를 조정할 때, 'px'라는 문자를 안 붙여도 자동으로 처리가 됐지만

 아마도 이러한 'px'같은 단위를 확실히 붙여줘야만 할 것 같다.

//// IE는 버전마다 웹문서의 스크롤된 수치값을 얻는 객체가 상이하다.

IE11 & others : document.body.scrollTop

IE9 : window.pageYOffset

IE8 : document.documentElement.scrollTop

 참고하여 코딩하여야 한다.

///// IE8이하 버전까지 배려하고자 한다면 CSS에서 rgba가 아닌 rgb와 opacity로 나누어 쓰는 것이 좋을 것 같다.

X rgba사용

O rgb와 opacity를 사용

확인한 바로는 IE7과 IE8에서는 CSS의 rgba를 지원하지 않는다. 

///// IE 구버전을 배려하려면 DOM객체의 className이라는 문자열 변수에 문자열을 추가해 주는 방식이 좋다.

IE7 & IE9 : el.classList.add(newClassName);

IE8 : el.className += ' ' + newClassName;

DOM객체의 function 중에서 CSS class를 추가 삭제하는 classList는 

명확하지 않지만 IE7, IE9에서 작동하지 않는다.

///// IE8에 다음 4가지가 없다. 

Window.prototype.addEventListener

document.addEventListener

Element.prototype.addEventListener

Event.prototype.preventDefault

Window, document, Element 이 객체들의 addEventListener는 attachEvent로 대체해야 한다.

///// IE7이하(?)에서는 Element, Event, Image에 prototype으로 접근 할 수 없다. 

따로 함수를 만들어서 처리해야 할 것 같다.

///// IE7이하에서는 document.querySelector()와 document.querySelectorAll()을 지원하지 않는다.

따로 함수를 만들어야 한다.

///// Firefox에서는 onselectstart 이벤트를 지원하지 않는다.

el.style.MozUserSelect = 'none'; 으로 설정하면 드래그 할 수 없게 설정 할 수 있다.

///////////////////////// 크로스브라우징을 위한 내 경험2 /////////////////////////

<!--[if lte IE 8]>

  <h1>Before IE 9</h1>

<![endif]-->

    

<!--[if (IE 9) | (IE 10)]>

   <h1>IE 9 or IE 10</h1>

<![endif]-->

<!--[if !((IE 9) | (IE 10))]>

    <h1>Not IE 9 and IE 10</h1>

<![endif]-->

///////////////////////// 크로스브라우징을 위한 내 경험3 /////////////////////////

///// html5shiv.js

Ihtml5 태그를 사용케 한다.

///// responde.js

IE8 이하에서도 미더어쿼리를 가능케 한다.

보면 굉장히 간결하고 쉽고 좋다. 헌데 이상하게 안되서 밤을 샜다. 

문제 : 아마도 이유는 file://c:/... 이런 경로 즉 로컬에서 실행하면 안된다고 한다는 글을 보고...

해결 : 웹에 올려서 확인하니까 보여진다.

///// ie9.js

CSS3를 사용케 한다.