크로스 브라우징 ( Cross Browsing )



크로스 브라우징은 웹사이트나 웹 애플리케이션이 다양한 웹 브라우저에서
일관되고 올바르게 작동하도록 보장하는 방식을 의미한다.

우리는 다양한 브라우저를 사용하고있다.
예를 들어 나는 구글의 크롬을 주로 사용하지만 
Safari, Edge, Firefox, SamSung Internet, Opera 등등
다양한 브라우저들이 시장에 존재하며 많은 사람들이 애용하고 있다.

그렇기에 브라우저 간 상호 호환성이 중요한 것이다.
서로 사용하는 브라우저가 달라도 같은 웹 페이지를 그대로 보여줘야하기 때문이다.
( 브라우저들은 사용하는 OS가 다르고, 랜더링 엔진이 다르기 때문 )

각 브라우저들의 종류와 사용 점유율

만약 크로스 브라우징을 신경쓰지 않는다면 브라우저마다 페이지별로 제공되는 값들이 다르기 때문에

우리가 의도한 대로 실행되지 않아 브라우저마다 레이아웃과 폰트 등 CSS가 그대로 적용되지 않거나

기능이 제대로 실행되지 않고 버그가발생하는 등 사용자의 경험에 좋지 못한 영향을 줄 수 있기 때문이다.

 

Can I use... Support tables for HTML5, CSS3, etc

위와 같이 크로스 브라우징에 도움을 주는 사이트에서 각 사항들을 확인하며 설계를 할 수 있다.

 

웹 브라우저마다 default 값으로 각자 스타일이 적용되어 있기 때문에 기본 디폴트 스타일 값이 아닌

동일한 CSS 스타일을 보여주기 위해 default 디폴트 값을 초기화 할 수도 있으며 ( reset css를 제공하는 사이트 이용 등 )

CSS Tools: Reset CSS

렌더링 모드 ( for IE ) 를 사용하여 meta 태그를 사용하는 방법도 있다.

( content 속성에 어떤 렌더링 엔진을 사용할 것인가를 지정 )

 

속성	렌더링
IE=5	관용모드(quirks mode)로 지정된 DOCTYPE에 상관없이 IE5 렌더링
IE=7	IE7 표준모드로 지정된 DOCTYPE에 상관없이 IE7 표준 모드 렌더링
IE=EmulateIE7	IE7 표준모드로 지정된 DOCTYPE에 상관없이 IE7 표준 모드 렌더링
IE=8	IE8 표준모드로 지정된 DOCTYPE에 상관없이 IE8 표준모드로 렌더링
IE=EmulateIE8	IE8 에뮬레이션 모드로 지정된 DOCTYPE에 따라 IE8 표준모드나 관용 모드로 렌더링
IE=edge	최신모드로 지정된 DOCTYPE에 상관없이 IE8 이상 버전에서 항상 최신 표준 모드로 렌더링

마이크로소프트사에서는 특별한 경우가 아니라면, IE=edge를 사용을 권장한다 !

위에 적은 글의 내용처럼 내가 쓰는 브라우저를 모든 사용자가 사용하는 것이 아니기 때문에 당장 내 화면에서는 

문제가 없을지라도 다른 브라우저 사용자에게 그대로 전해지지 않을 수 있는 부분을 생각하고 신경써야겠다.