작성자:
우리는 지난 수년 동안 웹 개발자와의 상담을 통해 무엇보다도 다양한 브라우저 버전 및 디바이스에서 제대로 작동하는 사이트를 구축하는 작업이 가장 어렵다는 사실을 알게 되었습니다. jQuery 프로젝트에 대해 코딩하는 동안 이 문제를 계속 고민했습니다. 따라서 무수한 회의 세션에 참여하고 수백 개의 자습서를 검토하면서 선택한 20가지 상위 코딩 패턴 및 사례 목록을 작성했습니다. 이를 통해 사이트 구축 시 시간을 절약하고 부담을 줄일 수 있기를 바랍니다.
크로스 브라우저 기본 요소
사이트가 모든 브라우저에서 동일하게 렌더링되지 않아도 됩니다.
개발자가 생각하는 공통된 문제는 최신 버전이 아닌 예전 브라우저를 포함한 모든 브라우저에서 사이트가 동일하게 렌더링되도록 하는 것입니다. 그러나 항상 그럴 필요는 없습니다. 더 좋은 방법은 최신 브라우저 사용자에게는 보다 풍부한 UI를 제공하는 동시에 예전 브라우저 사용자에게는 확실한 작업 환경을 제공함으로써 사이트를 지속적으로 향상시키는 것입니다.
견고한 템플릿으로 시작하여 개발을 간소화합니다.
이러한 팁의 대부분은 HTML5 Boilerplate와 같은 프로젝트 템플릿에서 이미 기본으로 제공되어 시간을 절약할 수 있습니다. 이런 규칙은 최신 브라우저를 대상으로 하는 프로젝트 및 IE6 등 이전 브라우저를 지원해야 하는 프로젝트에서 동일하게 제대로 작동합니다.
안정적인 표준에 집중합니다.
새로운 기능이 출시될 때마다 쉽게 열광할 수 있지만 이러한 기능 중 일부의 사양은 계속 개발 중일 수 있습니다. 사양 개발의 초기 단계에 있는 기능은 변경될 가능성이 많으므로 사이트의 안정성 및 고객 환경에 영향을 줄 수 있습니다. 안정적인 표준에 집중하면 고객이 원하는 환경을 제공하고 동시에 사이트를 더 잘 유지 관리할 수 있습니다.
IE Compat Inspector를 통해 사이트를 표준 기반 코드로 마이그레이션합니다.
표준은 Internet Explorer 10의 핵심이며, 개발자가 코드를 마이그레이션하여 이용할 수 있도록 지원하는 것은 IE 엔지니어링 팀에 매우 중요한 일입니다. 따라서 실시간으로 사이트를 분석하고 일반적인 문제의 패턴을 파악하여 해결 방법을 제공해 주는IE Compat Inspector를 만들었습니다. 간단한 JavaScript 파일을 코드에 삽입하면 페이지에 대한 시각적 결과를 바로 얻을 수 있습니다. 또한 Fiddler HTTP 분석 도구와 통합할 수도 있습니다.
꼭 필요한 경우에만 polyfill 및 shim을 사용합니다.
모든 브라우저에서 반드시 동일한 사용자 경험을 제공해야 하는 경우polyfill 및 shim은 표준 기반 API 및 기능을 모방할 수 있는 코드 및 태그를 제공합니다. 중요하게 기억해야 될 것은 사용 사례를 충족하고, 앞으로 적용할 코드를 지원할 수 있는지 사전에 코드를 제대로 검사해야 한다는 것입니다.
개발하는 동안 여러 브라우저에서 테스트합니다.
최신 브라우저는 이전보다 단일 표준에 훨씬 더 가깝지만 여전히 차이점은 있습니다. 개발 중의 임시 멀티 브라우저 세너티 테스트는 브라우저 간의 심각한 문제가 마지막 순간이나 심지어 모두 공개된 후에 발생하지 않도록 할 수 있습니다. IE의 F12 Dev Tools와 같은 각 브라우저의 콘솔을 검색하여 오류나 경고 메시지가 나타나는지 확인해야 합니다. 기본 제공 콘솔이 없는 IE7과 같은 이전 브라우저의 경우 Firebug Lite를 사용할 수 있습니다. 또는 BrowserStack과 같은 크로스 브라우저 테스트 솔루션을 사용하십시오.
도구와 함께 빌드 프로세스를 사용하여 오류를 확인하고 파일을 최소화합니다.
HTML 검사기, CSS 검사기, Uglify, JSHint, GruntJS 등의 뛰어난 빌드 도구 모음은 잠재된 문제를 찾아주고 프로젝트 코드 표준을 적용하며 파일 크기를 줄여 성능을 향상시킬 수 있습니다. IDE 또는 코드 ���집기에서 이를 지원하는 경우 해당 단계가 장애물이 되지는 않습니다. 예를 들어 Visual Studio는 외부 도구를 실행하고 빌드 프로세스 중에 스크립트 파일을 압축/결합하는 기능을 제공합니다.
HTML
항상 표준 기반 doctype을 사용하여 쿼크 모드를 방지합니다.
<!DOCTYPE html>로 시작하세요. 최신 웹에는 1990년대 중반 IE6 및 Firefox 2와 같은 획기적인 "최신" 브라우저에서 웹 페이지를 사용할 수 있도록 하기 위해 설계된 쿼크 모드를 위한 공간이 없습니다. 오늘날 대부분의 웹 페이지는 잘못된 doctype이나 doctype 앞의 잘못된 텍스트로 인해 실수로 쿼크 모드로 끝납니다. 따라서 디버그하기 어려운 레이아웃 문제가 발생할 수 있습니다.
HTML5 태그의 이전 버전과의 호환성 제한을 이해합니다.
<section>, <header> 및 <footer>와 같은 새로운 HTML5 태그는 태그의 의미를 향상시키지만 Internet Explorer 6, 7 및 8에서 실행하려면 특별한 "shiv" 스크립트가 필요합니다. 그렇지 않으면 인식되지 않습니다. 스크립트를 사용할 수 없는 경우에도 이러한 레거시 브라우저에서 작동해야 하는 페이지에서는 새로운 HTML5 태그를 사용할 수 없습니다. 이러한 경우에는 일반 <div> 요소 및 클래스를 사용하는 것이 더 안전할 수 있습니다.
HTML 파일 맨 상단에 CSS 파일 참조를 넣습니다.
본문에 CSS 파일을 넣으면 CSS가 로드될 때까지 브라우저에 빈 페이지가 표시될 수 있습니다. 브라우저에서 최대한 빨리 CSS 파일을 가져올 수 있도록 하려면 HTML 파일의 맨 상단에 넣어야 합니다.
HTML 파일 맨 하단에 JavaScript 파일 참조를 넣습니다.
JavaScript에서 페이지에 새 태그를 작성할 경우 브라우저가 나머지 파일을 계속 구문 분석할 수 있으려면 먼저 HTML 태그에서 스크립트 파일을 검색하고 구문 분석하며 실행해야 합니다. 스크립트를 맨 아래에 넣으면 스크립트가 완료되기 전에도 브라우저에서 페이지를 렌더링할 수 있으므로 사용자는 페이지가 더 빠르게 로드되는 것으로 인식합니다.
HTML 태그에서 인라인 JavaScript 태그를 사용하지 않습니다.
외부 스크립트 참조와 마찬가지로 인라인 스크립트는 브라우저의 HTML 구문 분석을 중지하도록 하며 페이지에서 다른 리소스의 병렬 다운로드를 방지할 수도 있습니다. 따라서 페이지의 초기 로드 속도가 심각하게 저하되어 사용자에게 골치 아픈 "빈 페이지" 환경을 제공할 수 있습니다. 또한 태그 주위에 스크립트가 많으면 유지 관리가 더 어려워집니다.
HTML 태그 내에 인라인 JavaScript 이벤트를 사용하지 않습니다.
예를 들어 <button onclick="validate()">Validate</button>과 같은 경우입니다. 이 사례는 태그, 표시 및 동작 사이에 있어야 하는 명확한 구분을 깨뜨립니다. 또한 스크립트가 파일의 맨 아래에서 로드되는 경우 사용자가 페이지를 조작하여 아직 로드되지 않은 스크립트를 호출하는 이벤트를 트리거함으로써 오류를 발생시킬 수 있습니다.
CSS
CSS 계단식 배열 규칙을 이해하고 사용합니다.
단순 ID 및 클래스 선택기는 유용하지만 독점적으로 사용할 경우 태그가 더 복잡해지고 불필요한 ID 및 클래스로 인해 다시 사용하기 어렵게 됩니다. 적은 수의 ID 및 클래스와 함께 태그, 하위 항목, 자식 태그, 형제 태그 및 특성 선택기를 사용하면 태그와 CSS를 보다 간단하고 일반적인 상태로 유지할 수 있습니다. 어떤 경우에도 "!important" 규칙을 사용하지 마십시오.
공급업체별 CSS 속성 전체에 접두사를 붙여 향후에 증명합니다.
새로운 초안 표준이 진행되면서 브라우저 공급업체는 접두사를 붙인 속성을 통해 지원을 추가함으로써 표준에 뛰어들기도 합니다. CSS가 향후에도 계속 작동하도록 하려면 공급업체에서 접두사를 붙인 이름과 접두사를 붙이지 않은 이름을 모두 사용하십시오. 이 블로그 게시물은 일반 JavaScript 대안을 제공합니다.
CSS 구문 분석기 해킹이 아닌 올바른 CSS 규칙으로 호환성 문제를 해결합니다.
CSS 구문 분석기 해킹은 브라우저를 업데이트하면 해킹이 실패할 수 있기 때문에 안정적이지 않습니다. 대신 html 또는 body 태그에 스타일시트 규칙에서 사용할 수 있는 버전 별 클래스를 추가하십시오. 또한 조건부 주석을 사용하여 브라우저 별 CSS 파일만 필요한 버전에 포함할 수 있습니다.
JavaScript
항상 기능 탐지를 브라우저(navigator.userAgent) 탐지보다 우선시 합니다.
userAgent 문자열은 특정 기능(또는 버그)이 있는지 여부를 잘 나타내지 못합니다. 문제를 해결하려는 경우 userAgent를 해석하는 대부분의 코드는 잘못 해석합니다. 예를 들어 어떤 브라우저 검색 라이브러리는 주 버전이 1자리 숫자라고만 예상하므로 Firefox 15는 Firefox 1로 보고하고 IE 10은 IE 1로 보고합니다. 기능 또는 문제를 직접 검색하고 code branch를 위한 결정 기준으로 사용하는 것이 보다 안정적입니다. 따라서 기능 탐색을 구현하는 가장 간단한 방법으로 Modernizr를 권장합니다.
문서가 준비되면 최대한 적은 스크립트를 실행합니다.
jQuery의 $(document).ready()와 같은 기술을 사용하면 페이지에서 HTML이 로드되는 즉시 스크립트를 실행하기가 쉬우며 일반적으로 안전하게 실행할 수 있는 가장 빠른 시점에 실행합니다. 그러나 이때 많은 스크립트를 실행하면 페이지가 느리게 나타나므로 사용자가 바로 조작하지 못할 수 있습니다. 종종 실제로 항목이 표시되어야 할 때까지 도구 설명이나 대화 상자와 같은 항목에 대한 초기화가 지연될 수 있지만 눈에 띄게 느려지지는 않습니다.
사용자의 페이지 조작에 중요한 경우 최대한 빨리 AJAX 요청을 시작합니다.
AJAX 요청은 시간이 오래 걸릴 수 있으므로HTML 페이지가 준비될 때까지 기다릴 필요가 없습니다. 대신 AJAX 완성 기능 내에 $(document).ready() 호출을 배치하십시오.
중요하지 않은 스크립트(예: Facebook Like, Google +1, Twitter)의 로드를 지연시킵니다.
누구나 자신의 페이지가 소셜 네트워크에서 인기가 있기를 원하지만 소셜 네트워크 스크립트가 커져 사용자에 대한 응답이 느려질 수 있습니다. 페이지가 로드될 때까지 기다린 후 이러한 스크립트를 요청하면 페이지가 더 빠르게 응답할 수 있습니다. 또한 이러한 버튼이 반드시 필요한지 여부 및 페이지의 전체적인 환경 개선에 도움이 되는지 여부를 다시 한 번 고려해볼 필요가 있습니다.
출처 : http://www.modern.ie/ko-kr/cross-browser-best-practices
'etc' 카테고리의 다른 글
| 모바일 웹사이트 제작 전 알아두면 좋은 10가지 (0) | 2013.10.04 |
|---|---|
| ie 호환 (0) | 2013.10.02 |
| 무료 다운 사이트 (0) | 2013.09.03 |
| 웹디자인, 웹퍼블리셔 참고 사이트 (0) | 2013.08.08 |
| 참고 사이트 (0) | 2013.08.07 |