하위 버전 브라우저의 HTML5 / CSS3.0 호환성 준수방안

1. polyfill

“polyfill”은 낡은 브라우저에서는 작동 안하는 HTML5 , CSS3.0들을 자바스크립트나 액션스크립트등으로 구현하여 낡은 브라우저에서도 최신스펙의 코드가 동적하는 것처럼 보여주는 행위를 뜻합니다.
HTML5를 지원하지 못하는 브라우저 엔진을 바꿀 방법은 없습니다. 자바스크립트나 액션스크립트 등을 이용해서 낡은 브라우저가 읽을 수 있는 코드로 만들어주는거죠.
얼마전에 재은님이 공유해주신 “CSS3로 구현된 페이지의 IE7~9 대응 이야기” 도 이러한 방식입니다.
[장점]
* API 하나 잘 만들어 놓으면 하위 호환성을 신경쓰지 않고 최신스펙을 마음놓고 쓸 수 있다
[단점]
* 네이티브 보다 확실히 성능이 떨어진다
* 비동기 프로그래밍에서 복잡도가 높아진다
: 동적으로 콘텐츠가 업데이트 될때마다 맞춤형 코드를 만들어내야한다
 

2. 브라우저별 맞춤형 코드 제공

최신 브라우저를 위한 코드와 함께 낡은 브라우저용 fallback 코드도 같이 제공합니다.
Sass나 Less같은 전처리기로 분기처리하면 효율적으로 관리할 수 있겠죠.
그 후 userAgent를 체크해 전용 코드를 불러오거나 브라우저 핵으로 구분할 수 있습니다.
그리고 낡은 브라우저를 버려도 될 시기가 오면 해당 코드만 깔끔하게 날려버립니다.
(그런날은 일단 기대하지 않는게 좋아요. IE7은 저 고등학교 때 사용했던걸로 기억하거든요. ㅋ)
[장점]
* 각 브라우저에 최적화된 코드를 제공할 수 있다
[단점]
* 개발환경이 복잡해질 수 있다 (Sass, compass, Grunt…)
* 분기규칙이 많아지면 코드 가독성이 떨어지고 유지보수가 어려워진다
 

3. 한벌로 갑시다

어떤 브라우저도 읽을 수 있는 낡은 브라우저 스펙을 기준으로 코드를 작성합시다.
CSS로 그릴거 이미지로 자르고, flexible하게 사이즈가 변경될게 있으면 javascript로 처리하고…
[장점]
* 호환성 두렵지 않은 무적코드다
* 분기처리 없는 하나의 코드이므로 한가지 코드만 생각하면 된다
[단점]
* 최신 브라우저는 자신의 역량을 최대치로 발휘 못할 것이다
* 레이아웃에 자바스크립트 도움을 받는 등,
최신브라우저용 코드에 비해 CSS와 자바스크립트가 할일의 구분이 불명확해질 수 있다
 

4. 점진적 기능 강화

모든 브라우저에서 똑같이 보일 필요는 없습니다. 낡은 브라우저는 조금 덜 풍부한 UX 환경을 제공하되 가독성엔 문제없는 수준까지만 제공합니다.
그리고 최신 브라우저로 갈수록 더 풍부한 UX를 제공합니다.
“IE7,8은 이렇게 보여주고요 그 외는 이렇게 해주세요” 이렇게 말해주는 서비스팀은 없을겁니다.
개발자가 더욱 주도적으로 나서서 합의점을 이끌어 내야합니다. 충분한 협의가 이루어지지 않는다면 나중에 수정사항 폭탄을 맞으실 수 있습니다.
[장점]
* 협의만 잘된다면 가장 깔끔하다
[단점]
* UX나 디자인적인 센스가 필요하다
* 커뮤니케이션 비용이 많이 든다