크로스 브라우징 하기 !

먼저 크로스 브라우징에 대한 정의를 살펴보면..

Cross Browsing이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말하는 것이다. 또한, 지원할 수 없는 다른 웹브라우저를 위한 장치를 구현하여 모든 웹브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다. 이는 인터넷 환경 자체가 일반 테스크톱 웹 브라우저 뿐만 아니라 모바일, 임베디드 기기, 홈 네트 워킹용 장비 등 아주 다양한 인터넷 환경이 존재하며, 일반인, 장애자, 노약자, 어린이 등 다양한 사용자가 존재하기 때문이다.

이라고 MDN 문서에서 설명하고 있습니다!

이를 간단히 하자면 각각의 브라우저 별로 사용하는 렌더링 엔진이 다르기 때문에 실제로 화면에 렌더링 되는 결과물이 서로 호환이 안되는 경우(호환성 문제)를 해결하여 서로 다른 환경에서 접속하더라도 의도한 대로 보여지고 작동하게끔 하는 방법입니다!!

렌더링 엔진의 종류

이름	설명
게코(Gecko)	모질라 재단에서 만든 레이아웃 엔진으로 파이어폭스, 모질라 선더버드, 시몽키 등이 이를 탑재하고 있다.
블링크(Blink)	웹키트에서 파생된 레이아웃 엔진으로 크롬, 오페라 등이 이를 탑재하고 있다.
트라이던트(Trident)	마이크로소프트의 레이아웃 엔진으로 인터넷 익스플로러, 아웃룩 익스프레스, 마이크로소프트 아웃룩, 그리고 윈앰프, 리얼플레이어의 미니 브라우저 등이 이를 탑재하고 있다.
프레스토(Presto)	오페라 소프트웨어의 사유 엔진으로 오페라가 탑재하고 있었으나, 오페라 15부터는 블링크로 교체되었다.
KHTML	KDE의 컨커러가 탑재하고 있다.
웹키트(Webkit)	KHTML에서 파생된 레이아웃 엔진으로 사파리 등이 탑재하고 있다.
태즈먼(Tasman)	마이크로소프트의 레이아웃 엔진으로 맥용 인터넷 익스플로러가 탑재하고 있다.
EdgeHTML	트라이던트에서 파생된 마이크로소프트의 레이아웃 엔진으로 마이크로소프트 엣지 스파르탄(~2019) 버전에 탑재하고 있었으나, 마이크로소프트 엣지 애너하임(2019~)부터는 블링크로 교체되었다.

이 엔진들 중에 실제 점유율을 기반으로 크게 3가지만 보자면 다음과 같습니다

1. Blink - 크롬, 크로미움 기반의 브라우저 (edge, brave, whale 등)
2. Webkit - 사파리, ios기반의 모든 브라우저 (에플의 ios, mac os에서 webkit이외의 선택지는 허용하지 않는걸로 알고 있습니다.)
3. 게코 - 파이어폭스 브라우저의 엔진으로 점유율 2% 미만입니다...

크로스 브라우징 작업

실제로 크로스 브라우징을 하게 된다면 먼저 내가 사용하려는 속성이 해당 브라우저의 렌더링 엔진에서 적용이 되는지, 적용이 안된다면 대체 속성을 무엇이 있는지를 확인해서 해결을 하면 됩니다. 이순서로는

1. CSS 속성을 reset하여 브라우저마다 차이가 나는 기본 렌더링 값을 제거 합니다.
2. 아이켄유즈 사이트를 활용해서 브라우저별 호환성을 체크 합니다.
3. 일반적으로 호환이 되지 않을경우 브라우저별 태그를 통해 적용합니다. ( --webkit--{text}-text 등 )

출처

• 크로스 브라우징 정의 : http://www.mozilla.or.kr
• 렌더링 엔진의 종류 : https://gs.statcounter.com/