Safari 브라우저에서 크로스브라우징

사파리(Safari)는 애플에서 개발한 웹브라우저로, macOS에서 다양한 기능으로 풍부한 브라우저 경험을 제공한다.

하지만 사파리브라우저는 웹페이지를 렌더링하는 방식이 다른 브라우저와 다르기때문에 웹페이지가 깨져보이는 경우가 있다.

해결을 위해서는 아래와 같은 방법이 있다.

크로스브라우징 체크: 브라우저 별 html, css, javascript의 기능 및 속성 사용가능유무를 확인해야한다.
모질라 MDN - 기능을 검색하고 맨 아래로 내리면 '브라우저호환성' 부분에서 어디까지 사용가능한지 체크가 가능하다. https://developer.mozilla.org/ko/ 마찬가지로 can i use에서 버전별 지원여부를 확인할 수 있다. https://caniuse.com/
Reset.css적용: 고유의 CSS스타일 속성을 초기화 시킨 상태로 디자인하여 브라우저간 차이를 최대한 줄일 수 있다.
웹표준 준수: 모든 브라우저에서 동일하게 동작하도록 웹표준을 준수해야한다. 이를 위해 html,css,javascirpt를 올바르게 작성해야한다. 개발중 웹표준을 잘 준수하였는지 확인할 수 있는 사이트들이 있다. https://validator.w3.org/ http://jigsaw.w3.org/css-validator
CSS Prefix사용: 일부 css속성이 다르게 작동할 수 있다. 이 경우 CSS Prefix를 사용해 해당속성이 Safari브라우저에서도 작동하도록 지정해줄수있다.
브라우저별 CSS코드적용: 브라우저별로 css코드를 작성해둠으로써, safari에서도 웹페이지가 잘 나타나도록 할수있다.

모던자바스크립트 딥다이브 북스터디 OT (0)	2023.04.04

Learning Notes