CSS 호환성

HTML CSS 강의를 들으면서

같은 CSS 코드라도 다른 브라우저 환경에서 유효하지 않은 경우가 있다.

 

이런 경우를 방지하기 위해 CSS 호환성을 확인하고,

개별적으로 처리해주어 동일한 디자인이 적용될 수 있도록 해야 한다.

 

---

1. 조건부 주석을 통한 CSS호환성 부여

인터넷 익스플로러 10 버전 미만에서는 조건부 주석을 인식할 수 없다는 점을 활용하여

특정 문자열의 존재 여부를 확인하고 해당 문자열에 대한 코드를 실행하도록 한다.

 

Ex)

- IE 8 버전일 경우 동작

<!-- [if IE 8] <span></span <! [endif] -->

- IE 8 버전 미만일 경우

<!-- [ if lte IE 8 ] <span></span> <! [endif] -->

조건부 주석 문법에 맞추어 작성하여 조건을 만족하면 주석 내에 있는

HTML 코드를 실행시킨다.

 

---

2. CSS Hacks를 사용한 호환성 부여

CSS Hacks는 특정한 브라우저 또는 특정한 브라우저 버전이 인식할 수 있는 임의의 코드를 입력해서

CSS를 숨기거나 표시할 때 사용하는 비표준 기술이다.

CSS 파일에 브라우저 버전 별로 호환성을 부여하기 때문에

다양한 브라우저에게 호환성을 부여할수록 코드의 양이 늘어나고 복잡해진다.

이후 Hack을 제거할 때도  관련 코드만 제거하는 부분이 까다롭다.

Hacks를 사용하는 것 자체가 웹 표준을 위반하는 것이라 가능한 CSS핵을 사용하면 안 된다고 한다.

 

CSS Hacks문법은 다음 블로그에 정리되어있다.

CSS 핵(hack) 정리

 

---

3. 브라우저 접두사 활용

호환성 부여 방법 중 유일하게 사용해본 경험이 있는 사용법이다.

 

CSS3의 웹 표준이 정해지지 않아서 브라우저마다 다르게 해석하는 경우가 발생한다.

다양한 브라우저에서 같은 결과를 보여주도록 하기 위해 브라우저 접두사를 활용한다.

 

브라우저별 접두사

safari, chorme	-webkit-
mozilla, firefox	-moz-
opera	-o-
micorsoft	-ms-

 

Ex) border-radius 5px 적용

.example {
	-webkit-border-redius : 5px;
	-moz-border-radius : 5px;
	-o-border-radius : 5px;
	-ms-border-radius : 5px;
}

 

 

---

참고

CSS 속성에 따라 적용되는 브라우저를 정리해놓은 사이트 : https://webzz.tistory.com/359

웹 퍼블리셔를 위한 웹 레퍼런스 사이트