[CSS]IE6 스타핵에서 띄어쓰기

크로스브라우징을 위해 CSS hack 를 사용할때가 종종 있습니다.

IE6 용으로는 스타핵을 사용합니다. ex)* #footer
어떤사람은 *html 이렇게 붙혀서 사용하고, 또 어떤사람은 * html 이렇게 띄어서 사용합니다.
과연 차이점이 뭘까요?

http://jigsaw.w3.org/css-validator/

위에서 CSS 체크를 해보면 *html 는 error 로 잡고, * html 은 error 로 잡지 않습니다.
하지만, IE6에서 결과값은 같습니다.

'CSS 마스터 전략' 에서는 * html 이렇게 띄어쓰는걸로 나와있습니다.

그렇다면 에러로 안잡는 * html 요게 맞다는 얘기인데..
마찬가지로 IE6 전용 '언더바핵'도 error 로 잡습니다. ex)_margin:10px;
언더바핵보다는 스타핵이 소스가 조금더 길어진다는 부분을 빼고는 스타핵을 사용하는게 더 좋을듯 싶네요.
제일 좋은건 핵을 사용안하는것과 IE6이 세상에 없어지는게 베스트긴 하겠지만요.^^

핵을 사용할때도 정확히 알고 사용해야겠다는 생각이 드는군요..
여러분들은 어떻게 사용하셨나요?

[CSS]png 투명이미지 css에서 배경 적용하기

IE6 이하버전에서 투명 png 이미지를 지원하지 않기 때문에 사용하는 팁이며, 이미 투명 png 에 관련된 팁들은 많이 나와있습니다. 그중에 하나라고 보셔도 됩니다.

 

스크립트로 적용하는 방법 : http://www.webmini.net/341 

 

css에서 배경만으로 할시 아래와 같이 적용하시면 되겠습니다.

스타핵을 이용한 방법입니다.

 

*html #img_png {margin-top:8px;background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png',sizingMethod='crop') }

 

hack 자세히 보기 : http://www.webmini.net/322

 

나라디자인에서도 비슷한 팁이 올라와있습니다. 위에 팁도 같은 맥락으로 보시는게 맞을듯 합니다.

나라디자인에서는 _(언더바핵)을 사용한 경우입니다.

 

언더바 핵을 이용한 방법

 

.selector{background:url(png24.png); _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’png24.png‘, sizingMethod=’crop’);}

 

언더바핵을 사용할경우 Win IE 4~6에서만 동작하고 그외 브라우저에서는 핵부분이 제외되서 읽혀 들이게 됩니다.

 

하지만 스타핵은 Win IE 4~6, Mac IE 4~5 에서 동작을 하기 때문에 그외 브라우저용으로 하나더 만들어야 하는 불편함이 있습니다. 아래를 참고하세요.

 

#img_png {margin-top:8px; background:url(test.png) no-repeat;} // Win IE 4~6 외 타브라우저용

 

*html #img_png {margin-top:8px;background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png',sizingMethod='crop') } // Win IE 4~6 용

 

사용하시는건 본인 스스로가 판단하시되, 두핵모두 background-repeat 적용이 안되는점은 유의하시기 바랍니다.

[잡담]!important와 언더바 핵

한 규칙 안에서 윈도우용 IE 6 이하 버전을 위한 선언과 이외의 다른 브라우저를 위한 선언을 각각 사용하고 싶을 경우가 있습니다. 이를 위해서 속성에 이스케이프 문자를 사용하는 핵을 이용하거나 아니면 !important 또는 언더바 핵을 이용할 수 있습니다.

윈도우용 IE 6 이하 버전에서는 한 규칙안에서 여러 개의 속성을 사용할 수 없기 때문에
 !important 핵을 사용하면 제대로 동작합니다.

#nav {
  position: fixed !important;
  position: static;
}

윈도우용 IE 4~6 버전은 첫 번째 선언을 무시하고 두 번째 선언을 적용합니다. 나머지 브라우저는 
!important 키워드가 사용된 첫 번째 규칙을 적용합니다. !important 키워드를 쓰면 캐스케이드 우선 순위가 높아지기 때문입니다.

 !important 핵과 유사한 방법으로는 언더바 핵이 있습니다. 속성명 앞에 언더바를 붙이면 표준 호환 브라우저에서는 이 선언을 무시하고 해당 속성을 인식하지 않습니다. 하지만 윈도우용 IE 6 이하 버전의 브라우저는 언더바 문자를 무시하고 해당 속성을 인식합니다. 다음 예제 코드의 경우, 최신 브라우저는 포지션을 fixed로 지정하고 두 번째 선언을 건너뛰는 반면, 윈도우용 IE 4-6는 언더바 문자를 무시하고 첫 번째 규칙을 재지정하게 되어 포지션을 static으로 지정하게 됩니다.

#nav {
  position: fixed;
  position: static;
}

css 마스터 전략 책내용 중에서...

css hack 소스를 보실려면 http://www.webmini.net/24918 글을 참조해주세요.