[프론트엔드] 크로스 브라우징

크로스 브라우징이란?

다양한 브라우저에서 UI가 깨지지 않고 나오게 한다. 브라우저마다 제공하는 기능에 차이가 생기는 경우 기능이 제대로 동작하지 못하는 경우가 발생 할 수 있다

프로젝트를 진행하면서 safari, firefox, chrome, samsung internet, edge 에서 정상적으로 작동하는 웹을 만들고자 사용한 방법들에 대해 정리한다.

크로스 브라우징 적용방법

1. caniuse에서 지원하는 기능인지 검색하기
2. css초기화를 통해 모두 같은 UI를 보여줄 수 있게 한다.caniuse 검색하기프로젝트 코드 작성 시 브라우저 환경에 따라 제공하는지 안하는지 알려주는 사이트이다.
   링크: https://caniuse.com/css 초기화 하기대부분의 초기화 css 코드는 쓸모없거나 덮여 쓰여지기 때문에 where selector를 사용하여 구분지어 주었다.
   패스트캠퍼스 더레드에서 제공하는 강의내용을 참고하였다.

img {  
    max-width: 100%;  
    height: auto; // 컨텐츠의 width와의 비율을 적절하게 맞추기 위함  
}

// class를 지정하여 style을 적용하는 경우에 사용하였다.  
[class] {  
    margin: 0;  
    padding: 0;  
    // margin, padding 초기화  
    box-sizing: border-box;  
}  
[class]:where(ol, ul) {  
    list-style: none;  
}  
[class]:where(button, fieldset, iframe, input, select, textarea) {  
    border: 0;  
}  
[class]:where(button, dialog, input, progress) {  
    background-color: transparent;  
}  
[class]:where(button, input, progress, select, textarea) {  
    -webkit-appearance: none; // 기본테마를 전부 제거한다.  
    appearance: none;  
}

출처

패스트캠퍼스 더레드 The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명
https://caniuse.com/