Better conditional classnames for hack-free CSS
조건부 주석문은 html 요소에 조건부 클래스 이름을 적용하면 CSS 수정과 IE의 특정 버전을 대상으로하는 데 도움이 되는 일반적인 방법입니다.
이것은 첫 번째 폴 아일랜드 의해 설명되고 HTML5 보일러 플레이트에 의해 좀더 보완되어졌습니다.
이러한 모든 장점에도 불구하고 여전히 성가신 문제가 몇 가지 있습니다.
여기에서는 잠재적인 문제를 회피할 만한 몇 가지 핵에 대해 알아보도록 하겠습니다.
조건부 주석문
처음에 조건부 주석문은 CSS의 수정과 IE의 레거시 버전을 위해 시작태그인 html 태그에 사용(Conditional stylesheets vs CSS hacks)하는 것을 제안했습니다.
이후 HTML5 보일러 플레이트 프로젝트에서 더욱더 테크닉이 향상되었습니다.
하지만 여전히 고전적인 조건부 주석문에는 성가신 몇 가지 문제가 남아 있습니다.
- 서버의 설정에서 X-UA-Compatible header 를 설정하지 않은 경우 호환성보기 아이콘은 IE8과 IE9에 표시될 것입니다.
- 여러분이 HTML 태그의 각 버전에 대해 몇 가지 속성을 포함해야하는 경우라면 문자 인코딩 선언은 HTML문서의 1024바이트에 포함되지 않을 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<!--[if lt IE 7]><html class="no-js ie6"><![endif]-->
<!--[if IE 7]><html class="no-js ie7"><![endif]-->
<!--[if IE 8]><html class="no-js ie8"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<title>Document</title>
</head>
<body>
</body>
</html>위의 방법은 반드시 권장되지는 않지만 작은 속임수로 위에 언급된 이슈를 피할 수는 있습니다.
HTML 문서에 <meta http-equiv="X-UA-Compatible">를 정의함으로써 IE8과 IE9에는 호환성 보기 아이콘이 표시되지 않을 것입니다.
만약 사용자가 위의 메타태그를 서버측 헤더에 설정한다면 아래 코드와 같이 HTML 문서에 더이상 정의할 필요는 없을 것입니다.
하지만 1024바이트 내에서 문자 인코딩 선언을 포함되지 않을 위험이 있을 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<!--[if lt IE 7]><html class="no-js ie6"><![endif]-->
<!--[if IE 7]><html class="no-js ie7"><![endif]-->
<!--[if IE 8]><html class="no-js ie8"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
</body>
</html>The “preemptive” conditional comments method
위에서 소개한 방법이외에 호환성 보기 아이콘을 방지하는 또 다른 방법이 있습니다.
그것은 DOCTYPE 전에 조건부 주석을 포함하도록 정의하는 것입니다.
<!--[if IE]><![endif]-->
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js ie6"><![endif]-->
<!--[if IE 7]><html class="no-js ie7"><![endif]-->
<!--[if IE 8]><html class="no-js ie8"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
</body>
</html>'StyleSheet > CSS' 카테고리의 다른 글
| global.css (초기화) (0) | 2016.06.09 |
|---|---|
| Arrow link :hover Animation (0) | 2016.06.08 |
| Boilerplate base CSS(보일러플레이트 초기화) (0) | 2016.05.30 |
| 알아두면 좋은 CSS 팁 모음 (0) | 2016.05.25 |
| 순수 CSS 말풍선 만들기 (0) | 2016.05.24 |
