본문 바로가기

코딩/html

조건부주석 및 ie에서만 스타일적용

// html5shiv는 ie8이하 html5의 요소를 지원하며, respond.js는 ie8에서 미디어쿼리를 사용할 수 있게 한다.
// 이러한 요소는 ie8에 대응하기 위한 요소로 조건부 주석을 적용하면 편하다.
 
// ie9 미만 (즉 8부터)
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->
 
// ie 9일경우
<!--[if IE 9]><html class="ie9" lang="ko"><![endif]-->
 
// ie 8일경우
<!--[if IE 8]><html class="ie8" lang="ko"><![endif]-->
 
// ie9보다 작거나 같다면
<!--[if lte IE 9]>
<script src="https://cdn.jsdelivr.net/flexibility/2.0.1/flexibility.js"></script>
<script src="css3-multi-column.js"></script>
<![endif]-->
 
 
/*
조건부 주석
! : 아니다(not) - 예) [if !ie] ie가 아니라면
lt : 작다(less than) - 예) [if lt ie 9] ie9 보다 작다면
lte : 작거나 같다(less than equal) - 예) [if lte ie 8] ie8 보다 작거나 같다면
gt : 크다(greater than) - 예) [if gt ie 6] ie6 보다 크다면
gte : 크거나 같다(greater than equal) - 예) [if gte ie 7] ie7 보다 크거나 같다
() : 우선처리
& : 그리고(and) - 예) [if (gte ie 7)&(lt ie 9)] ie7 이상이고 ie9 미만이라면
| : 또는(or) - 예) [if (ie 7)|(ie 8)] ie7 이거나 ie8 이라면
*/

참고 : CSS를 사용하여 IE10 및 IE11 브라우저를 타겟팅 하려면

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10 이상 적용 */  
}


'코딩 > html' 카테고리의 다른 글

쿠키와 세션  (0) 2020.01.14
크로스 브라우징  (0) 2019.08.21
절대경로와 상대경로  (0) 2019.04.11