CSS3 호환성 가이드

CSS3은 CSS WG(Cascading Style Sheets Working Group)에서 각 기능들을 모듈화해서 개발중인데, 각 기능들마다 표준안에 대한 논의가 이루어지는 속도가 다르고 각 브라우저 벤더가 독자적으로 개발하는 기술들도 있기 때문에 브라우저들마다 CSS를 지원하는 사양이 다르다. 그래서 각 브라우저는 주기적인 업데이트로 기존의 문제점을 해결하고 새로운 기능을 추가해서 가능한 한 최신의 상태를 유지하지만, 인터넷 익스플로러 8 버전이나 9 버전처럼 업데이트 지원이 종료된 브라우저를 계속 사용하는 사람들도 있는 만큼 클라이언트의 요구나 사이트의 용도에 따라 구형 브라우저에 대한 호환성을 고려해야 할 수도 있기 때문에 CSS3 호환성 가이드를 작성했다.

주의사항
1. 2020년 6월 8일 기준 정보이다. (최종 업데이트: 2020년 6월 30일)
2. CSS3 호환성과 관련된 모든 정보를 다루지 않는다.
3. 웹상의 정보를 종합해서 작성했기 때문에 사실과 다른 정보가 있을 수도 있다.

목차

  1. CSS 개발 역사
  2. 브라우저 사용 비율
  3. 조건부 주석을 사용한 CSS3 호환성 가이드
  4. CSS Hacks을 사용한 CSS 호환성 가이드
  5. 브라우저 접두사를 사용한 CSS3 호환성 가이드
  6. 폴리필을 사용한 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 표준안을 공개했다. CSS가 다루는 범위가 넓다 보니 각 영역마다 개발 중이거나 개발이 완료된 내역이 혼재되었고, 개발이 지연된 부분까지 개발을 완료하고 CSS 2.1 표준안을 공개하다 보니 굉장히 오랜 기간이 소요되었다.
1996년 6월에 W3C는 CSS3 표준안 초안을 공개했다. 효율적인 개발을 위해 각 기능들을 모듈화했지만, 초기 CSS3은 각 모듈이 연결된 상태여서 일부 모듈에 대한 개발을 완료하지 않는 한 핵심 모듈에 대한 개발을 완료할 수 없었다. 결국 CSS WG는 CSS3 모듈 간의 연결을 모두 해제하고 CSS2.1을 기반으로 각 모듈을 처음부터 개발해서 각 모듈을 독립적으로 개발할 수 있는 환경을 구축했다. 지금에 이르러서는 각 모듈 별로 표준안 후보, 표준안 초안, 표준안의 과정을 거치며, A 모듈은 레벨 3에 머물러 있지만 B 모듈은 레벨 4에 도달했거나 레벨 5에 접근하는 등 각 모듈 간에 영향을 미치지 않게 되었다. CSS3 표준안은 존재하지 않지만, 모듈화로 개발을 시작한 시기의 전후를 구분하기 위해 CSS3이라는 명칭이 통용되고 있다.

브라우저 사용 비율

○ Mobile 브라우저 사용 비율

1. 한국 모 쇼핑몰에 접속한 순 방문자의 Mobile 브라우저 사용 비율 (앱 제외)

브라우저비율
사파리 13 이상40.231%
크롬 70 이상38.002%
크롬 80 이상9.844%
사파리 7 이상6.099%
사파리 12 이상2.815%
크롬 60 이상1.316%
사파리 11 이상0.651%
크롬 50 이상0.361%
사파리 9 이상0.241%
크롬 30 이상0.128%
크롬 40 이상0.112%
사파리 10 이상0.076%
파이어폭스0.038%
안드로이드 브라우저 4 이상
크롬 28
사파리 8 이상
사파리 14 이상
오페라
0.069%

2019년 12월부터 2020년 5월까지 약 6개월 간 한국의 모 업계 1위 쇼핑몰의 “Mobile로 접속한 순 방문자 수십만명”의 Mobile 브라우저 사용 비율을 보면 아직까지 많은 사람들이 구 버전 브라우저를 사용하고 있다.

2. 한국 모 쇼핑몰에 접속한 순 방문자의 Mobile 브라우저 사용 비율 (앱 포함)

브라우저비율
쇼핑몰 앱39.594%
네이버 앱24.078%
사파리 13 이상13.336%
크롬 70 이상12.597%
크롬 80 이상3.263%
사파리 7 이상2.022%
카카오톡 앱1.941%
다음 앱1.294%
사파리 12 이상0.933%
크롬 60 이상0.440%
사파리 11 이상0.120%
기타 앱0.076%
크롬 50 이상0.073%
사파리 9 이상0.055%
크롬 30 이상0.042%
크롬 40 이상0.037%
네이트 앱0.036%
사파리 10 이상0.025%
파이어폭스0.013%
안드로이드 브라우저 4 이상
크롬 28
오페라
사파리 8 이상
사파리 14 이상
0.025%

2019년 12월부터 2020년 5월까지 약 6개월 간 한국의 모 업계 1위 쇼핑몰의 “Mobile로 접속한 순 방문자 수백만명”의 Mobile 브라우저 사용 비율을 보면 아직까지 많은 사람들이 구 버전 브라우저를 사용하고 있다. 앱 접속자 정보를 포함해서 브라우저 비율이 상당히 줄어들었지만, 사파리 9까지는 수 천명의 사람들이 이용하고 있기 때문에 구 버전 브라우저를 완전히 무시하기는 어렵다.

○ PC 브라우저 사용 비율

1. 한국 모 쇼핑몰에 접속한 순 방문자의 PC 브라우저 사용 비율

브라우저비율
인터넷 익스플로러 11 이상48.471%
인터넷 익스플로러 9 이상0.766%
인터넷 익스플로러 8 이하1.520%
크롬40.867%
엣지5.539%
사파리2.089%
파이어폭스0.362%
오페라0.078%
기타 브라우저0.313%

2019년 11월부터 2020년 4월까지 약 6개월 간 한국의 모 업계 1위 쇼핑몰의 “PC로 접속한 순 방문자 수십 만명”의 브라우저 사용 비율을 보니 아직도 많은 사람들이 인터넷 익스플로러 11 미만의 버전을 사용하고 있었다. 퍼센트 비율만 보면 낮지만, 순 방문자 수로 보면 결코 무시하기 어렵다.

2. 한국의 PC 브라우저 사용 비율

브라우저비율
인터넷 익스플로러 11 이상17.28%
인터넷 익스플로러 9 이상0.26%
인터넷 익스플로러 8 이하0.13%
크롬68.52%
엣지4.68%
웨일3.23%
사파리2.99%
파이어폭스1.59%
오페라0.55%
기타 브라우저0.81%

2019년 4월부터 2020년 4월까지 Statcounter가 수집한 “PC로 접속한 페이지 뷰”의 브라우저 사용 비율을 보면 아직까지 많은 사람들이 인터넷 익스플로러 구 버전을 사용하고 있다.

○ 브라우저 사용 비율과 CSS3 호환성

(1) 최신 브라우저에 대한 호환성 고려 대상
– PC: 인터넷 익스플로러 11 버전 이상
– Mobile: 사파리 7 버전 이상

(2) 대부분의 브라우저에 대한 호환성 고려 대상
– PC: 인터넷 익스플로러 10 버전 이상
– Mobile: 사파리 7 버전 이상

조건부 주석을 사용한 CSS3 호환성 가이드

○ 조건부 주석

1. 조건부 주석 특징

인터넷 익스플로러 10 버전 미만에서 조건에 맞는 인터넷 익스플로러 버전을 인식했을 때 코드가 작동한다. 인터넷 익스플로러 10 버전 이상에서는 조건부 주석을 인식할 수 없기 때문에 자바스크립트로 사용자 에이전트 문자열을 확인해서 인터넷 익스플로러만 가지고 있는 특정 문자열의 존재 여부를 확인하고 해당 문자열이 있다면 코드를 실행하도록 해야 한다.
– 인터넥 익스플루러 구 버전만 조건부 주석을 인식하고 다른 브라우저는 주석으로 인식한다.
– CSS Hacks을 사용할 필요가 없다.
– 조건부 주석을 인식하는 브라우저에서 HTTP 요청 횟수가 증가하고 그만큼 페이지 로딩 속도가 떨어진다.
– 렌더링 엔진이 하나의 조건부 주석을 인식하고 다운로드하는 동안 다른 다운로드가 차단된다.
– 브라우저 호환성과 관련된 CSS 코드를 수정하려면 각각의 CSS 파일을 개별적으로 수정해야 한다.

2. 조건부 주석 문법

주석설명
IEInternet 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 호환성 가이드

구 버전 브라우저에 최신 기능을 사용하는데 필요한 기능을 추가하는 코드이다. 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를 사용하면 된다. 2020년 6월 8일 기준 최신 버전은 1.0.0 버전으로 2012년 5월 이후로 업데이트가 없다. 2013년 1월에 1.0.0 버전의 성능을 상당히 개선하고 새로운 기능들이 추가된 2.0 Beta 1 버전이 공개되었지만 초기 버전이기 때문에 상당히 많은 버그가 있을 수 있다고 계시했고, 이후 아무런 업데이트가 없기 때문에 사용을 지양해야 한다.

1. CSS3 PIE 파일 용량 비교

파일명용량
PIE_uncompressed.js165KB
PIE.js39.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 권장 사양으로 작성한 코드로 인해 인터넷 익스플로러 외의 일부 브라우저에서 작동 오류가 발생할 수 있다.

출처

관련 글

댓글쓰기