👀크로스 브라우징에 관한 고찰

크로스 브라우징(Cross Browsing)

표준 웹 기술을 채용하여 다른 기종 or 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에, 어느 한쪽에 최적화되어 치우치지 않도록 웹 페이지를 제작하는 기법을 말하는 것.
또한, 지원할 수 없는 다른 웹 브라우저를 위한 장치를 구현하여 모든 웹 브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다.

왜 맞춰야 하나요?
-각각의 브라우저의 렌더링 엔진이 다르기 때문.
- ex ) display: flex;
  -> MDN 문서의 하단에는 브라우저 호환성을 다루고 있음. 이처럼 브라우저 마다 지원하는 경우가 전부 다르기 때문에, 작업자가 의도한대로 브라우저의 부침 없이 동작하게 하려면 필요함.
어떻게 맞추나요?
-무조건 동일하게 맞추는 것이 아님을 기억할 것. 동일하게 맞출 수도 없음🤔
디폴트 기능과 유사하게 맞춰야 한다.
-기능을 주로 선보일 브라우저(이하 디폴트 브라우저)를 파악하고 있어야 한다. (사용이 적은 브라우저 맞추다 시간 보내지 말란 이야기.🤦‍♀️)
브라우징 방법✍

사전에 방지
-Can I Use 활용 : CSS 속성을 입력하면 어느 브라우저에서 동작하는지 알려주는 사이트.
CSS 초기화 작업
-reset.css 등 : 브라우저마다 차이나는 기본 스타일 값들을 초기화.
보수적으로 코딩하기
-작업 시작부터 대부분의 브라우저에서 호환되는 기능과 코드를 사용하는 것.
Vender Prefix
-크로스 브라우저를 개발하기 위해 CSS 속성 앞에 브라우저별 접두사를 붙이는 것
- 접두어 브라우저
  - -webkit- : 구글, 사파리, ios 사파리 안드로이드
  - -moz- : 파이어폭스
  - -o- : 오페라
  - -ms- : 익스플로러

메타테그 이용

<head>
 // ...
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 //...
</head>

-head 요소 안에 넣어두면 IE가 그 해당 문서를 읽고 원하는 모드로 렌더링을 하게 해줌.
-content="IE=edge"는 해당 브라우저가 할 수 있는 가장 최신의 렌더 버전으로 렌더링 된다.

Author And Source

이 문제에 관하여(👀크로스 브라우징에 관한 고찰), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gyeojin_1/크로스-브라우징에-관한-고찰

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다