intro
개발을 할 때 보통 크롬을 사용해 작업을 하게 됩니다. 그때는 아무 문제가 없었던 기능 혹 css가 사파리나 다른 브라우저에서는 깨지는 경우가 생기곤 합니다. 따라서 해당 개념과 연관 지어 크로스 브라우징에 대해 글을 작성해 보았습니다!
크로스 브라우징이란?
- 다양한 브라우저 속에서도 서로 호환이 가능한 상호 호환성을 의미합니다.
어느 한쪽에 최적화되지 않고, 공통 요소를 사용하여 웹 페이지를 제작하는 기법으로 동등한 수준의 정보, 기능 접근에 초점을 맞추는 것입니다.
예를 들어 제가 많이 겪어보았던 것은 css와 관련되어 chrome에서는 정상적인 페이지가 safari에서만 width가 맞춰지지 않아 화면 x축으로 스크롤이 되던 경험이 있습니다.
그 외에도
- 작동하지 않은 HTML5, Javascript 코드가 존재
- 해석하지 못하는 CSS 코드 존재
- 브라우저 버그들이 존재
- 브라우저 자체적인 CSS 스타일
위 경우처럼 같은 코드여도 사용자가 접근하는 브라우저마다 다른 결과물을 보인다는 것은 사용성에 있어 매우 좋지 않은 것이라고 모두 느끼실 겁니다.
왜 일어나는 것일까?
- 이유는 OS가 다르고, 브라우저마다 ‘렌더링 엔진’이 다르기 때문입니다.
이 말은 즉 결국 동일하게 안 만드는 것이 아니라 애초부터 동일하게 만드는 것은 ‘불가능한 일’이라고도 할 수 있겠습니다.
- 렌더링 엔진: 화면에 텍스트와 이미지 등을 그리는 SW. HTML 을 요청하면 요청에 따른 적절한 파싱 하여 화면에 표시합니다.
그렇다면 어떻게 처리하지?
- can i use (웹 사이트) https://caniuse.com/?search=grid 위 페이지는 브라우저마다의 css 사용 및 호환 가능 여부를 알려주는 고마운 페이지입니다. 예로 gird라는 속성의 각 브라우저의 호환 가능 여부를 알아보고 싶을 때 해당 사이트에 검색을 하면 다양한 브라우저에서 해당 속성이 사용 가능한지 보기 쉽게 나타냅니다.
- 모질라 MDN (웹 사이트) https://developer.mozilla.org/ko/ 개발을 하며 정말 많이 들어가 보는 페이지 중 하나일 MDN에서도 브라우저 호환성을 확인할 수 있습니다. 검색한 키워드 내용의 최하단에 브라우저 별 호환 관련 정보가 정리되어 있어 찾고자 하는 속성을 검색 후 아래에서 특이하게 적용이 안되는 브라우저가 있는지 확인해 볼 수 있습니다.
- CSS 초기화 ‘웹 브라우저'마다 default 값으로 스타일이 적용되어 있습니다. 따라서 브라우저마다의 기본 스타일을 없앰으로 초깃값을을 동일하게 하여 지면을 평평하게 만드는 작업을 통해 이후 개발에 차질이 없게 하는 것으로 크로스 브라우징을 예방할 수 있습니다.
💻브라우저별 벤더프리픽스 (이런것도 있어요! / 그러나 요즘은 잘 사용하지 않아요...)
웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미. ⇒ CSS에 새로운 속성을 추가하기 전 임시적으로 접두어를 사용하는 것.
- 크롬 : -webkit-
- 사파리 : -webkit-
- 파이어폭스 : moz- (mozila 라는 단체가 파이어폭스를 만들었기 때문에)
- 오페라 : -o-, -webkit-
- 익스플로러 : -ms-
background: red; <!-- gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드 -->
background: -webkit-linear-gradient(red, yellow); <!-- 크롬과 사파리 4.0 이상을 위한 코드 -->
background: -moz-linear-gradient(red, yellow); <!-- 파이어폭스 3.6 이상을 위한 코드 -->
background: -ms-linear-gradient(red, yellow); <!-- 익스플로러 10.0 이상을 위한 코드 -->
background: -o-linear-gradient(red, yellow); <!-- 오페라 10.0 이상을 위한 코드 -->
background: linear-gradient(red, yellow); <!-- CSS 표준 문법 코드 -->https://velog.io/@hyebinee/크로스브라우징cross-browsing의-중요성과-해결방법
https://tech.pxd.co.kr/post/Cross-Browsing-143
위 블로그를 참고하여 작성한 글 입니다.
많이 부족하고 가독성도 떨어지지만 계속 연습하며 더 나은 글을 작성 할 수 있는 능력을 길러보려합니다.
