크로스 브라우징

 

채널톡 프론트엔드 채용 공고를 둘러보다가  "크로스브라우징" 에 신경쓴다는 문장을 발견하였다.

크로스 브라우징이 뭔지 몰라서 알아본 내용을 정리하겠다. 

 

처음에는 단어만 몰랐지, 내가 프로젝트 하면서 겪었던 상황과 직접적으로 연결되어있다.

밑에는 프로젝트 했을 때 겪었던 상황을 캡쳐해보았다.

내가 기대한 화면

크롬 환경에서 본 화면

  

이렇게 , 모바일 시뮬레이터랑 배포하고 휴대폰으로 본 화면의 ui가 다른것을 확인하였다.

 

크로스브라우징이란? 

동일한 웹사이트라 하더라도 어떤 웹브라우저로 보느냐에 따라 다르게 보일 수 있다. 이렇게 다양한 웹 브라우저와 버전, 다양한 운영체제에서 웹 사이트가 일관되게 동작하도록 하는 기술 또는 접근 방식을 크로스브라우징 이라고 한다.

 

크로스 브라우징은 모든 화면이 '동일'하게 표시되게 하는 것이 아닌, '동등'한 수준의 정보, 기능 제공을 목표로 한다.

(ex) chrome, safari , microsoft edge , firefox….)

 

 

탄생 배경

최초의 웹브라우저인 '월드 와이드 웹'이 나오고 넷스케이프 내비게이터와 MS의 인터넷 익스플로러의 경쟁을 통해 짧은 기간 동안 많은 버전의 웹브라우저가 출시하게되었다.

                                                                                          ⬇️

웹표준이라는 개념에 대해 충분하게 논의가 되지 못했던 당시에 업체 간에 호환되지 않는 기술 도입이 발생하였다.

                                                                                          ⬇️

웹브라우저 간의 호환성 문제야기했고, 이를 해결하기 위해 '멀티 브라우저' 개념이 탄생

                                                                                          ⬇️

이것이 브라우저 상호 호환성(Cross-browser compatibility) 기술 개발로 이어지면서 크로스 브라우징 개념이 탄생하였다. 

 

 

크로스브라우징 필요성

• 지원할 수 없는 다른 웹 브라우저를 위한 장치를 구현하여 모든 웹 브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것.
• 이는 인터넷 환경 자체가 일반 데스크톱 웹 브라우저뿐만 아니라 모바일, 임베디드 기기, 홈 네트워킹용 장비 등 아주 다양한 인터넷 환경이 존재하며, 일반인, 장애인, 노약자, 어린이 등 다양한 사용자가 존재하기 때문이다.

자주 발생하는 크로스브라우징 문제

 

 

그래서 어떻게 해결하는데 ? 

 

1. dvh속성 적극 이용하기 

윗 사진처럼 모바일에서는 상하단의 주소창과 네비바의 높이를 스크린 높이에 포함하기 때문에 여백이 생긴다.

• 우리가 원하는 것 : 맨 오른쪽 화면
• 하지만 현실 : 왼쪽처럼 주소창 높이나 네비바를 포함하여 계산되어, 모바일 환경에서 스크린이 잘림

사파리는 100dvh기준이 URL영역까지 포함한다. 또한 스크롤에 따라 화면 영역을 다이나믹하게 대응한다. 

 

크게 3가지 화면이 존재한다. dvh, lvh,svh 3가지

1-1. svh를 알아보자 . (Short Viewport Height)

• svh는 사용자가 볼 수 있는 가장 작은 viewport 높이를 반영한다.
• viewport 높이에서 모든 인터페이스 요소를 제거한 높이라고 할 수 있다.(주소창 같은것 제거 )

1-2 lvh (Large Viewport Height)

• lvh는 사용자가 볼 수 있는 가장 큰 viewport 높이를 반영한다.
• viewport 높이에서 모든 인터페이스 요소를 포함한 높이라고 할 수 있다.
• 주소 표시줄이 있더라도 주소 표시줄이 없을 때의 총 화면의 길이를 가져온다.

1-3 dvh (Dynamic Viewport Height)

svh 개념을 익히고, 그럼 화면 꽉차는 svh를 사용하면 되지 않나? 라고 생각했었다.

하지만 위에서 언급했던 것처럼 safari같은 경우는 밑에 동영상 처럼 하단 url이 dynamic하게 동작하는 것을 확인할 수 있다. 

만약 svh만을 사용한다면,url이 올라왔을 때 이것에 대응하지 못하고 하단 화면이 잘리는 현상이 발생 할 것이다. 

그래서 나온게 dvh이다! 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

• dvh는 주소 표시줄이 스크롤을 통해 축소가 되건 노출이 되고 있건 상관 없이현재 보여지는 뷰포트 높이를 동적으로 가져온다. (100svh ≤ dvh ≤ 100lvh)
• 만약 주소표시줄이 축소된 상태에서 스크롤을 통해 주소표시줄이 확장되면 dvh의 값도 업데이트된다.
• dvh를 사용하면 정확히 viewport에 맞게 콘텐츠의 크기를 조정할 수 있다.

2. 구형 브라우저를 위해 polyfill 사용하기

 

ES6 이상의 문법을 지원하지 않는 구형 브라우저나 IE의 경우에는 ES5 문법으로 트랜스파일링이 필요하다.

이를 위해 일반적으로 React.js 개발자들은 CRA에서 자동으로 설정해주는 babel을 사용하거나,별도의 설정을 통해 babel을 설치하지만, ES6 이상에서 제공하는 set, map, promise 등과 특정 빌트인 객체의 프로토타입 메소드 등은 babel로 트랜스파일링을 거쳐도 ES5 문법으로 표현될 수 없어 문제가 발생한다.

 

하지만!  이 문제가 발생하는 틈을 polyfill이 메꿔준다.

 

https://ko.javascript.info/polyfills

자세한건 링크 문서 참고!

<script src="https://polyfill.io/v3/polyfill.min.js"></script>

//cdn으로 polyfill을 불러오기

 

 

 

3. CSS reset

CSS Reset은 브라우저마다 다르게 적용되는 기본 CSS 스타일을 초기화하여 동일한 기본 스타일을 갖도록 한다.

이를 통해 각 브라우저마다 동일한 기본 스타일을 적용하므로 크로스 브라우징 이슈를 줄일 수 있다.

• TailwindCSS는 내부적으로 perflight 라는 CSS reset(초기화) 기능을 기본 제공해서 따로 할 필요가 없다.
• Vanilla CSS나 styled-components를 쓸 때는 자동 reset이 없다. 때문에 normalize.css 또는 reset.css를 import 하거나 전역 스타일(GlobalStyle)에 reset 코드 직접 작성해야 한다.

4. 벤더 프리픽스

벤더 프리픽스는 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사를 의미한다. 즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용한다.

CSS에 새로운 속성을 추가하기 전에, 일종의 테스트와 실험 기간으로 임시적으로 접두어를 사용하는 것이다. 벤더 프리픽스를 통해 표준으로 만들어지기 전에 일어날 문제들을 사전에 막을 수 있다.

 

IE or Edge → -ms-

Chrome → -moz-

Firefox → -webkit-

Opera → -o-

iOS Safari → -webkit-

Android Browser → -webkit-

Chrome for Android → -webkit-

.btn {
  /* 오래된 WebKit용 그라디언트 */
  background: -webkit-linear-gradient(top, #f80, #f50);
  /* 표준 */
  background: linear-gradient(to bottom, #f80, #f50);
}

이렇게 브라우저 접두어를 앞쪽에 쓰고, 맨 마지막에 표준 속성을 쓴다. 접두어 버전을 사용하는 브라우저는 그것을 이용 할 것이고, 이해하지 못하는 브라우저는 그 속성을 무시한다. 표준을 지원하는 브라우저는 맨 마지막 있는 속성을 실행한다.

 

하지만 이것 또한 실무에서는 Autoprefixer를 사용한다. 

• Tailwind를 쓰면 이미 Autoprefixer가 기본 탑재되어 있어 별도 설정이 거의 필요 없다.
• styled-components(CSS-in-JS)는 내부 엔진(stylis)에서 주요 프리픽스를 자동 처리
• 바닐라 CSS/SCSS라면 PostCSS 파이프라인에 Autoprefixer를 추가한다.

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {}
  }
}