CSS Hack은 표준 CSS가 다양한 브라우저의 표시 효과와 호환되지 않을 때 사용되는 해결 방법입니다. 브라우저 제조업체가 CSS를 구문 분석하는 방법에 대해 합의할 때까지 이 방법을 사용하여 해당 작업을 완료할 수 있습니다. 인터넷에서 많은 CSS Hacks를 검색할 수 있지만 오늘 제가 발표한 CSS Hacks를 모두 이해하지 못할 수도 있습니다. 이는 단일 브라우저만을 대상으로 하는 CSS Hacks이기 때문입니다.
이러한 CSS 해킹이 작동한다는 것을 보여주기 위해 6개의 새로운 P 태그를 만들고 각 P 태그에 고유 ID를 부여했습니다. CSS Hack이 실제로 작동하는 모습을 보여줍니다.
| <p id="opera">저는 Opera 7.2 - 9.5를 사용하고 있습니다</p> <p id="safari">나는 마법의 사파리이다</p> <p id="firefox">저는 Firefox에서 왔습니다</p> <p id="firefox12">저는 FF 수석 Firefox 1 - 2입니다 </p> <p id="ie7">저는 囧IE7입니다</p> <p id="ie6">저는 망가진 IE 6입니다</p> |
그런 다음 이 P 태그가 기본적으로 표시되지 않도록 합니다.
| <스타일 유형="텍스트/css"> 본문 p{디스플레이: 없음;} </style> |
IE CSS 조건부 주석을 사용하여 IE 브라우저 구별
IE 브라우저를 구별하는 가장 쉬운 방법은 당연히 조건부 주석을 사용하는 것입니다. Microsoft는 이 기능을 달성할 수 있는 강력한 구문을 만들었습니다. IE 조건부 주석을 자세히 소개하고 싶지는 않습니다. 검색 엔진에서는 수만 개의 검색어를 검색할 수 있습니다. 여기서는 다음 두 가지만 필요합니다.
| <!--[IE 7인 경우]> <스타일 유형="텍스트/css"> </style> <![endif]--> <!--[IE 6인 경우]> <스타일 유형="텍스트/css"> </style> <![endif]--> |
CSS 파서 해킹을 사용하여 IE 구별
IE 조건부 주석은 매우 간단하고 사용하기 쉽지만 모든 CSS를 하나의 파일에 넣으려면 다른 방법을 사용해야 합니다. 여기서 IE 7 Hack은 IE7에서만 작동합니다. IE6은 > 선택기를 전혀 모르기 때문입니다. 동시에 > 선택기는 다른 브라우저에서도 유효하지 않다는 점에 유의해야 합니다.
| /* IE 7 */ HTML > 본문 #ie7 {*디스플레이: 블록;} /* IE 6 */ 본체 #ie6 {_디스플레이: 블록;} |
Firefox를 차별화하는 CSS 해킹
첫 번째는 body:empty를 사용하여 Firefox 1과 2를 구별합니다. 두 번째 해킹은 모든 Firefox 브라우저에 대한 독점 확장인 moz를 사용합니다. -moz는 Firefox에서만 유효합니다. 이 Hack을 사용할 때 다른 브라우저의 영향에 대해 걱정할 필요가 없습니다.
| /* 파이어폭스 1 - 2 */ 본문:비어 있음 #firefox12 {디스플레이: 블록;} /* 파이어폭스 */ @-moz-문서 URL 접두사() {#firefox { 디스플레이: 블록 }} |
CSS Hack은 Safari를 차별화합니다
Safari의 CSS 해킹은 Firefox의 해킹과 매우 유사해 보입니다. 이는 Safari 브라우저의 독점 확장인 웹킷을 사용하며 Safari 브라우저에만 효과적입니다.
| /* 사파리 */ @미디어 화면 및 (-webkit-min-device-pixel-ratio:0) {#safari { 디스플레이: 블록 }} |
CSS Hack은 Opera를 구별합니다
| /* 오페라 */ @media 모두 및 (-webkit-min-device-pixel-ratio:10000), 전부는 아니고 (-webkit-min-device-pixel-ratio:0) {head~body #opera { 디스플레이: 블록 }} |
그런 다음 모두 합치면 이렇게 됩니다.
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ko"> <머리> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS 브라우저 해킹</title> <스타일 유형="텍스트/css"> 신체 p { 디스플레이: 없음; } /* 오페라 */ html:첫 번째 자식 #오페라 { 디스플레이: 블록; } /* IE 7 */ HTML > 본문 #ie7 { *디스플레이: 블록; } /* IE 6 */ 본체 #ie6 { _display: 블록; } /* 파이어폭스 1 - 2 */ 본문:비어 있음 #firefox12 { 디스플레이: 블록; } /* 파이어폭스 */ @-moz-문서 URL 접두사() { #firefox { 디스플레이: 블록 } } /* 사파리 */ @미디어 화면 및 (-webkit-min-device-pixel-ratio:0) { #safari { 디스플레이: 블록 } } /* 오페라 */ @media 모두 및 (-webkit-min-device-pixel-ratio:10000), 전부는 아니고 (-webkit-min-device-pixel-ratio:0) { head~body #opera { 디스플레이: 블록 } } </style> </head> <본문> <p id="opera">저는 Opera 7.2 - 9.5를 사용하고 있습니다</p> <p id="safari">나는 마법의 사파리이다</p> <p id="firefox">저는 Firefox에서 왔습니다</p> <p id="firefox12">저는 FF 수석 Firefox 1 - 2입니다 </p> <p id="ie7">저는 囧IE7입니다</p> <p id="ie6">나는 망가진 IE 6입니다</p></body> </html> |
CSS Hack은 훌륭하고 다양한 브라우저와 편리하게 호환되지만 W3C 인증을 통과할 수 없으므로 꼭 사용해야 하는지 저울질해 보아야 합니다.