웹 호환성( 크로스 브라우징) 테스트 하는 법, 브라우저 별 CSS 적용하기

웹 호환성 테스트

 

QA팀 : 사이트 완성 후 -> 기획 -> 디자인 -> 퍼블리싱 -> 개발

- 모든 것들이 잘 이루어졌는지 기간 내에 QA팀이 테스트한다.

- 다양한 브라우저 버전 정보를 열어보고 환경에 맞춰서 각각 테스트한다.

- 회사에서는 모든 브라우저 정보, 버전을 테스트하라고 직접 환경을 제공해 주지 않는다,

- 우리가 직접 할 수 있는 만큼 호환성 테스트를 한다.

- 나중에 오픈을 한 뒤 테스트 기간 내에 오류들은 그때그때 수정한다.

사이트 호환성 기준

- 기획, 파트에서 정한다 , 고객사에서 별도 요청

- 파이어 폭스, 크롬 자동 업데이트

- 인터넷 익스플로러 window os 버전에 따라 업데이트

- 정품, 가품 구분한다.

- 사용자들이 제대로 된 정보를 얻기 위해서는 window10 이상을 맞춰준다.

- -webkit 사파리, 크롬 지원 / -MOZ 파이어 폭스를 지원

사이트 호환성 테스트 기준

- 화면이 정상적으로 표시되는지 중요하다.

- 눈에 띄게 틀어진 부분은 수정해 준다.

 

CSS핵 : 호환성을 하면서 특정 브라우저에만 입력이 되게 한다.

잘못된 방식으로 표준코드를 썼을 때

style핵 : 브라우저 전용으로만 CSS 스타일을 사용할 수 있게 하는 방법이다.

- CSS 내의 삽입, CSS 파일 별도로 작업을 할 수 있다.

 

브라우저별 CSS 적용하기

Edge

@supports(ms-img-align:auto){

          edge전용   

}

 

IE10 ~ IE11

@media screen and(-ms-height-contrast:active), (-ms-height-contrast:none){

  header(border-bottom: 10px solid orange;)

}

 

IE10 ~ IE11 브라우저

<script>
if (/*@cc_on!@/false){
    document.documentlement.ClassName+='ie10';
}
</script>

-문서에 클래스명 ie10을 적용한다.

 

IE9 
-인터넷 익스플로러 9 전용 css파일을 만든다
- <!--[if IE9]><link rel="stylesheet" href='ie9.css' type="text/css"/><! [endif];--> 표기한다.
- css파일을 별도로 만든다
- @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;)
}

 

웹 호환성 체크 시

-웹 표준과 브라우저 성격에 맞춰서 작성

- IE8 ~ IE9 특정한 애니메이션과 특정한 Css 적용 안 됨

- 오류가 될만한 것들 예측해서 잘 지켜준다.

- style핵 또는 조건문을 써서 브라우저 따로 적용 안 해도 됨

- 브라우저별로 만들어서 한 번에 호환성 체크