CSS핵(hack) 정리
브라우저의 버그를 hack으로 해결할 수 있는 부분이 많이 있습니다만 그보다 사이트의 CSS구조를 설계할때 각 브라우저의 속성을 파악해고 조금만 더 주의해서 설계를 하시면 hack을 사용하지 않고도 해결할 수 있는 부분이 많이 있습니다. hack을 사용할때는 조금 더 신중하게 사용하시는게 좋습니다. 특히 예전 버전의 브라우저에 적용되었던 hack이 새로운 브라우저에 영향을 끼칠 가능성이 있으며 CSS를 변경 할 때 업무효율을 저하시키는 한 요인이 될 것 입니다.
Intenet Explorer계열의 브라우저에서 제대로 표시가 되지 않는 경우에는 일단 width값이나 float관련 설정을 변경해 보시는 것도 하나의 방법인 것 같습니다. 혹시 Intenet Explorer에서 float와 margin을 같은 방향으로 설정했을때 문제가 생긴 경우라면 이 포스트를 참조하시기 바랍니다.
Netscape 4 제외시키기
Netscape 4은 media속성값에 “screen”이외의 값이 올 경우 읽어 들이지 못하는 것을 이용한 방법이다.
<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />
이나
<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen, tv" />
라고 지정할 경우 Netscape 4은 읽어 들이지 못한다.
부분적으로 읽어들이지 못하게 하는 경우에는 Caio’s hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다.
p {
/*/*/ color:white; /* */
}
Mac IE 4.5, Netscape 4 제외시키기
@import룰로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다.
Mac IE 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. Netscape 4은 @import를 지원하지 않는다.
@import url("/css/style.css")
Mac IE 5 제외시키기
CSS소스 안의 코멘트 서식을 /* \*/ 이라는 방식으로 기술한다. holly hack이라고 하며 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Mac IE 5에서도 문제없이 적용된다.
p {
/* \\*/ color:white; /* */
}
Win IE 4~5 제외시키기
셀렉터 바로 뒤에 /**/라고 적는다.
p/**/ { color:white;}
Win IE 4~5, Mac IE 4.5~5 제외시키기
프로퍼티와 값을 구분하는 콜론(;) 앞에 코멘트에 스페이스를 포함하여 /* */라고 적는다.
p { color/* */:white;}
Win IE 4~6, Mac IE 4, Netscape 4 제외시키기
셀렉터 앞에 html>body를 붙인다.
html>body p { color:white;}
Win IE 6 제외시키기
프로퍼티와 값을 구분하는 콜론(;)의 앞에, 스페이스와 코멘트를 /**/라고 적는다.
p { color /**/:white;}
star hack
셀렉트 앞에 *html를 붙이면, Win IE 4~6, Mac IE 4~5 등에는 스타일이 적용되고, 그 외의 브라우저에서는 적용되지 않는다.
*html p { color:white; }
underscore hack
프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면, Win IE 4~6에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
p { _color:white; }
hash hack
프로퍼티의 앞에 샾(#)을 붙이면, Win IE 4~6, Mac IE 5, Opera 7, Mozilla, Firefox에서는 스타일이 적용되고, 다른 브라우저에는 적용되지 않는다.
p { #color:white; }
star 7 hack
셀렉트의 앞에 html*을 붙이면, Win IE 5.5~6, Mac IE 5, Safari 등에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다. html*과 셀렉터사이에 스페이스를 넣지 않는다.
html*p { color:white; }
xmlns hack
속성셀렉터를 이용하여, html요소에 붙이는 xmlns속성을 스타일적용을 위하여 사용하는 방법.
Mozilla, Fire-fox, Opera 7/8, Safari, IE 7 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
html[xmlns] h1 { color:red; }
:root hack
셀렉터의 앞에 :root를 붙이면, Mozilla, Firefox, Mac IE 5, Safari 등 :root유사클래스를 지원하는 브라우저에만 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
:root h1 { color:red; }
Tantek box model hack
voice-family프로퍼티를 이용한 가장 유명한 박스모델핵.
div#content {
width:500px;
voice-family: "\"}\"";
voice-family:inherit;
width:400px;
}
Win IE 5용 패스필터
@media tty {
i{content:"\";/*" "*/}}; @import '/css/style.css'; {;}/*";}
}/* */
Win IE 5.5용 패스필터
@media tty {
i{content:"\";/*" "*/}}@m; @import '/css/style.css';/*";}
}/* */
Win IE 5-5.5용 패스필터
@media tty {
i{content:"\";/*" "*/}}@import '/css/style.css';/*";}
}/* */
모던브라우저용 패스필터
@import "null?\"\{";
@import "/css/style.css";
@import "null?\"\}";
이 이외에도 많은 핵(hack)이 존재한다. CSS Filters (dithered.com)에 다양한 CSS hack이 잘 정리되어 있으므로 참고하시길…
2006년 7월 18일, IE7용의 핵(hack)을 추가.
IE7에만 적용
IE7에만 다른 스타일을 적용하는 방법은 해당 셀렉터의 앞에
*+html body
이나(*+html body는 Opera8~에도 적용되어 버리는 문제가 있기에 *+html>/**/body로 Opera8~ 전용 스타일을 기술하여야 한다. 참조:IE7のCSSバグとOpera CSS Hack)
*:first-child+html
을 기술한 다음 해당 셀렉터와 스타일을 작성하면 된다. 예를 들어 #banner라는 id셀렉터에 적용시키는 경우
*:first-child+html #banner {
:
[IE7용 스타일을 기술]
:
}
라고 기술한다. IE7이외의 브라우저를 위한 원래의 #banner 스타일 설정은 IE7용 스타일 설정 앞에 기술한다(순서가 바뀌면 원하는 효과를 얻지 못한다. 참조:IE7 の CSS ハック)
#banner {
:
[IE7이외의 브라우저를 위한 스타일을 기술]
:
}
*:first-child+html #banner {
:
[IE7용 스타일을 기술]
:
}
IE 6 and below (IE6이하)
* html
IE 7 and below (IE7이하)
*:first-child+html, * html
IE 7 only (IE7전용)
*:first-child+html
IE 7 and modern browsers only (IE7과 모던브라우저)
html>body
Modern browsers only (not IE 7) (IE7이외의 모던 브라우저)
html>/**/body
Recent Opera versions 9 and below (최근의 Opera9이하)
Opera 9와 Safari 동시적용
html:first-child
Safari에만 적용
Opera 9와 Safari 동시적용
/* XXX \*/로 코멘트 아웃하고 html:\66irst-child를 덧붙임으로써 Safari에만 CSS가 적용된다.
/* safari only \\*/
html:\\66irst-child div.globalContainer{
margin: 0 0 0 18px;
}
/* end */
내용중 잘못된 부분이나 수정, 추가가 필요한 부분이 있으시면 의견 부탁드립니다.
Opera와 Safari용 css hack이 동시 적용이 되는 문제를 김진태님이 지적해 주셨습니다.
2006-06-30 at 11:15:36
감사합니다.
정말 정리가 잘돼어 있어 무척 도움이 됩니다.
hack이 필요없는 세상이 되었으면 합니다.
세상의 모든 유저들을 위해서도, 나 자신의 심신의 안녕을 위해서도…
좋은 하루 되세요.
2006-06-30 at 12:04:13
도움이 되셨다니 기쁘네요 :-)
이제 곧 hack 없이도 디자인/코딩할 수 있는 날이 오리라 생각합니다.
심신의 안녕을 위해서!
2006-12-13 at 11:20:34
//IE7를 포함한 모든 IE에만 적용하는 방법은
*+html body, * html body //
이거 사용하고 싶은데 어떻게 사용해야하는건가요~^^?
빠른답변부탁드립니다~ -.-”
2006-12-13 at 12:43:43
본문을 조금 이해하기 쉽게 수정하였습니다. 참고 하시기 바랍니다.
2006-12-13 at 16:19:25
ハハハハハ
未知の世界は広いの~
2006-12-13 at 22:02:57
勉強頑張ってますか?
2006-12-18 at 11:58:20
감사합니다. 덕분에 도움이 되었어요.
2006-12-18 at 13:39:17
도움이 되셨다니 기쁩니다:-)
2007-03-20 at 14:58:55
알아보기 쉽게 정리해주시고… 자세한 스크립트까지… 감사합니다~
2007-03-20 at 21:09:06
별말씀을요:-) 도움이 되셨다니 기쁩니다.
2007-04-05 at 15:20:07
사파리 핵에서 html:\66irst-child -> html:first-child 이게 맞는거 같네요 ^^
2007-04-05 at 18:27:25
안녕하세요. 김진태님 반갑습니다:-)
html:first-child이라고 기술하면 Opera에만 적용이 되는 걸로 알고 있습니다. 예전 작업에 몇번 사용 한 적이 있습니다만 html:\66irst-child라고 기술하면 Safari에만 적용이 됩니다. 저도 깊이 알아보진 않았지만 아마도 Safari만이 “\66″을 “f”로 해석하는 것 같습니다.
2007-04-06 at 11:28:41
안녕하세요? ^^
현재 맥환경에서 사파리로 테스트중인데 html:\66irst-child, html:first-child 둘다 사파리와 오페라에
동일하게 적용이 되는것 같네요 ㅜ_- 오페라는 9.10 버젼이고 사파리는 2.0.3 버젼입니다.
이게 우찌된일인지 ㅜ_-
2007-04-06 at 12:37:17
정말 그렇군요! 둘 다 적용이 되버리네요..; 좋은 정보 감사합니다.
현재 다른 방법이 있나 찾아보고 있는데 그렇게 썩 좋은 정보를 발견하기 힘들군요.
일단 아래 페이지에 Safari에 관련된 hack이 올라와 있긴 한데 조금 무식한 방법인지라..; 다른 방법이 없나 한번 찾아 보겠습니다.
http://www.stormdetector.com/hacks/safarihack.html
2007-04-06 at 13:05:10
답변 감사합니다. ^^
알려주신 링크에 나와있는 방법을 써봐야겠네요
2007-04-06 at 13:18:47
링크로 나와있는 방법이 IE7.0 에도 같이 적용되네요 하하하
사건은 점점 미궁속으로 음…
2007-04-06 at 13:23:49
코멘트가 삭제가 안되네요 위에 코멘트는 삭제해 주세요 다시해보니 되네요 ^^
2007-04-06 at 13:30:29
혼란을 드려 죄송합니다 ㅜ_-
링크에 나와있는 핵은 IE 7.0 과 같이 적용이 되네요
IE7 핵을 같이 써야 되는건가…
2007-04-07 at 02:22:31
저 CSS핵이 일단 적용한 다음에 하나하나 제거해 나가는 스타일인지라 IE7용 핵도 따로 기술해야 하는 것 같습니다.
2007-05-02 at 18:39:05
html[xmlns] 핵은 IE7 도 같이 적용되네요 ^^
2007-05-03 at 15:04:49
호옷! 그렇군요. 내용추가 하도록 하겠습니다:-) 감사합니다.
2007-06-19 at 17:01:08
CSSÇÙ(hack) Á¤¸®…
CSSÇÙ(hack) Á¤¸®
ºê¶ó¿ìÀúÀÇ ¹ö±×¸¦ hackÀ¸·Î ÇØ°áÇÒ ¼ö ÀÖ´Â ºÎºÐÀÌ ¸¹ÀÌ ÀÖ½À´Ï´Ù¸¸ ±×º¸´Ù »çÀÌÆ®ÀÇ CSS±¸Á¶¸¦ ¼³°èÇÒ¶§ °¢ ºê¶ó¿ìÀúÀÇ ¼Ó¼ºÀ…
2007-07-31 at 17:48:46
안녕하세요~
웹표준화팀 김현진입니다.
hack 적용이 쿽스모드에서는 안되더라구요~ 엄청 헤맸네요
쿽스모드에서 쓸 수 있는 좋은방법은 혹시 없을까요? ^ ^
2007-08-02 at 01:19:36
안녕하세요 현진님:-)
답변이 늦어져서 정말 죄송합니다. 저도 호환모드에서 CSS작업을 그다지 많이 해보지 않아서 자세하게 답변을 드리기 힘들지만…표시모드별 CSS해석 검증 결과표를 보시면 조금 힌트가 되리라 생각합니다.
2008-01-15 at 17:46:03
가장 마지막 내용 Opera 9와 Safari 핵 설명부분에서 first-child 라는 단어 가운데 알파벳 ‘f’ 가 ‘\66′, ‘\\66′ 으로 두 곳 잘못 표기가 되어 있습니다. ^^ (WP 업데이트 과정에서 이렇게 될 수도 있나요? 일부러 바꿀 일은 없을텐데 희한하게 잘못 표기되어 있네요.)
2008-01-15 at 17:51:53
Opera 9와 Safari 동시적용
html:first-child
상기 핵은 Safari3 에서는 적용되지 않는것을 발견하였습니다. 코멘트 추가 부탁드립니다.
2008-01-15 at 17:59:18
마지막 핵 /* safari only \\*/ … 부분도 Safari3 에서는 적용되지 않는것을 확인하였습니다. Safari3 가 기존의 핵을 모두 디버깅한 모양입니다. (__) input type=”file” 부분의 뷰가 다른 브라우저와 많이 차이가 나서 핵을 좀 쓰려고 했는데 완전 좌절이네요 ㅜㅜ;
2008-01-15 at 18:19:08
미처 파악을 못하고 있었습니다. 지적 감사합니다:-) 찾아보니 Safari3에서만 적용되는 핵으로는
body:first-of-type이 있네요. 사용예로는#hackSafari1{
background:red;
}
body:first-of-type #hackSafari{
background:green;
}
이런 식으로 적용이 가능한 것 같습니다.
또, Safari2와 Safari2에 함께 적용되는 핵으로는
@media all이 있습니다. 사용예로는#hackSafari{
background:green;
}
@media all {
@import url(dummy.css);
}
#hackSafari{
background:red;
}
지금 테스트 해보니 문제없이 적용이 되는 것 같습니다. 더 자세한 내용은 아래 페이지를 참고하시면 될 것 같습니다.
http://coliss.com/articles/bui.....s/247.html
2008-06-16 at 19:30:52
검색하며 돌아 댕기다 들어왔어요..
정말 유용하게 쓰고 있습니다..고마워요~
디잔만 하고는 먹고 살수가 없네요..에고..
그래도 오아시스를 발견한 듯한…정말 감사~걍 갈려다가 이렇게 코멘트 남깁니다~^^
2008-06-17 at 08:51:41
안녕하세요 한주연님:-)
감사합니다. 도움이 되었다니 기쁩니다:-)