반응형
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; /* */ }
Win IE 3~4, Mac IE 4~4.5, Netscape 4 제외시키기
@import로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다.
Win IE 4, Mac IE 4 ~ 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. IE 3와 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 타입 선택자 앞에 오도록 해서 다른브라우져에서 적용되지 않지만 IE계열에서만 적용되는 스타일시트를 정의할 수 있다.
이 스타핵은 IE7에서 적용되지 않는다.
*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 hack
셀렉트의 앞에 html*을 붙이면, Win IE 5.5~7, Mac IE 5, Safari 등에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다. html*과 셀렉터사이에 스페이스를 넣지 않는다.
html*p { color:white; }
xmlns hack
속성셀렉터를 이용하여, html요소에 붙이는 xmlns속성을 스타일적용을 위하여 사용하는 방법.
Mozilla, Fire-fox, Opera 7/8, Safari 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
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 4~5, Mac IE 4, Netscape 4 에서는 voice-family 속성 이전의 스타일 적용. 그외의 브라우저는 뒤의 속성 적용.
단순 박스모델 핵
H1 {
width:500px;
w\idth:400px; //Win IE 6, Mac IE 5, Mozilla, Opera, Safari
\width:450px; // only Win IE 5
}
속성의 첫번째, 두번째 글자 사이에 \를 삽입하면 Win IE 6, Mac IE 5, Mozilla, Opera, Safari 에 적용. 추가로 속성의 앞에 \를 삽입하면 Win IE 5 에만 적용.
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';/*";
} }/* */
모던브라우저용 패스필터
(Win IE 5.5 이하, Mac IE 5, Opera 8 이하, Netscape 4 이하 제외)
@import "null?"{";
@import "/css/style.css";
@import "null?"}";
!important 핵
스타핵은 IE6을 구분하기 위하여 2가지의 선언을 해야한다. 그러나 한 규칙선언안에서 IE6 이하버전을 위한 선언과 다른 브라우저를 위한 선언을 하고 싶다면 !important 핵을 사용하면된다.
#top {
position:fixed !important;
position:static;
}
IE6 버전에서는 한 규칙안에 여러개의 속성을 사용할 수 없으므로, 첫번째 선언을 무시하고 두번째 선언을 적용한다.
나머지 브라우져에서는 important 키워드가 쓰여진 속성의 우선순위를 높게 인식하기때문에 첫번째 선언을 적용한다.
Win IE 6 패스필터(?)
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /><![endif]-->
Win IE 7 패스필터(?)
<!--[if gte IE 7]><link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /><![endif]-->
IE7, Opera 8 이후 버전 적용
셀렉터 앞에 *+html body 삽입.
*+html body
(Opera를 배제한 IE7 전용으로 하고 싶을 때는 *+html>/**/body 로 Opera 전용 속성 기술.)
IE7에만 적용
*:first-child+html
IE 7 and below （IE7이하）
1.
*+html body, * html body
2.
*:first-child+html, * html
IE7을 포함한 모던브라우저에 적용(IE6이하를 제외)
html>body
IE7을 제외한 모던브라우저에만 적용
html>/**/body
Opera 9와 Safari 동시적용
html:first-child
Safari에만 CSS가 적용
/* XXX \*/로 코멘트 아웃하고 html:\66irst-child를 덧붙임으로써 Safari에만 CSS가 적용된다.
/* safari only \\*/
html:\\66irst-child div.globalContainer{
margin: 0 0 0 18px;
}
/* end */
닷핵 (.)
H1 { .color:red; }
속성 앞에 . 삽입. Win IE 6~7 에만 적용. 타 브라우저는 미확인
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; /* */ }
Win IE 3~4, Mac IE 4~4.5, Netscape 4 제외시키기
@import로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다.
Win IE 4, Mac IE 4 ~ 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. IE 3와 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 타입 선택자 앞에 오도록 해서 다른브라우져에서 적용되지 않지만 IE계열에서만 적용되는 스타일시트를 정의할 수 있다.
이 스타핵은 IE7에서 적용되지 않는다.
*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 hack
셀렉트의 앞에 html*을 붙이면, Win IE 5.5~7, Mac IE 5, Safari 등에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다. html*과 셀렉터사이에 스페이스를 넣지 않는다.
html*p { color:white; }
xmlns hack
속성셀렉터를 이용하여, html요소에 붙이는 xmlns속성을 스타일적용을 위하여 사용하는 방법.
Mozilla, Fire-fox, Opera 7/8, Safari 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
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 4~5, Mac IE 4, Netscape 4 에서는 voice-family 속성 이전의 스타일 적용. 그외의 브라우저는 뒤의 속성 적용.
단순 박스모델 핵
H1 {
width:500px;
w\idth:400px; //Win IE 6, Mac IE 5, Mozilla, Opera, Safari
\width:450px; // only Win IE 5
}
속성의 첫번째, 두번째 글자 사이에 \를 삽입하면 Win IE 6, Mac IE 5, Mozilla, Opera, Safari 에 적용. 추가로 속성의 앞에 \를 삽입하면 Win IE 5 에만 적용.
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';/*";
} }/* */
모던브라우저용 패스필터
(Win IE 5.5 이하, Mac IE 5, Opera 8 이하, Netscape 4 이하 제외)
@import "null?"{";
@import "/css/style.css";
@import "null?"}";
!important 핵
스타핵은 IE6을 구분하기 위하여 2가지의 선언을 해야한다. 그러나 한 규칙선언안에서 IE6 이하버전을 위한 선언과 다른 브라우저를 위한 선언을 하고 싶다면 !important 핵을 사용하면된다.
#top {
position:fixed !important;
position:static;
}
IE6 버전에서는 한 규칙안에 여러개의 속성을 사용할 수 없으므로, 첫번째 선언을 무시하고 두번째 선언을 적용한다.
나머지 브라우져에서는 important 키워드가 쓰여진 속성의 우선순위를 높게 인식하기때문에 첫번째 선언을 적용한다.
Win IE 6 패스필터(?)
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /><![endif]-->
Win IE 7 패스필터(?)
<!--[if gte IE 7]><link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /><![endif]-->
IE7, Opera 8 이후 버전 적용
셀렉터 앞에 *+html body 삽입.
*+html body
(Opera를 배제한 IE7 전용으로 하고 싶을 때는 *+html>/**/body 로 Opera 전용 속성 기술.)
IE7에만 적용
*:first-child+html
IE7이외의 브라우저를 위한 원래의 스타일 설정은 IE7용 스타일 설정 앞에 기술한다
순서가 바뀌면 원하는 효과를 얻지 못한다.
IE 7 and below （IE7이하）
1.
*+html body, * html body
2.
*:first-child+html, * html
IE7을 포함한 모던브라우저에 적용(IE6이하를 제외)
html>body
IE7을 제외한 모던브라우저에만 적용
html>/**/body
Opera 9와 Safari 동시적용
html:first-child
Safari에만 CSS가 적용
/* XXX \*/로 코멘트 아웃하고 html:\66irst-child를 덧붙임으로써 Safari에만 CSS가 적용된다.
/* safari only \\*/
html:\\66irst-child div.globalContainer{
margin: 0 0 0 18px;
}
/* end */
닷핵 (.)
H1 { .color:red; }
속성 앞에 . 삽입. Win IE 6~7 에만 적용. 타 브라우저는 미확인
반응형
