[CS] 크로스브라우징(Cross Browsing)

j.log·2021년 6월 10일

1. 크로스브라우징(Cross Browsing)

웹 표준에 따라 개발을 하여 서로 다른 OS 또는 플랫폼에 대응하는 것을 말한다. 즉, 브라우저의 렌더링 엔진이 다른 경우에 인터넷이 이상없이 구현되도록 하는 기술이다.

웹 사이트를 서로 비슷하게 만들어 어떤 환경 에서도 이상없이 작동되게 하는데 그 목적이 있다.

즉, 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 방법을 말한다.

서비스를 제공하는데 있어서, 차이는 있지만 핵심적인 내용은 제공해야 한다. 내용을 똑같이 다 보여주기 보다는 조금 다르게 보여주더라고 최신 기술을 적용하자.

❗ 구 브라우저 대상으로는, 핵심기능만 쓸만하게 동작하도록
❗신 브라우저 대상으로는, 지원되는 최신 기술을 적용하여 멋지고 향상된 UX를 제공하자

가능하다면 서비스를 제공하는 주 타겟층을 예측하고 그 타겟층이 주로 사용하는 브라우저를 집중적으로 공략하자.

라이브러리는 호환성 이슈를 해결하기 위한 아주 좋은 전략이다. 하지만, 라이브러리를 사용하기위해 또 다른 라이브러리를 추가해야한다면 관리 cost가 발생한다.

각 브라우저에서 지원하는 함수, 메소드 그리고 기능들이 다르기 때문에, if문을 통해서 분기를 설정한 다음에 함수를 적용하자

if(isIE) {
	attachEvenet();
}	 else if(isFirefox) {
	addEventListener();
}

웹 표준을 지키고 있는지 검사하기

CSS의 경우, browser의 기본 스타일이 제각각인 경우가 있다. 동일한 스타일을 적용하기 위해선 defalut 값을 초기화시킬 필요가 있다.

이것도 하나의 라이브러리로, 검색해보면 여러 개를 찾을 수 있다.

아직 웹 표준이 안된 기능을 브라우저들이 가져다 지원하기 때문에 기능 앞에 각 브라우저들의 엔진을 prefix로 적어주자.

모든 브라우저에서 지원하는 호환 프로퍼티를 먼저 정의하고 CSS3에서 지원하는 프로퍼티를 나중에 정의하는 방법을 사용해야 한다. 이와 같은 이유로 접두어가 없는 속성은 가장 나중에 추가해줘야 한다.

#menu {
	-webkit-border-radius: 15px;
   	-moz-border-radius: 15px;
    	border-radius: 15px;
}

jlog