반응형
퍼블리싱을 할 때 CSS hack을 사용하는 것은 좋은 방법이라고 할 수 없습니다.
Cross Browsing을 위해 hack을 사용하기 전에 좀더 주의하고 각 브라우저의 특성을 파악하여 설계하시면 CSS핵을 사용하지 않고도 해결할 수 있는 경우가 많습니다.
하지만 퍼블리싱을 하다보면 어쩔 수 없이 CSS hack을 사용 해야하는 경우가 있습니다.
그렇기에 맑은커뮤니케이션에서는 업무의 효율을 위해 아래와 같이 CSS hack을 정리하였습니다. 2013-10-01 재정
IE 적용 Hack

- IE 6 hack (underscore hack)

프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면 IE6에서만 적용이 됩니다.

#header {
	_width:100px;
}

- IE 6 hack (star hack)

셀렉트 앞에 *html을 붙이면 IE6에서만 적용이 됩니다.

*html #header {
	width:100px;
}

- IE 6 hack (해시 hack)

속성앞에 #삽입 IE6이하 버전에서만 적용이 됩니다.

#header {
	#width:100px;
}

- IE 6 hack (!important hack)

IE6버전에서는 한규칙안에 여러 개의 속성을 사용할수없으므로 첫번째 선언을 무시하고 두번째 선언을 적용 !important속성이 우선시되어 두번째 선언을 적용하게 됩니다. 나머지 브라우저에선 첫번째 속성이 적용됩니다.

#header {
	position:fixed !importent;
	position:static;
}

- IE 7 hack (star hack)

셀렉트 앞에 *+html body 또는 *:first-child+html 을 붙이면 IE7 or Opera 에서 적용이 됩니다.

*+html body #header {width:100px;} /* IE7, OPERA 적용 */ 
*:first-child+html #header {width:100px;} /* IE7 적용 */

- IE 7 hack (star hack)

프로퍼티의 가장 앞부분에 언더스코어(*)를 붙이면 IE7에서만 적용이 됩니다.

#header {
	*width:100px;
}

- IE 6, 7 hack (dot hack)

프로퍼티의 가장 앞부분에 닷(.)를 붙이면 IE6, 7에서만 적용이 됩니다.

#header {
	.width:100px;
}

- IE 7, 8, 9 hack (선택자 핵)

셀렉트 앞에 html>body를 붙이면 IE7, 8, 9 에서 적용이 됩니다.

html>body #header {
	width:100px;
}

- IE 8 hack (속성 핵)

프로퍼티의 속성값 앞부분에 (/*\**/)를 붙이면 IE8에서만 적용이 됩니다.

#header {
	width:/*\**/100px;
}

- IE 8, IE9, IE8+9 hack (속성 핵)

프로퍼티의 속성값 뒷부분에 \0/IE8 를 붙이면 IE8 에서 적용이 됩니다.
프로퍼티의 속성값 뒷부분에 \0/IE9 를 붙이면 IE9에서 적용이 됩니다.
프로퍼티의 속성값 뒷부분에 \0/IE8+9 를 붙이면 IE8과 IE9 모두 적용이 됩니다.

#header{
	width:100px \0/IE8;  /* IE8적용 */
	width:150px \0/IE9;  /* IE9적용 */ 
	height:50px  \0/IE8+9;  /* IE8+9적용 */
}	

- IE 9+10 hack (속성 핵)

셀렉트 앞에 @media screen and (min-width:0\0){} 를 감싸면 적용이 됩니다.

@media screen and (min-width:0\0){
	#header {
		width:100px;
	}
}

- IE 10 hack (속성 핵)

셀렉트 앞에 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {} 를 감싸면 적용이 됩니다.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#header{
		width:100px;
	}
}
FireFox 적용 Hack

- FireFox hack

셀렉트 앞에 @-moz-document url-prefix() {}를 감싸면 적용이 됩니다.

@-moz-document url-prefix() {
	#header {
		width:100px;
	}
}
Chorme 적용 Hack

- Chorme hack

셀렉트 앞에 @media screen and (-webkit-min-device-pixel-ratio:0){}를 감싸면 적용이 됩니다.

@media screen and (-webkit-min-device-pixel-ratio:0) {
	#header {
		width:100px;
	}
}
Safari 적용 Hack

- Safari hack

프로퍼티의 속성값 앞에 html[xmlns*=""] body:last-child {}를 감싸면 적용이 됩니다.

html[xmlns*=""] body:last-child #header {
	width:100px;
}
Opera 적용 Hack

- Opera hack

프로퍼티의 속성값 앞에 body:first-of-type #header {}를 감싸면 적용이 됩니다.

body:first-of-type #header {
	width:100px;
}
반응형

+ Recent posts