ie- 특정 스타일 시트 컴파일 및 유지

Question

별도의 CSS 파일에서 IE 해결 방법을 유지 관리하는 일반적인 방법은 무엇입니까? 다른 방법 (예 : base64로 인코딩 된 임베디드 리소스와 함께 대체 이미지 URL 포함, boxsizing.htc 해결 방법 등)을 통해 해결할 수없는 더 깊은 문제에 대해 이야기하고 있습니다. NB : 고려할 때 보수적입니다. 바닐라 스프라이트 대 dataURI, 그래서

몇가 때때로 나는 인코딩 된 영상 문자열이 평균 100 ~ 300 문자에있는와

.some-class-lets-say-datepicker { 
    background-image: url(data:image/png;base64,/*encoded image*/); 
    *background-image: url(../gfx/lets-say-datepicker-icon.png); 
} 

유사한 코드에 의존해야합니다. 위 코드를 감안할 때 일부 리던던트 트래픽이 발생합니다. 호환 브라우저는 리던던트 URL을 다운로드하고, IE7은 별도의 이미지 요청 상단에 base64 문자열을 다운로드합니다. 나는이 오버 헤드가 크지 않을 찾을 모두 (그리고, 결국, IE7 사용자는()를 많이 청소기 될 것이다 다음 동시에

: 신경이 쓰이는 훨씬 더 큰 문제가 :

<!--[if !IE]> --> 
    <link href="main.css" rel="stylesheet" /> 
<!-- <![endif]--> 
<!--[if lt IE 8]> 
    <link href="main_ie.css" rel="stylesheet"/> 
<![endif]--> 

하지만 별개의 유지 관리가별로 매력적이지는 않습니다. Closure-stylesheets는 conditionals을 제공합니다. SASS/LESS와 비슷한 것이 있습니까? 아니면 다른 접근 방식을 사용하는 것이 좋습니다.

Answer 1

Sass (버전 3.2 이상)는 2 개의 다른 스타일 시트를 생성해도 괜찮 으면 쉽게 할 수 있습니다. 당신의 SCSS 파일에서

$ie-only: false !default; 

@mixin hide-from-ie { 
    if $ie-only != true { 
     @content; 
    } 
} 

@mixin show-only-ie { 
    if $ie-only == true { 
     @content; 
    } 
} 

: 여기

은 유지 mixin의

.some-class-lets-say-datepicker { 
    @include hide-from-ie { 
     background-image: url(data:image/png;base64,/*encoded image*/); 
    } 

    @include show-only-ie { 
     background-image: url(../gfx/lets-say-datepicker-icon.png); 
    } 
} 

상단이 다른 SCSS 파일을 가져 오지만가 별도의 IE 전용 파일 확인 :

를

$ie-only: true; 

이전 IE 버전을 제공하기 위해 조건부 주석을 사용하여 $ ie-only로 설정된 생성 된 CSS 파일을 true로 설정하고 모든 ot 그녀의 브라우저는 $ ie-only로 생성 된 브라우저를 기본 false로 설정합니다.

이 기술에 대한 영감은 여기에서 확인할 수 있습니다. http://jakearchibald.github.com/sass-ie/

Answer 2

브라우저를 기반으로 HTML에 클래스를 추가하고 다른 것들을 사용할 수 있습니다 - 정말 유용합니다! 이것은 내가 사용하는 것입니다 http://rafael.adm.br/css_browser_selector