CSS_웹호환성 + 크로스 브라우징

 

[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

코딩 16. 웹페이지 제작 초기 시작 단계

https://necolas.github.io/normalize.css/

Normalize.css: Make browsers render all elements more consistently.

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

https://elad2412.github.io/the-new-css-reset/

The New CSS Reset

https://velog.io/@miso1489/CSS-CSS-Reset

[CSS] CSS Reset이란 (Reset.css, Normalize.css)

 

 

(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/

Prefix free: Break free from CSS vendor prefix hell!

 

파일을 다운받아 스크립트를 연결한다. 

<script src="/js/prefixfree.min.js"></script>

 

 

 

[3] 호환성 테스트 

---

(1) Caniuse 

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc