<HTML5 & CSS3> 크로스브라우징
1. 크로스 브라우징 : 멀티브라우저 지원 ( 익스플로러, 크롬, 파이어폭스, 사파리, 오페라, 웨일 .. )
1) 크로스 브라우징의 목적 : 여러 브라우저에서 같은 화면과 같은 서비스를 제곰함에 있어서 사용자에게 차이를 보이지 않게 하기
2) internet explorer의 버전 :
- window xp : internet explorer 8
- window 7 : internet explorer 11
- window 8 : -
- window 10 : internet explorer edge
3) w3school 홈페이지에 들어가면 HTML5, CSS3의 코드 등 나온지 얼마 안된 코드들의 지원현황을 볼 수 있다.
(w3school : https://www.w3schools.com/)
ex) CSS3에서 새로 등장한 border-radius
검색 -> w3School에 접속
border-radius 에 대한 설명을 볼 수 있다.
Browser Support에서 브라우저별 사용할 수 있는 버전 나와있음
< 크로스 브라우징 방법>
1. 벤더프리픽스
- 위의 예시의 Browser Support을 보면 -webkit- , -moz- 와 같은 것들을 볼 수 있다. 이것을 사용하는 것이 벤더 프리픽스
- 코드를 작성할 때 기입해주면 사용할수 있는 버전보다 하위버전에서도 사용할 수 있게 함
-브라우저별 벤터프리픽스
1) 크롬 : -webkit-
2) 사파리 : -webkit-
3) 파이어폭스 : moz- (mozila 라는 단체가 파이어폭스를 만들었기 때문에)
4) 오페라 : -o-, -webkit-
5) 익스플로러 : -ms-
- 사용방법 : 사용하는 속성이나 태그 앞에 달아준다.
ex)
border-radius : 10px의 경우
-webkit-border-radius : 10px;
-moz-border-radius : 10px;
-o-border-radius : 10px;
보통 모든 브라우저의 벤터프리픽스를 다 작성한다
2. 초기화 (CSS의 RESET)
: HTML5의 태그를 인식하지 못하는 브라우저가 있다. 해당 태그의 기본 CSS를 초기화로 기입해 주는것.
- 웹상에 크로스 브라우징을 위한 리셋파일들이 많다.
ex) normalize : 검색해서 다운 - reser.css 파일 만들기 -> 헤더에 연결하기
- 초기방법. 코딩하면서 계속 확인해 줘야함.
3. 버전에 따라 CSS파일을 만들기
( 인터넷 익스플로러)
ex) internet explorer7일때 ie7.css 실행하기.
ie7.css CSS 파일을 만들고 header에
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" />
<![endif]-->
{
4. CSS에 약간의 편법 쓰기
.ex {
color : red;
*color : green; (<- IE7에서 인식하는 코드. 인식 못하면 그냥 지나감)
_color : blue; (-<-IE6에서 인식하는 코드)
( IE6 에서 _ 가 언제 지원이 안될지 모르기 때문에 약간은 불안정하다 )
5. meta를 이용한 익스플로러 버전 정하기.
만든 사이트가 상위버전으로 업그레이드를 하고 나니 정상동작이 안될 경우에 html 파일의 head 부분에
<meta http-equryv="X-UA-Compatible" content=" iE=edge"/>
: 가장 최종버전으로 맞추겠다는 뜻