Cross Browsing을 위해 hack을 사용하기 전에 좀더 주의하고 각 브라우저의 특성을 파악하여 설계하시면 CSS핵을 사용하지 않고도 해결할 수 있는 경우가 많습니다.
하지만 퍼블리싱을 하다보면 어쩔 수 없이 CSS hack을 사용 해야하는 경우가 있습니다.
그렇기에 맑은커뮤니케이션에서는 업무의 효율을 위해 아래와 같이 CSS hack을 정리하였습니다. 2013-10-01 재정
- 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
셀렉트 앞에 @-moz-document url-prefix() {}를 감싸면 적용이 됩니다.
@-moz-document url-prefix() {
#header {
width:100px;
}
}
- 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
프로퍼티의 속성값 앞에 html[xmlns*=""] body:last-child {}를 감싸면 적용이 됩니다.
html[xmlns*=""] body:last-child #header {
width:100px;
}
- Opera hack
프로퍼티의 속성값 앞에 body:first-of-type #header {}를 감싸면 적용이 됩니다.
body:first-of-type #header {
width:100px;
}
'CSS' 카테고리의 다른 글
| CSS 초보자를 위한 팁 CSS Shorthand (줄여쓰기, 속기) (0) | 2012.01.30 |
|---|---|
| CSS3 Selectors Level 1 ~ 3 (0) | 2012.01.19 |
| [반응형웹]미디어쿼리(MediaQuery) CSS 및 HTML 사용 팁 (0) | 2012.01.13 |
| [웹표준코딩]CSS 폰트단위 (0) | 2012.01.11 |
| N-Screen 종결자, HTML5 Media Query (블루웨이브 홈페이지 개편) (0) | 2012.01.02 |