# 크로스 브라우징
-브라우저마다 렌더링 엔진이 다르기 때문에 모든 브라우저에서 화면이 동일하게 보이는 것이 아닌 모든 브라우저에 동등한 수준의 정보, 기능 제공을 하는 것을 목표로하는 방법론을 말한다.
# 크로스 브라우징 타깃 설정
크로스 브라우징 작업을 하기 위해서는 브라우저 대응 순서를 정해야 한다. 세계, 국내별 브라우저 점유율이 다를 수 있으므로 타겟을 잘 잡아야한다.
# 크로스 브라우징 작업 방법
- 도움을 주는 웹페이지 활용 : https://caniuse.com/, https://developer.mozilla.org/ko/
- reset.css (or normalize.css) 사용 : 브라우저 마다 기본 스타일 값을 초기화 시킨다.
- prefix (접두사) 사용 : 사용하는 속성이나 태그에 벤더프리픽스를 사용한다.
-webkit- (크롬, 웨일, 사파리) -moz- (파이어폭스) -o- (오페라) -ms- (익스플로러) - 핵 (Hack) : 스타일을 줄 때 특수문자를 넣어서 다른브라우저들에서는 인식이 안되지만 IE 특정 버전에서는 인식되도록 하는 방법이다. IE8 이상의 브라우저에서 구분해내기가 어려우며 CSS 유지 보수를 어렵게 한다.
div{
color:red; /* IE7이하 대응 */
*color:blue /* IE6 대응 */
_color:green
}- IE 용 주석을 이용한 방법 : HTML 문서 내에 주석을 이용하여 구별
<!-- [if IE 7]> <link href="ie7.css" type="text/css" rel="stylesheet"/> <![endif]--> <!-- [if IE 8]> <p> 이 문구는 IE8이 포함되지 않은 하위 브라우저, 즉 IE7,6에서 보여지게 됩니다.</p> <![endif]-->- 메타 태그를 이용한 IE 모드 : head태그 안에 넣어두며 IE가 문서를 읽고 원하는 모드로 렌더링
<head> // ... <meta http-equiv="X-UA-Compatible" content="IE=edge" /> //... </head>- 라이브러리 활용 : jQuery, Polyfill, Modernizr, es-shims…
# 크로스 브라우저 테스트 단계와 방법
- 테스트 기준 설정 : 기준이 되는 브라우저에서 테스트하여 원래 의도를 파악
- 테스트 계획 수립 : 테스트 계획 및 테스트 브라우저 선택
- 테스트 진행 : 자동테스트 및 수동테스트 실행
기본적으로 자동 테스트 툴을 사용한다. 수동테스트의 경우는 오류를 발생할 여지가 있기 때문에 유저 터치 포인트 등 UX문제 등에서만 수동 테스트를 진행한다.
# 크로스 브라우저 테스트 툴
- Browserstack
- LambdaTest
- CrossBrowserTesting
- Browserling
- Selenium
프론트엔드 개발자