질문을 일반화해보면,
웹 브라우저마다 제공하는 기능이 다른데 모든 웹 브라우저에서 의도한 대로 작동하도록 하기 위해 어떤 방식으로 웹 페이지를 만드냐는 것이다.
과거에 비슷한 질문에 대해 공부한 적이 있다.
웹 브라우저 스펙 차이에 따른 스타일링 이슈는 어떻게 해결하나요?
위에서는 특히 스타일을 통일하기 위한 방법을 알아봤다면
이번에는 스타일뿐만 아니라 기능을 통일하기 위한 방법까지 알아보고자 한다.
크로스 브라우징
최대한 많은 종류의 웹 브라우저에서 의도한 대로 작동하는 웹 페이지를 만드는 것
웹 페이지를 만들 때, 동일한 하나의 웹 페이지라도 웹 브라우저에 따라 다르게 보이고 작동하게 된다.
이는 웹 브라우저마다 사용하는 렌더링 엔진*이 다르기 때문인데,
웹 표준**을 준수함으로써 어느정도 해결할 수 있지만 웹 표준을 준수하지 않는 IE와 아직 웹 표준이 정의되지 않은 CSS 속성의 경우 추가적인 크로스 브라우징이 필요하다.
크로스 브라우징은 하나의 웹 페이지가 다양한 웹 브라우저에서 동일하게 보이고 작동하도록 하는데,
이때 완벽하게 동일하게 보이고 작동하는 동일성이 아닌, 동등한 수준의 정보와 기능을 제공하는 동등성을 목표로 한다.
동등성은 웹 페이지를 구성하는 모든 부분을 대상으로 하지만 현실적으로 모든 부분을 동등하게 구현하기란 쉽지 않다.
때문에 다음의 것들을 위주로 고려하도록 한다.
- 기본 기능: 메뉴 선택 시 해당 페이지로 올바르게 이동하는가? 입력 양식 필드의 유효성 검사가 올바르게 작동하는가?
- GUI: 폰트, 이미지, 레이아웃 등이 의도한 대로 올바르게 표시되는가?
- 응답: 사용자의 요청에 웹 페이지가 올바르게 응답하는가?
- 반응형: 기기별 해상도에 따른 지원을 제공하고 있는가?
* 내용 정보인 HTML, XML과 서식 정보인 CSS, XML 등을 읽어들여 사람이 읽을 수 있는 문서로 표시하는 웹 브라우저의 핵심 기능을 담당하는 소프트웨어
** 개발자는 표준에 맞는 사이트를 만들어 모든 브라우저에서 동일하게 보이고 작동하도록 해야 하고, 브라우저는 브라우저를 표준에 맞춰 업데이트하여 사이트가 다른 브라우저에서 보이고 작동하는 대로 해당 브라우저에서 보이고 작동하도록 해야 한다.
크로스 브라우징 방법
크로스 브라우징을 하는 방법은 무수히 다양하지만 그중 주요한 것들만 정리해보았다.
1. 점유율이 높은 브라우저, 버전을 기준으로 웹 사이트를 만든다.
웹 사이트를 만들 때는 점유율이 높은 브라우저, 점유율이 높은 버전을 기준으로 만들도록 한다.
Statcounter에서 전세계, 국가별 브라우저와 버전 점유율을 확인할 수 있다.
Browser Market Share Worldwide
Browser Market Share Worldwide | Statcounter Global Stats
This graph shows the market share of browsers worldwide based on over 5 billion monthly page views.
gs.statcounter.com
Browser Version Market Share Worldwide
Browser Version Market Share Worldwide | Statcounter Global Stats
This graph shows the market share of browser versions worldwide based on over 5 billion monthly page views.
gs.statcounter.com
Browser Market Share Republic of Korea
Browser Market Share Republic Of Korea | Statcounter Global Stats
This graph shows the market share of browsers in South Korea based on over 5 billion monthly page views.
gs.statcounter.com
2. 웹 표준을 준수하여 웹 사이트를 만든다.
W3C, MDN, Can I Use 등에서 특정 속성, 기능, API의 웹 표준 및 지원 브라우저와 버전을 확인할 수 있다.
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
Web API | MDN
웹 코드를 작성한다면 많은 API를 사용할 수 있습니다. 아래 목록은 웹 앱이나 웹 사이트를 만들 때 사용할 수 있는 모든 인터페이스(객체의 유형)입니다.
developer.mozilla.org
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
3. Modernizr 라이브러리를 사용해 브라우저의 지원 여부를 검사한다.
Modernizr 라이브러리는 다양한 웹 기술에 대해 현재 실행중인 브라우저의 지원 여부를 검사한다.
예를 들어 현재 실행중인 브라우저의 localstorage 지원 여부를 검사하고자 할 경우,
먼저 https://modernizr.com/download?setclasses 에서 localstorage 등 검사하고자 하는 항목 체크 후 Modernizr를 다운 받고 이 Modernizr 파일을 script로 추가한다.
<head>
<script src="modernizr.min.js"></script>
</head>
JavaScript에서 검사하고자 할 경우 true, false를 반환하는 Modernizr 객체의 property를 사용하고
if (Modernizr.localstorage) {
// 지원할 경우
} else {
// 자원하지 않을 경우
}
CSS에서 검사하고자 할 경우 클래스명으로 구분한다.
.no-localstorage { /* 지원하지 않을 경우 */ }
.localstorage { /* 지원할 경우 */ }
4. @supports 구문을 사용해 특정 스타일을 지원하는 브라우저에만 적용한다.
특히 CSS의 경우 @supports 구문을 사용해 특정 스타일 지원 여부에 따라 스타일을 조건부로 적용할 수 있다.
예를 들어 display: grid 속성을 사용하고자 할 경우,
@supports (display: grid) {
/* 지원할 경우 */
}
display: grid 속성을 지원하는 브라우저는 위 스타일을 적용하고 그렇지 않은 브라우저는 위 스타일을 무시한다.
5. 브라우저별 Vender Prefix를 사용해 브라우저별 스타일을 지정한다.
위와 더불어 CSS는 Vender Prefix를 사용해 브라우저별 스타일을 지정할 수도 있다.
브라우저별 Vender Prefix는 다음과 같다.
- 크롬: -webkit-
- 사파리: -webkit-
- 파이어폭스: moz-
- 오페라: -o-, -webkit-
- 익스플로러: -ms-
6. DOCTYPE을 선언하여 표준 모드로 렌더링되도록 한다.
W3C가 웹 표준을 정의했던 초기에는 기존의 웹 브라우저들이 새롭게 정의된 웹 표준을 준수하면서 웹 페이지를 표현할 수 없었다.
때문에 웹 브라우저들은 두 가지 모드의 렌더링을 제공하였는데,
- 호환 모드: Navigator 4와 Explorer 5의 비표준 동작을 에뮬레이션하여 웹 페이지를 표현한다.*
- 표준 모드: HTML과 CSS를 이용하여 웹 페이지를 표현한다.
이때 호환 모드의 경우 웹 브라우저별로 웹 페이지를 표현하는 방식이 상이하기 때문에 크로스 브라우징이 불가능하다.
호환 모드와 표준 모드의 선택은 DOCTYPE 선언 여부에 의해 결정되는데,
DOCTYPE을 선언하지 않으면 호환 모드로, 선언하면 표준 모드로 렌더링된다.
따라서 <!DOCTYPE html>로 DOCTYPE을 선언해 웹 브라우저가 웹 페이지를 표준 모드로 렌더링하도록 해주어야 한다.
* 과거의 웹 페이지는 Netscape의 Navigator용과 Microsoft의 Internet Explorer용의 두 가지 버전으로 제작되었다.
이 외에도 X-UA-Compatible 설정하고 IE 버전마다 코드를 작성하는 등의 방법이 있다.
다음 자료를 공부하여 정리한 글로, 아직 많이 부족해 틀린 내용이 있을 수도 있습니다.
혹시 있다면 댓글로 알려주세요. 수정하고 더 공부해나가겠습니다-
왜 크로스 브라우징을 고려해야 하나요?
크로스 브라우징의 중요성과 해결방법
호환 모드와 표준 모드
호환 모드와 표준 모드의 다른 점은 무엇인가요?
Modernizr 라이브러리: HTML5, CSS3 새요소 지원 여부 검사
'Computer Science > FAQ' 카테고리의 다른 글
| 클로저란 무엇인가요? (0) | 2025.01.02 |
|---|---|
| 쿠키란 무엇인가요? (0) | 2024.11.12 |
| DOMContentLoaded 이벤트와 load 이벤트의 차이점은 무엇인가요? (2) | 2024.10.05 |
| 웹 사이트의 에셋을 여러 도메인으로 서빙했을 때의 장점은 무엇인가요? (0) | 2024.09.30 |
| 웹 브라우저 스펙 차이에 따른 스타일링 이슈는 어떻게 해결하나요? (0) | 2024.09.17 |