가장 포괄적인 CSS 해킹 방법 목록(여러 브라우저와 호환 가능)

통합된 페이지 효과를 얻으려면 다양한 브라우저나 버전에 맞는 특정 CSS 스타일을 작성해야 합니다. 우리는 다양한 브라우저/버전에 해당하는 CSS 코드를 작성하는 과정을 CSS 해킹이라고 부릅니다. 수년간 프런트엔드 작업을 해왔기 때문에 해킹이 자주 필요한 것은 아니지만 브라우저 간에 일관성 없는 성능을 경험하는 경우가 많습니다. 이를 바탕으로 어떤 경우에는 모든 사람이 요구하는 페이지 성능을 달성하기 위해 이 비우호적인 방법을 사용하는 것을 극도로 꺼릴 것입니다. 저는 개인적으로 해킹을 사용하는 것을 권장하지 않습니다. 좋은 프런트 엔드는 더 나은 사용자 경험을 달성하기 위해 가능한 한 해킹을 사용하지 않고 요구 사항을 실현해야 합니다. 그러나 현실은 너무 가혹합니다. 브라우저 제조업체 간의 역사적 문제로 인해 목표 요구 사항에 따라 해커와 타협할 수밖에 없습니다. 이는 단지 고립된 경우일 뿐입니다. 오늘은 내 경험과 이해를 바탕으로 IE6~IE10 및 기타 표준 브라우저의 CSS 해킹을 요약하기 위해 여러 데모를 만들었습니다. 아마도 이 기사는 현재 해킹에 대한 가장 포괄적인 요약이 되어야 할 것입니다.

CSS 해킹이란
다른 제조업체의 브라우저 또는 특정 브라우저의 다른 버전(예: IE6-IE11, Firefox/Safari/Opera/Chrome 등)으로 인해 발생합니다. , CSS 지원 및 구문 분석이 다르기 때문에 다른 브라우저 환경에서 페이지 표시가 일관되지 않습니다. 이때 통일된 페이지 효과를 얻으려면 다양한 브라우저나 버전에 맞는 특정 CSS 스타일을 작성해야 합니다. 우리는 이러한 과정을 다양한 브라우저/버전에 맞게 CSS 해킹이라고 부릅니다. 🎜>
CSS 핵의 원리
다른 브라우저와 브라우저 버전의 CSS에 대한 지원 및 구문 분석 결과가 다르고 CSS 우선 순위가 브라우저 표시 효과에 미치는 영향으로 인해 서로 다른 CSS를 적용할 수 있습니다. 브라우저 시나리오.

CSS hack 분류
CSS Hack에는 일반적으로 CSS 속성 접두사 방식, 선택자 접두사 방식, IE 조건부 주석 방식(예: IE의 경우 HTML 헤더 참조) Hack의 세 가지 표현 형식이 있습니다. 실제 프로젝트에서는 CSS Hack이 대부분 IE 브라우저 버전 간의 성능 차이를 해결하기 위해 도입되었습니다.
속성 접두사 방식(i.e. 클래스 내부 Hack): 예를 들어 IE6는 밑줄 "_"과 별표 "*"를 인식할 수 있고, IE7은 별표 "*"를 인식할 수 있지만 밑줄 "_"은 인식할 수 없습니다. IE6~ IE10은 "9"를 인식하지만 Firefox는 위의 3개를 인식하지 못합니다.
선택기 접두사 방법(예: 선택기 해킹): 예를 들어 IE6은 *html .class{}를 인식할 수 있고, IE7은 *+html .class{} 또는 *:first-child+html .class{}를 인식할 수 있습니다.
IE 조건부 주석 방법(예: HTML 조건부 주석 해킹): 모든 IE용(참고: IE10+는 더 이상 조건부 주석을 지원하지 않습니다): , IE6 이하의 경우:

IE8에서만 작동하지 않습니다


IE가 아닌 브라우저에서 유효함



CSS 해킹 방법 2: 클래스 내 속성 접두사 방법

을 표시합니다. 속성 접두사 방법은 CSS 스타일 속성에 있습니다. 예상되는 페이지 표시 효과를 얻으려면 이름 앞에 특정 브라우저에서만 인식할 수 있는 일부 해킹 접두사를 추가하세요.
IE 버전별 CSS 해킹 비교표

hack

写法

实例

IE6(S)

IE6(Q)

IE7(S)

IE7(Q)

IE8(S)

IE8(Q)

IE9(S)

IE9(Q)

IE10(S)

IE10(Q)

*

*color

青色

Y

Y

Y

Y

N

Y

N

Y

N

Y

+

+color

绿色

Y

Y

Y

Y

N

Y

N

Y

N

Y

-

-color

黄色

Y

Y

N

N

N

N

N

N

N

N

_

_color

蓝色

Y

Y

N

Y

N

Y

N

Y

N

N

#

#color

紫色

Y

Y

Y

Y

N

Y

N

Y

N

Y