CSS3은 CSS WG(Cascading Style Sheets Working Group)에서 각 기능을 모듈화해서 개발중인데, 각 기능마다 표준안에 대한 논의가 이루어지는 속도가 다르고 각 브라우저 벤더가 독자적으로 개발하는 기술들도 있기 때문에 브라우저들마다 CSS를 지원하는 사양이 다르다. 그래서 각 브라우저는 주기적인 업데이트로 기존의 문제점을 해결하고 새로운 기능을 추가해서 가능한 한 최신의 상태를 유지하지만, 사용자가 브라우저를 최신 상태로 유지하지 않거나 유지하지 못하는 경우가 있기 때문에 사이트의 운영 목적에 따라서 최신 기술에 대한 하위 호환성을 고려해야 한다.
인터넷 익스플로러는 마이크로소프트가 2015년 이후에 업데이트를 중단했고, 2022년 6월 15일에 서비스를 완전히 종료한다고 발표했는데도 여전히 사용하는 사람들이 많기 때문에 가능한 한 많은 사람들에게 올바른 콘텐츠를 제공해야 하는 사이트라면 클라이언트의 요구에 따라 인터넷 익스플로러 구 버전에 대한 호환성을 고려해야 한다. 인터넷 익스플로러 구 버전에서 CSS3을 사용하는 방법을 저장해두고자 인터넷 익스플로러 CSS3 호환성 가이드를 작성했다.
주의사항 1. CSS3 호환성과 관련된 모든 정보를 다루지 않는다. 2. 2022년 6월 15일부터는 인터넷 익스플로러 HTML5 호환성을 고려할 필요가 없다. 3. 웹상의 정보를 종합해서 작성했기 때문에 사실과 다른 정보가 있을 수도 있다.
목차
- CSS 개발 역사
- 조건부 주석을 사용한 CSS3 호환성 가이드
- CSS Hacks을 사용한 CSS 호환성 가이드
- 브라우저 접두사를 사용한 CSS3 호환성 가이드
- 폴리필을 사용한 CSS3 포환성 가이드
CSS 개발 역사
1990년대 초반에 다양한 스타일 시트 개념이 등장했고 1994년에 CSS 기본 개념이 등장했다. 1996년 12월에 W3C(World Wide Web Consortium)가 서체, 굵은 글씨, 텍스트 컬러, 배경 컬러, 텍스트 간격, 텍스트 및 이미지, 표 정렬, 라인, 패딩, 마진 등의 기능이 포함된 CSS 표준안을 공개했고 그해 출시한 인터넷 익스플로러 3에서 CSS의 일부 기능을 처음으로 지원했다. 이후 각 브라우저 벤더들이 CSS를 단계적으로 도입했고 2000년에 출시한 매킨토시용 인터넷 익스플로러 5에서 CSS1을 완벽하게 지원했다. 1997년에 W3C는 CSS1의 문제점들을 해결하기 위해 CSS WG를 만들었고 1998년 5월에 W3C가 절대 위치 및 상대 위치, z-index, 텍스트 그림자 등의 기능이 포함된 CSS2 표준안을 공개했다. 하지만 실무 환경에서 수많은 오류가 발견되어 오류를 수정하고 새로운 기능을 추가하고 미래에 사용하지 않을 기능을 삭제하고 지금 당장 논의하지 않아도 되는 기능을 삭제하는 과정을 거치면서 2011년 6월에 W3C가 CSS2.1 표준안을 공개했다. CSS2 표준안을 공개한 이후 CSS2.1 표준안을 공개하기까지 CSS가 다루는 범위가 넓다 보니 각 영역마다 개발 중이거나 개발이 완료된 내역이 혼재되었고 개발이 지연된 부분까지 개발을 완료하고 취합하다보니 굉장히 오랜 기간이 소요되었다.
1996년 6월에 W3C는 CSS3 표준안 초안을 공개했다. CSS3은 효율적인 개발을 위해 각 기능들을 모듈화했지만, 초기 CSS3은 각 모듈이 연결된 상태여서 전체 모듈 중 일부 모듈에 대한 개발이 지연되면 핵심 모듈에 대한 개발을 완료할 수 없었다. 결국 CSS WG는 CSS3 모듈 간의 연결을 모두 해제하고 2011년 6월에 공개한 CSS2.1을 기반으로 각 모듈을 처음부터 개발해서 각 모듈 별로 표준안 후보, 표준안 초안, 표준안의 과정을 거치도록 했다. 예를 들어 A 모듈은 레벨 3에 머물러 있지만 B 모듈은 레벨 4에 도달했거나 레벨 5에 접근하는 등 각 모듈 간에 영향을 미치지 않게 되었다. CSS3 표준안은 존재하지 않지만, 모듈화로 개발을 시작한 시기의 전후를 구분하기 위해 CSS3이라는 명칭이 통용되고 있다.
조건부 주석을 사용한 CSS3 호환성 가이드
○ 조건부 주석
1. 조건부 주석 특징
인터넷 익스플로러 10 미만에서 조건에 맞는 인터넷 익스플로러 버전을 인식했을 때 코드가 작동한다. 인터넷 익스플로러 10 이상에서는 조건부 주석을 인식할 수 없기 때문에 자바스크립트로 사용자 에이전트 문자열을 확인해서 인터넷 익스플로러만 가지고 있는 특정 문자열의 존재 여부를 확인하고 해당 문자열이 있다면 코드를 실행하도록 해야 한다.
– 인터넥 익스플루러 구 버전만 조건부 주석을 인식하고 다른 브라우저는 주석으로 인식한다.
– CSS Hacks을 사용할 필요가 없다.
– 조건부 주석을 인식하는 브라우저에서 HTTP 요청 횟수가 증가하고 그만큼 페이지 로딩 속도가 떨어진다.
– 렌더링 엔진이 하나의 조건부 주석을 인식하고 다운로드하는 동안 다른 다운로드가 차단된다.
– 브라우저 호환성과 관련된 CSS 코드를 수정하려면 각각의 CSS 파일을 개별적으로 수정해야 한다.
2. 조건부 주석 문법
| 주석 | 설명 |
|---|---|
| IE | Internet Explorer을 나타내고, 숫자 값이 함께 지정된 경우 IE 버전을 의미한다. |
| li | ~ 미만 |
| lie | ~ 이하 |
| gt | ~ 초과 |
| gte | ~ 이상 |
| ! | ~ 가 아니라면 |
| () | 하위식(우선 처리) |
| & | 그리고 |
| | | 또는 |
| true | 참 |
| false | 거짓 |
3. 조건부 주석 작성하기
(1) 만약에 IE 9 버전인 경우 실행한다.
<!-- [if IE 9] <link rel = “stylesheet” href=“ie_9.css”> <! [endif] -->(2) 만약에 IE 8 버전 미만인 경우 실행한다.
<!-- [if lt IE 8] <link rel = “stylesheet” href=“lt_ie_8.css”> <! [endif] -->(3) 만약에 IE 8 버전 이하인 경우 실행한다.
<!-- [if lte IE 8] <link rel = “stylesheet” href=“lte_ie_8.css”> <! [endif] -->(4) 만약에 IE 6 버전 또는 IE 7 버전인 경우 실행한다.
<!-- [if (IE 6)|(IE 7)] <link rel = “stylesheet” href=“lte_or_ie_6_7.css”> <! [endif] -->(5) 만약에 IE 9 버전이 아닌 경우 실행한다.
<!-- [if !(IE 9)] <link rel = “stylesheet” href=“not_ie_9.css”> <! [endif] -->4. 조건부 주석 사용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="color=device-color, initial-scale=1.0" />
<title>CSS3 Reference</title>
<link rel="stylesheet" href="styles.css" />
<!--[if IE 9]>
<link rel="stylesheet" href="ie_9.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="ie_8.css" />
<![endif]-->
</head>
<body>
...
<script src="example.js"></script>
</body>
</html>
○ 조건부 주석 클래스명
1. 조건부 클래스명 특징
‘조건부 주석’은 인터넷 익스플로러 버전에 따라 외부 파일을 링크하는 방식이고, ‘조건부 주석 클래스명’은 조건부 주석을 사용해서 인터넷 익스플로러 버전에 따라 특정한 클래스명을 사용하는 방식이다.
– 인터넥 익스플루러 구 버전만 조건부 주석을 인식하고 다른 브라우저는 주석으로 인식한다.
– CSS Hacks을 사용할 필요가 없다.
– 인터넷 익스플로러 버전을 고려하는 개수만큼 CSS의 셀렉터 수가 늘어난다.
– 인터넷 익스플로러 호환성 보기가 정상적으로 작동하지 않을 수 있다.
2. 조건부 주석 클래스명 작성하기
(1) 만약에 IE 9 버전인 경우 실행한다.
<!-- [if IE 9] <html class=“ie9”><! [endif] -->(2) 만약에 IE 9 버전 이하인 경우 실행한다.
<!-- [if ite IE 9] <html class=“ie9”><! [endif] -->(3) 만약에 IE 9 버전을 초과하는 경우 실행한다.
<!-- [if gt IE 9]><!--> <html> <!--<![endif] -->(4) 만약에 IE가 아닌 경우 실행한다.
<!-- [if !IE]> --> <html> <!-- <![endif] -->3. 조건부 주석 클래스명 사용하기
<!DOCTYPE html>
<!-- [if gt IE 9]><!-->
<html lang="ko">
<!--<![endif] -->
<!-- [if IE 9]
<html class=“ie9” lang="ko">
<! [endif] -->
<!-- [if it IE 8]
<html class=“ie8” lang="ko">
<! [endif] -->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="color=device-color, initial-scale=1.0" />
<title>HTML5 Reference</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
...
<script src="example.js"></script>
</body>
</html>
</html>
○ 인터넷 익스플로러에서 자바스크립트로 CSS 실행하기
모든 인터넷 익스플로러 버전에 특정 CSS를 적용하려면 자바스크립트로 사용자 에이전트 문자열을 확인해서 인터넷 익스플로러만 가지고 있는 특정 문자열의 존재 여부를 확인하고 해당 문자열이 있을 때만 스크립트를 실행하도록 해야 한다. 인터넷 익스플로러의 사용자 에이전트 문자열에는 Trident라는 인터넷 익스플로러 렌더링 엔진명이 들어서 있어서 일반적으로 Trident와 같은 고유의 문자를 탐색해서 인터넷 익스플로러 유무를 판단한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="color=device-color, initial-scale=1.0" />
<title>CSS3</title>
<link rel="stylesheet" href="styles.css" />
<script>
if (
navigator.appName === "Netscape" &&
navigator.userAgent.search("Trident") != -1
) {
document.write('<link rel="stylesheet" href="ie.css">');
}
</script>
</head>
<body>
...
<script src="example.js"></script>
</body>
</html>
CSS Hacks을 사용한 CSS 호환성 가이드
브라우저마다 렌더링 엔진이 다르고 CSS 표준안을 지원하는 수준이 다르기 때문에 모든 CSS가 모든 브라우저에서 동일하게 작동하지 않는다. CSS Hacks은 특정한 브라우저 또는 특정한 브라우저 버전이 인식할 수 있는 임의의(잘못된 형식의) 코드를 입력해서 CSS를 숨기거나 표시할 때 사용하는 비표준 기술이다. 간단한 오류 구문만 추가하면 특정 브라우저에서 지원하지 않는 CSS 기능을 사용할 수 있기 때문에 아주 유용하지만, 최신 브라우저에서 해당 코드를 더 이상 지원하지 않고, 최신 버전으로 업데이트 한 다른 브라우저에서 레이아웃이 틀어질 수 있고, 각 브라우저 별 또는 각 브라우저 버전별 호환성을 고려하는 개수가 늘어날수록 CSS 코드가 복잡해지고, 향후 CSS 핵이 필요 없는 시기에 도달했을 때 관련 코드만 삭제하는 게 까다롭고, CSS 핵을 사용하는 행위가 웹 표준을 준수하지 않는다는 것을 의미하기 때문에 가능한 한 CSS 핵을 사용하면 안 된다. CSS Hacks 문법은 구글에서 css hacks이라고 검색하고 확인하면 된다.
브라우저 접두사를 사용한 CSS3 호환성 가이드
○ 브라우저 접두사
각 브라우저 벤더가 브라우저에 최신 코드를 적용하기에 앞서 코드를 테스트를 할 때 사용하는 기술이다. 잘못된 코드를 사용해서 코드의 결함을 악용하는 CSS Hacks과는 근본적으로 다르다. MDN web Docs에서 사용하고자 하는 코드를 검색하면 브라우저 접두사 지원 여부를 확인할 수 있다.
○ 브라우저 접두사 종류
| 브라우저 | 접두사 |
|---|---|
| Chrome | -webkit- |
| Internet Explorer | -ms- |
| Firefox | -moz- |
| Opera | -o- |
| Safari | -webkit- |
| Android | -webkit- |
| iOS | -webkit- |
○ 브라우저 접두사 사용하기
브라우저는 위에서부터 아래로 코드를 읽기 때문에 브라우저 접두사가 붙은 속성을 먼저 작성하고 W3C 권장 속성을 작성해야 한다.
1. transition 속성 예시
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
2. linear-gradient 속성 예시
background-image: -webkit-linear-gradient(top, #fff 0%, #000 100%);
background-image: -moz-linear-gradient(top, #fff 0%, #000 100%);
background-image: -o-linear-gradient(top, #fff 0%, #000 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));
background-image: linear-gradient(to bottom, #fff 0%, #000 100%);폴리필을 사용한 CSS3 호환성 가이드
polyfill은 구 버전 브라우저에 최신 기능을 사용하는데 필요한 기능을 추가하는 코드이다. poly는 여러 가지 기술을 사용해서 해결한다는 의미이고, fill은 기술이 필요한 브라우저의 구멍을 채운다는 의미이다. 폴리필을 사용하면 서버에 데이터를 요청하는 횟수가 증가하고, 서버로부터 데이터를 받는 데 시간이 더 걸리고, 자바스크립트 엔진이 데이터를 읽고 실행하는 데 시간이 더 걸리고, 이 모든 과정을 진행하기 전에는 렌더링 엔진이 HTML과 CSS를 읽을 수 없어서 전반적인 사용자 경험을 저해하기 때문에 가능한 한 사용하지 않는 편이 좋다.
○ CSS3 PIE
인터넷 익스플로러 6 버전부터 8 버전까지 border-radius, box-shadow, border-image, multiple background images, linear-gradient background images를 사용할 수 있게 하고, 인터넷 익스플로러 9 버전에서 border-image, linear-gradient를 사용할 수 있게 한다.
CSS3 PIE 사이트(http://css3pie.com)의 PIE.js를 사용하면 된다. 최신 버전은 1.0.0 버전으로 2012년 5월 이후로 업데이트가 없다. 2013년 1월에 1.0.0 버전의 성능을 상당히 개선하고 새로운 기능들이 추가된 2.0 Beta 1 버전이 공개되었지만 초기 버전이기 때문에 상당히 많은 버그가 있을 수 있다고 계시했고 이후 아무런 업데이트가 없기 때문에 사용하지 않는 편이 좋다.
1. CSS3 PIE 파일 용량 비교
| 파일명 | 용량 |
|---|---|
| PIE_uncompressed.js | 165KB |
| PIE.js | 39.5KB |
2. PIE.js를 따른 index.html
조건부 주석인 <!–[if lte IE 9]> … <![endif]–>를 사용해서 인터넷 익스플로러 9 버전 이하에서 PIE.js가 실행되도록 작성해야 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML5 Reference</title>
<!--[if lte IE 9]>
<script src="PIE.js"></script>
<![endif]-->
<noscript>
<p><strong>This web page requires JavaScript to be enabled.</strong></p>
</noscript>
<link rel="stylesheet" href="styles.css">
</head>
<body>
…
<div id="box"></div>
<script src="example.js"></script>
</body>
</html>
3. PIE.js를 따른 styles.css
background의 linear-gradient를 사용할 때는 -pie-background와 behavior: url(PIE.htc) 코드를 입력해야 한다. 각 속성마다 사용하는 방법과 주의사항이 다르기 때문에 코드를 사용하기 전에 반드시 CSS3 PIE 사이트(http://css3pie.com)의 Supported CSS3 Features를 읽어봐야 한다.
#box{
background: #CCC; /*fallback for non-CSS3 browsers*/
background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
background: -webkit-linear-gradient(top, #CCC, #EEE); /*newer webkit*/
background: -moz-linear-gradient(top, #CCC, #EEE); /*old gecko*/
background: -o-linear-gradient(top, #CCC, #EEE); /*opera 11.10+*/
background: linear-gradient(to bottom, #CCC, #EEE); /*firefox 16+, chrome 26+, IE10+, opera 12.10+, futur browsers*/
-pie-background: linear-gradient(to bottom, #CCC, #EEE); /*ie 6-9 via PIE*/
behavior: url(PIE.htc);
}
4. CSS3 PIE 주의사항
각 속성별로 개별적인 주의사항이 있다. 인터넷 익스플로러 6 버전부터 8 버전, 그리고 인터넷 익스플로러 9 버전 간에 기능의 차이가 있을 수 있고 일부 기능이 다르게 동작할 수도 있고 작동 오류가 드물게 발생할 수 있고 PIE 권장 사양으로 작성한 코드로 인해 인터넷 익스플로러 외의 일부 브라우저에서 작동 오류가 발생할 수 있다.