반응형
[1] 웹 호환성
(1) 웹 호환성
웹 브라우저 버전, 종류와 관계없이 호환하게 웹사이트 접근이 가능한 것
크롬 , 파이어폭스, 사파리 , 오페라 등
(2) 크로스 브라우징
브라우저에 맞는 웹페이지 만들기
[2] 크로스 브라우징 해결방법
(1) 기본설정
문서 호환성 설정
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
뷰포트 설정 (디바이스해상도)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
문자 인코딩 설정
<meta charset="UTF-8">
(2) CSS Reset
브라우저마다 다르게 적용되는 CSS를 초기화시켜 기본 CSS 스타일을 설정한다
reset.css 나 normalize.css를 사용하자
https://blog.naver.com/mar1101/221006027889
https://necolas.github.io/normalize.css/
https://meyerweb.com/eric/tools/css/reset/
https://elad2412.github.io/the-new-css-reset/
https://velog.io/@miso1489/CSS-CSS-Reset
(3) 브라우저별로 CSS 파일 설정
//Edge
@supports(ms-img-align:auto){....}
//IE10 ~ IE11
@media screen and(-ms-height-contrast:active), (-ms-height-contrast:none){
header(border-bottom: 10px solid orange;)
}
//IE10 ~ IE11
문서에 클래스명 ie10을 적용한다
<script>
if (/*@cc_on!@/false){
document.documentlement.ClassName+='ie10';
}
</script>
//IE9
인터넷 익스플로러 9 전용 css파일을 만든다
<!--[if IE9]><link rel="stylesheet" href='ie9.css' type="text/css"/><! [endif];-->표기
@charset "utf-8";
CSS document
//크롬
@media screen and(-webkit-min-device-pixel-ratio:0){
header(border-bottom:10px solid orange;)
}
//파이어 폭스
@-moz-document url-prefix(){
header(border-bottom:1px solid red;)
}
(4) 벤더 프리픽스 vendor prefix
CSS 권고 안에 포함되지 않은 기능 , 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할때 이것을 사용한다
해당 기능이 포함되어있지 않은 웹 브라우저에서도 그 기능을 사용할수 있다
-webkit-
-moz-
-ms-
-o-
가 CSS에 추가되는데 , 일일이 하나씩 추가할수 없으니 자동으로 추가해주는 프리픽스 프리 를 이용한다
https://projects.verou.me/prefixfree/
파일을 다운받아 스크립트를 연결한다.
<script src="/js/prefixfree.min.js"></script>
[3] 호환성 테스트
(1) Caniuse
반응형
'🌈 웹 퍼블리싱 > HTML' 카테고리의 다른 글
HTML_벡터그래픽 SVG 사용 (0) | 2023.12.22 |
---|---|
HTML_반응형 웹 (58) | 2023.12.20 |
HTML_웹표준 + 시멘틱 요소 (12) | 2023.12.20 |
HTML_웹 접근성 (0) | 2023.12.20 |
HTML_파비콘 (18) | 2023.12.19 |
댓글