태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

2008.02.04 12:35
http://centricle.com/ref/css/filters/
5대 브라우저에 관한 css핵 종망라한 페이지_


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 에만 적용.




Safari에만 CSS가 적용
/* XXX \*/로 코멘트 아웃하고 html:\66irst-child를 덧붙임으로써 Safari에만 CSS가 적용된다.

/* safari only \\*/
html:\\66irst-child div.globalContainer{
margin: 0 0 0 18px;
}
/* end */


Stokely Safari CSS Hack
http://www.stormdetector.com/hacks/safarihack.html

 

 
 
 
/***** Selector Hacks ******/
 
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
 
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
 
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez  { color: red  }
}
 
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }
 
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }
 
/* Everything but IE6-8 */
:root *> #quince { color: red  }
 
/* IE7 */
*+html #dieciocho {  color: red }
 
/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }
 
/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }
 
 
 
/***** Attribute Hacks ******/
 /* IE6, IE7 */
#doce { *color: blue }
 
/* Everything but IE6 */
#diecisiete { color /**/: blue }
 
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
 
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
 
IE5 ~ IE7 대응‘*’Hack

#selector { property:value; *property:value; }   
/* 문서의 DTD와 무관하게 작용함 */  

IE5 ~ IE6 대응‘_’Hack

#selector { property:value; _property:value; }   

/* DTD가 없는 문서는 IE7에도 작용함 */  

 

IE5 대응‘_ & /**/ ’Hack

#selector { property:value; _property /**/:value; }  
 /* DTD가 표준모드인 경우에만 작용함 */  

 

- IE5 대응 Hack의 경우 /**/ 주석 앞에 한 칸의 공백이 있음에 유의한다.

- '_'를 사용하여 IE5~IE6에 대응하게 한 다음, IE6만을 제외하는 ' /**/'를 적용함으로서 IE6을 제외한 IE5만 대응하게 하는 응용편 핵이다.


body {

color: red; /* all browsers, of course */

color : green\9; /* IE8 and below */

}

신고

'웹표준 > CSS' 카테고리의 다른 글

전체 선언  (0) 2008.05.07
CSS Properties List  (0) 2008.02.15
css 핵정리  (0) 2008.02.04
HTML 문서의 목록(DL, UL, OL)  (0) 2007.12.12
border-collapse  (0) 2007.11.30
checkbox, radio 스타일 적용 제외 시키기  (0) 2007.11.24
Posted by 고시랑
TAG , , ,

티스토리 툴바