웹 개발 시 익스플로러 주의!

2000년대 중반쯤 파이어폭스, 크롬, 사파리 같은 새 브라우저들 사이에서 웹 표준이라는 질서가 형성되가고 있었다. 
2000년대 말부터 빠른 성능을 자랑하는 크롬등에 점유율을 빼앗기다가 모바일로 이동하는 트랜드에 대처하지 못한 채 전세계 브라우저 시장에서 마이너로 전략하게 된다. 

마이크로소프트에서 뒤늦게 엣지라는 새 브라우저를 출시했지만 좀처럼 점유율을 가져가지 못하는 상황이다. 


그렇다고 웹 표준을 기준으로 사이트를 만들수는 없다. 

일정 사용자들이 익스플로러를 사용하고 있고 대중적인 서비스를 만들려면 어떤 방문자들 바꿀 필요가 없도록 사이트를 만들어야 한다. 

크로스 브라우징! 웹 작업을 할 때 가능한 모든 브라우저에서 사이트가 정상적으로 동작하는지 확인하는 것이 좋다. 특히 익스플로러의 경우 버전마다 지원하는 기능들이 달라서 하나하나 돌려봐야한다. 

이건 엣지나 익스플로러에서 개발자 도구로 들어간 다음, 호환성 테스트를 통해 확인해볼 수가 있다. 실제 구버전과 완전히 동일한 건 아니라는 걸 염두해야한다. 
아직 웹표준이 정립되지 않은 부분들도 있다. 

 

-webkit-transition: all 4s ease; // 사파리
-moz-transition: all 4s ease; // 파이어폭스
-ms-ransition: all 4s ease; // 익스플로러
-o-transition: all 4s ease; // 오페라
transition: all 4s ease;

 

브라우저마다의 CSS를 일일이 저정해둬야 하는 속성들이다. 

자바스크립트의 경우 타 브라우저와 익스플로러에서 다른 함수를 써야하는 경우들이 있는데 그럴 경우 위의 코드들로 익스플로러인지 여부를 확인해서 각각에서 작동하는 함수를 사용하면 된다. 

자바스크립트도 웹에서는 최신 버전을 쓰지 않는게 좋다. 내 컴퓨터에 깔아 쓰는 Node.js에서는 마음대로 할 수 있지만 사용자들의 브라우저에서 내가 작성할 자바스크림트 코드가 작동할 것이라는 보장이 없기 때문이다. 

현재 각 브라우저들이 어떤 버전의 자바스크림트까지 지원하는지 꼭 확인해야한다. 

---

코딩할 때 쓸 속성이나 기능들이 어떤 브라우저와 버전들에서 사용가능한지 미리 파악할 수 있는 방법은 구글에 해당 CSS 속성이나 자바스크립트 코드들을 검색하면 MDN이나 W3C같은 사이트에서 어떤 브라우저의 어떤 버전부터 지원되는지 확인할 수 있다.