크로스 브라우징 도대체 어떻게 하는건가?
크로스 브라우징이란?
크로스브라우징이란 간단하게 다양한 환경이나 브라우저에 동일하게 화면이 처리 / 표시되도록 하는 것
👉👉 모든 것을 100% 똑같이 보이게 처리하려고 하는 것보다는,
어느 한쪽에 치우치지 않도록 공통 요소를 사용해 웹페이지를 만드는 것이며
그로 인해 브라우저나 환경에 따라 정보로서 소외감을 느끼지 않도록 하는 것을 의미한다.
크로스브라우징 실무, 크로스브라우징 하는 법 검색을 해봐도 사실 명확하게 답을 주지 않는다.
그 중에서도 정리하자면,
태그 reset을 해준다.
1) 각 브라우저마다 태그의 기본값이 다르므로 기본값의 차이를 없애기 위, 태그 reset을 해줄 것
*reset은 회사의 필요에 따라 본인에게 맞는 것을 사용 + 추가할 것 추가해서 사용한다.
- https://meyerweb.com/eric/tools/css/reset/ (가장 오래됨)
- https://github.com/necolas/normalize.css/blob/master/normalize.css (표준 브라우저 스타일 = 정규화)
- https://csstools.github.io/sanitize.css/ (표준 + 새로운 디폴트 스타일)
- https://github.com/jgthms/minireset.css (쓰지 않는 태그를 제외한 최소한의 css 형)
* 테오님 추천 (하단 참고사이트에서 인용)
*{margin:0;padding:0;font:inherit;color:inherit;}
*, :after, :before {box-sizing:border-box;flex-shrink:0;}
:root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;word-break:break-word;tab-size:4}
html, body {height:100%;}
img, picture, video, canvas, svg {display: block;max-width:100%;}
button {background:none;border:0;cursor:pointer;}
a {text-decoration:none}
table {border-collapse:collapse;border-spacing:0}
/*
폰트와, 컬러는 상속
flex-shrink = 0, flexbox 영역을 넘어갈 때 자동으로 너비 축소 x
-webkit-tap-highlight-color:transparent 모바일 클릭시 검은 영역 제거
-webkit-text-size-adjust: 100% 모바일에서도 원래 폰트 크기대로 출력
*/
공통요소를 사용한다.
2) 위에도 언급했듯, 모든 것을 동일하게 맞추려기 보다는, 공통요소를 사용할 것
* '지원하다 ≠ 모양이 똑같다'와 다르다가 포인트
- https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers
각 기능의 하단에 보면, 해당 기능의 브라우저 호환성을 확인할 수 있다.
기준이 필요하다.
3) 어느 브라우저까지, 어느 버전까지 지원할 지 기준을 잡기
CSS Vendor Prefix를 사용한다.
4) CSS Vendor Prefix 또는 Prefix를 자동으로 추가해주는 도구를 사용할 것
CSS Prefix는 웹 브라우저 호환성을 위해 CSS 속성 앞에 붙이는 접두사이다.👉 각 브라우저에서 속성을 지원하는 방식이 다르므로, 이를 해결하기 위해 사용한다.
👉 단 표준화된 CSS 속성이 나오게 되면, 해당 속성에는 사용하지 않는 게 좋다.
| 접두어 | 브라우저 |
| -webkit | 크롬, 사파리 |
| -moz- | 파이어폭스 |
| -ms- | 엣지 / 인터넷 익스플로러 |
| -o- | 오페라 |
하지만 Css Prefix는 코드를 길게 만든다는 단점과 유지보수를 어렵게 만든다는 단점이 있어,
CSS Prefix를 자동으로 추가해주는 도구들을 사용한다.
👉 코드 작성 시간 단축, 유지보수 용이, 브라우저 호환성 문제 최소화 / 해결
- Autoprefixer : PostCSS의 벤더 프리픽스를 자동으로 추가해주는 플러그인. Can I Use와 같은 서비스를 통해 각 브라우저의 지원 여부를 파악하여 최신 브라우저에서는 vendor prefix가 필요 없는 경우에는 prefix를 자동으로 제거해주기 때문에, 불필요한 코드가 생성되지 않는다(지원하는 속성에 대해서만 접두사를 추가하기 때문에 CSS 파일 크기 줄이고, 속도 개선)
https://github.com/postcss/autoprefixer#benefits - Prefix Free : 별도 prefix 작성 없이, Prefix Free가 브라우저에 해석되는 CSS 코드의 모든 가능성을 고려해 코드를 자동으로 추가해주는 자바스크립트 플러그인. CSS 파일을 읽어들여 JavaScript로 변환한 후, 브라우저에서 동적으로 CSS를 처리
https://projects.verou.me/prefixfree/#plugins
*참고 자료:
https://mulder21c.github.io/2019/01/30/what-is-cross-browsing/
http://www.mozilla.or.kr/docs/web-developer/standard/crossbrowsing.pdf
https://velog.io/@teo/2022-CSS-Reset-%EB%8B%A4%EC%8B%9C-%EC%8D%A8%EB%B3%B4%EA%B8%B0