2010-04-30 4 views
1

질문의 하단으로 건너 뛰기 만하면됩니다. CSS 컴파일러 및 IE 해킹을 조건부 CSS로 변환

그래서 나는 잠시 동안 (말대꾸 & 이하 등) CSS 컴파일러로보고되었고, 그들이 내게 아무것도 쉽게 이해하는 데 도움이되지 때문에, 그들에 정말 관심이있다 (나는 몇 년 CSS를 해왔습니다 지금) 그러나 오히려 그들은 cruft에 줄이고 나를 사물을 더 쉽게 볼 것을 돕는다.

저는 최근 인라인 블록 (및 clearfix)을 안정적으로 구현하는 방법을 찾고 있습니다.이 코드는 수많은 외부 코드 &을 필요로합니다. 이제 현장의 모든 당국에 따르면, 나는 IE CSS를 CSS와 동일한 페이지에 넣지 말아야한다. 조건부로해야한다. 하지만 제게이 모든 추가 코드를 관리하고 관리하는 것은 정말 큰 번거 로움입니다. 그렇기 때문에 나는 Less를 좋아합니다. 비대칭 클래스를 적용하는 대신 믹스 인을 지정하고 한 번 적용하면 모든 설정이 완료됩니다.

그래서 나는 약간의 트랙을 얻었지만 (내 포인트를 설명하고 싶었다) 근본적으로, 나는이 CSS 컴파일러가 나를 매우 유용하게 여기는 지점에 있으며, 쪼개져 버리고 안정적으로 한 번 적용한 다음 컴파일하면됩니다. 나는 자신의 조건부 파일 (ala Less/Sass)에 IE 특정 스타일을 컴파일 할 수있는 방법을 원합니다. 이유없이 2 개의 파일을 관리 할 필요가 없습니다.

실행중인 스크립트/applcation과 같은 파일이 있습니까? 밑줄/별표를 따로 만들 수 있습니까?

답변

9

실제로 컴파일러 트릭이 아니지만 별도의 브라우저 별 스타일 시트를 컴파일하지 않고도 조건부 주석을 사용하려는 경우 HTML 조건부 주석을 사용하여 간단하게 스타일 후크를 삽입 할 수 있습니다.

이제
... 
</head> 
<!--[if lte IE 6]><body class="ie6 ie7"><![endif]--> 
<!--[if lte IE 7]><body class="ie7"><![endif]--> 
<!--[if gte IE 8]><!--><body><!--<![endif]--> 

당신이 규칙의 나머지 부분과 같은 스타일 시트에 IE < = 6, IE < = 7에 적용 할 규칙을 타겟팅 할 수 있습니다 : 예를 들어

body.ie6 #thing { position: relative; } 
body.ie7 #otherthing { z-index: 0; } 

이 IMO입니다 마지막으로 허용되는 CSS 해킹 인 * html 해킹보다 약간 깔끔합니다. (유효하지 않은 CSS있다 "해킹을 강조", "스타 해킹"과 : 피할 수 있습니다.)

+0

와우,이 기술을 사용하여 별도의 스타일 시트를 지정하는 것보다 훨씬 낫습니다. +1 –

1

당신은 조건부 IE6/7/whathaveyou에 생성 된 CSS 시트 만 포함 할 수 있습니다, 또한

<head> 
    <link rel="stylesheet" href="/css/master.css" type="text/css"/> 
    <!--[if IE 6]> 
     <link rel="stylesheet" href="/css/ie6.css" type="text/css"/> 
    <![endif]--> 
</head> 

당신이 ' 당신의 SASS/CSS의 대부분과 IE의 수정/해킹에 혼합 걱정 재, 당신은 자신의 파셜로 분리 할 수 ​​있습니다 :

@import ie6.sass 

는 위의 IE의 특정 버전에 대한 모든 규칙을 포함 할 것 현재의 SASS 문서 부분 지문에 대한 문서는 여기에서 찾을 수 있습니다 : SASS Partials

+0

조건부 포함에 대해 알고 있습니다. 그런 것을 생성하는 방법을 묻습니다. 그리고 그것들을 섞을 까봐 걱정되는 주된 이유는 IE9/IE10이 나올 때 사용되는 해킹 사례와 그 문제를 해결하지 못하는 해킹 사례입니다. – xckpd7

+0

IE 조건부를 통해 적절하게 CSS/SASS 파일을 버전 화하십시오. IE9/10은 조건부 주석에 대한 지원을 중단 할 가능성이 없습니다. 그에 따라 내 대답을 업데이트 할 것입니다. –

0

이 IMO 변두리 청소기에 비해입니다 * HTML 해킹, 마지막 허용 CSS의 해킹이다. (유효하지 않은 CSS있다 "해킹을 강조" "별이 해킹"과 : 피할 수 있습니다.)

하지 정말 다음 "해킹을 강조"하면서 무효 인의는 "* HTML"와 "* + html로"해킹은 완벽하다 유효한 CSS. Check it out yourself.; 위의 질문에 관해서 ~

)

는, 지금 나는 아직 시작 해킹 사용자 (IE6-7 선호) 한 모든 것을 유지, 그 일을 할 수있는 컴파일러 잘 모르는 것 같아요 파일. 유지 보수가 용이합니다.