브라우저의 버그를 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이 동시 적용이 되는 문제를 김진태님이 지적해 주셨습니다.
감사합니다.
정말 정리가 잘돼어 있어 무척 도움이 됩니다.
hack이 필요없는 세상이 되었으면 합니다.
세상의 모든 유저들을 위해서도, 나 자신의 심신의 안녕을 위해서도…
좋은 하루 되세요.
도움이 되셨다니 기쁘네요 :-)
이제 곧 hack 없이도 디자인/코딩할 수 있는 날이 오리라 생각합니다.
심신의 안녕을 위해서!
//IE7를 포함한 모든 IE에만 적용하는 방법은
*+html body, * html body //
이거 사용하고 싶은데 어떻게 사용해야하는건가요~^^?
빠른답변부탁드립니다~ -.-”
본문을 조금 이해하기 쉽게 수정하였습니다. 참고 하시기 바랍니다.
ハハハハハ
未知の世界は広いの～
勉強頑張ってますか？
감사합니다. 덕분에 도움이 되었어요.
도움이 되셨다니 기쁩니다:-)
알아보기 쉽게 정리해주시고… 자세한 스크립트까지… 감사합니다~
별말씀을요:-) 도움이 되셨다니 기쁩니다.
사파리 핵에서 html:\66irst-child -> html:first-child 이게 맞는거 같네요 ^^
안녕하세요. 김진태님 반갑습니다:-)
html:first-child이라고 기술하면 Opera에만 적용이 되는 걸로 알고 있습니다. 예전 작업에 몇번 사용 한 적이 있습니다만 html:\66irst-child라고 기술하면 Safari에만 적용이 됩니다. 저도 깊이 알아보진 않았지만 아마도 Safari만이 “\66″을 “f”로 해석하는 것 같습니다.
안녕하세요? ^^
현재 맥환경에서 사파리로 테스트중인데 html:\66irst-child, html:first-child 둘다 사파리와 오페라에
동일하게 적용이 되는것 같네요 ㅜ_- 오페라는 9.10 버젼이고 사파리는 2.0.3 버젼입니다.
이게 우찌된일인지 ㅜ_-
정말 그렇군요! 둘 다 적용이 되버리네요..; 좋은 정보 감사합니다.
현재 다른 방법이 있나 찾아보고 있는데 그렇게 썩 좋은 정보를 발견하기 힘들군요.
일단 아래 페이지에 Safari에 관련된 hack이 올라와 있긴 한데 조금 무식한 방법인지라..; 다른 방법이 없나 한번 찾아 보겠습니다.
http://www.stormdetector.com/hacks/safarihack.html
답변 감사합니다. ^^
알려주신 링크에 나와있는 방법을 써봐야겠네요
링크로 나와있는 방법이 IE7.0 에도 같이 적용되네요 하하하
사건은 점점 미궁속으로 음…
코멘트가 삭제가 안되네요 위에 코멘트는 삭제해 주세요 다시해보니 되네요 ^^
혼란을 드려 죄송합니다 ㅜ_-
링크에 나와있는 핵은 IE 7.0 과 같이 적용이 되네요
IE7 핵을 같이 써야 되는건가…
저 CSS핵이 일단 적용한 다음에 하나하나 제거해 나가는 스타일인지라 IE7용 핵도 따로 기술해야 하는 것 같습니다.
html[xmlns] 핵은 IE7 도 같이 적용되네요 ^^
호옷! 그렇군요. 내용추가 하도록 하겠습니다:-) 감사합니다.
CSSÇÙ(hack) Á¤¸®…
CSSÇÙ(hack) Á¤¸®
ºê¶ó¿ìÀúÀÇ ¹ö±×¸¦ hackÀ¸·Î ÇØ°áÇÒ ¼ö ÀÖ´Â ºÎºÐÀÌ ¸¹ÀÌ ÀÖ½À´Ï´Ù¸¸ ±×º¸´Ù »çÀÌÆ®ÀÇ CSS±¸Á¶¸¦ ¼³°èÇÒ¶§ °¢ ºê¶ó¿ìÀúÀÇ ¼Ó¼ºÀ…
안녕하세요~
웹표준화팀 김현진입니다.
hack 적용이 쿽스모드에서는 안되더라구요~ 엄청 헤맸네요
쿽스모드에서 쓸 수 있는 좋은방법은 혹시 없을까요? ^ ^
안녕하세요 현진님:-)
답변이 늦어져서 정말 죄송합니다. 저도 호환모드에서 CSS작업을 그다지 많이 해보지 않아서 자세하게 답변을 드리기 힘들지만…표시모드별 CSS해석 검증 결과표를 보시면 조금 힌트가 되리라 생각합니다.
가장 마지막 내용 Opera 9와 Safari 핵 설명부분에서 first-child 라는 단어 가운데 알파벳 ‘f’ 가 ‘\66′, ‘\\66′ 으로 두 곳 잘못 표기가 되어 있습니다. ^^ (WP 업데이트 과정에서 이렇게 될 수도 있나요? 일부러 바꿀 일은 없을텐데 희한하게 잘못 표기되어 있네요.)
Opera 9와 Safari 동시적용
html:first-child
상기 핵은 Safari3 에서는 적용되지 않는것을 발견하였습니다. 코멘트 추가 부탁드립니다.
마지막 핵 /* safari only \\*/ … 부분도 Safari3 에서는 적용되지 않는것을 확인하였습니다. Safari3 가 기존의 핵을 모두 디버깅한 모양입니다. (__) input type=”file” 부분의 뷰가 다른 브라우저와 많이 차이가 나서 핵을 좀 쓰려고 했는데 완전 좌절이네요 ㅜㅜ;
미처 파악을 못하고 있었습니다. 지적 감사합니다:-) 찾아보니 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
검색하며 돌아 댕기다 들어왔어요..
정말 유용하게 쓰고 있습니다..고마워요~
디잔만 하고는 먹고 살수가 없네요..에고..
그래도 오아시스를 발견한 듯한…정말 감사~걍 갈려다가 이렇게 코멘트 남깁니다~^^
안녕하세요 한주연님:-)
감사합니다. 도움이 되었다니 기쁩니다:-)
[...] CSS 핵 정리. 한글이라 좋군요. [...]
[...] CSS핵(hack) 정리 [...]
좋은 정보감사합니다.
지금도 전 핵이 필요없는 세상이라 생각합니다.
간혹 그저 아주 쓸모없는 디자인적인 요소 1px의 차이때문에 쓰기위함이지요.
개념없는 윗분들 때문인듯…
일목요연한 정리! 감사합니다. 많은 도움 되었습니다. 행복하세요~
[...] 사용해야만 했습니다. 이렇게 뒤떨어진 브라우져들을 위해 웹 개발자들은 CSS Hack, Conditional Comment, Javascript 등을 사용하고 [...]
정말 도움이 많이 됬습니다.
안녕하세요. 웹서핑핟가 우연히 보게되어 글 남깁니다 =)
얼마전 Textcube.org 스킨을 수정했는데 코멘트부분이 파이어폭스와 IE7의 결과물 중 한 곳에
여백부분이 다르게나와서, IE핵을 쓰면 된다는 지인들의 말을듣고 검색하다가 온 것인데요,,
nmind님의 블로그글을 보고 몇가지 적용해봤는데, 전혀 안되더라구요 제가 적용하는 방법을 몰라서 그러는듯..-_-
그래서 한가지 질문을 드리고싶습니다.
제 블로그의 코멘트와 다음뷰(Daum View)사이의 여백의 결과물이 다르게 나와서요.
파이어폭스에서는 Style.css에서
.handDrawnButtons {margin-top:-15px;} 라고 주면 정상적으로 나거든요, 허나
IE7에서 여백이 더욱 많이 들어간거같더라구요..
실례가 안된다면 조언 부탁드립니다.ㅠㅠ
와우~ 진짜 땡큐 베리 감솨해요~ㅎㅎ
한참 헤매다가….ㅜㅜ
우연히 검색타고 들어와서 문제해결 하고 갑니다.~^^
좋은 정보 감사합니다.
감사합니당…좋은 내용 많이 배우고 갑니당…퍼가도 될까요?~^^
CSS핵(hack) 정리 | NmindPlus http://bit.ly/iZZTu
감사합니다…ㅠㅠ 감사합니다…ㅠㅠ 덕분에 머리아프던 문제가 해결되었어요;ㅁ;!!!!!
정말 다양한 내용을 정리해 주셔서 감사합니다.
작업에 참고하려고 제 블로그에 살짝 담았습니다.
원치 않으시면 바로 내리겠습니다. 어쨌든 감사드립니다.
[...] Hack 정리 - http://www.nmindplus.com/2006/06/28/css-hack/ by [...]
[...] NmindPlus http://www.nmindplus.com/2006/06/28/css-hack/ [...]