>  기사  >  웹 프론트엔드  >  CSS 해킹 기술 활용 요약

CSS 해킹 기술 활용 요약

伊谢尔伦
伊谢尔伦원래의
2017-06-07 11:57:492954검색

CSS 해킹이란 무엇입니까?

웹 개발에서는 제조업체가 다르거나 특정 브라우저의 버전이 다르면 CSS에 대한 지원 및 구문 분석이 다르기 때문에 브라우저 간에 일관되지 않은 성능이 발생하는 경우가 많습니다. 일관되지 않은 페이지 표시 효과는 다양한 브라우저 환경에서 나타납니다. 이때 통일된 페이지 효과를 얻으려면 브라우저나 버전에 따라 특정 CSS 스타일을 작성해야 합니다. , 다양한 브라우저/다른 버전에 해당하는 CSS 코드를 작성하는 과정을 CSS 해킹이라고 합니다.

CSS 해킹 기술의 사용에 대해 이야기해 보겠습니다.

CSS 해킹 기술 활용 요약

CSS 해킹 기술

1. CSS Hack의 분류와 CSS Hack의 세 가지 방법에 대한 자세한 설명

详解css 

CSS 해킹 기술 활용 요약的分类和css CSS 해킹 기술 활용 요약三种方式

css CSS 해킹 기술 활용 요약 분류

에는 CSS 속성 접두사 방식, 선택자 접두사 방식, IE 조건부 주석 방식의 세 가지 표현 형식이 있습니다.

속성 접두사 방식(i.e. 클래스 내부 해킹)

셀렉터 접두사 방식

IE 조건부 주석 방식

css 핵은 일반적으로 폭넓은 활용 범위와 강력한 인식 능력을 전면에 내세우는 CSS를 정의합니다.

2.

CSS 해킹 기술을 사용하여 브라우저 호환성 문제 해결

CSS Hack에는 대략 세 가지 형태의 표현이 있습니다. CSS 속성 Hack, CSS 선택기 Hack 및 IE 조건부 주석 Hack은 주로 IE 브라우저를 대상으로 합니다.

 a. 속성 수준 해킹: 예를 들어 IE6은 밑줄 "_"과 별표 "*"를 인식할 수 있지만 IE7은 별표 "*"를 인식할 수 있지만 밑줄은 인식할 수 없습니다. "_"이며 Firefox는 둘 다 인식할 수 없습니다. 잠깐만요

b. 선택기 수준 해킹: 예를 들어 IE6은 *html .class{}를 인식할 수 있고, IE7은 *+html .class{} 또는 *:first-child+html .class{}를 인식할 수 있습니다. 잠깐

  c. IE 조건부 주석 해킹: 예를 들어 모든 IE에 대해: IE6 이하의 경우: 이러한 유형의 해킹은 CSS뿐만 아니라 판결문에 작성된 모든 코드에도 효과적입니다. 성명. .

3.

다른 브라우저의 CSS 해킹 작성 방법 소개

IE6과 FF의 차이점:

Backgroundrange;*blue; IE6과 IE7의 차이점:
배경:녹색 !important;blue;
IE7과 FF의 차이점:
배경 범위; *배경:녹색
FF, IE7 및 IE6의 차이점:
배경 범위;*배경:녹색 !중요;*파란색;
가장 포괄적인 CSS 해킹 방법 목록(여러 브라우저와 호환 가능)

일반적인 상황에서는 CSS를 사용하지 않으려고 합니다. 그러나 어떤 경우에는 사용자 경험을 고려하고 이전 버전과의 호환성을 달성하기 위해 최후의 수단으로 해킹이 사용됩니다. 예를 들어 IE8 이하 버전에서는 지원하지 않기 때문에 CSS3 및 우리 프로젝트 페이지는 IE9/Firefox/Chrome에서 정상적으로 렌더링하기 위해 많은 새로운 CSS3 속성을 사용합니다. 이 경우 css3pie나 htc 또는 조건부 주석 등을 사용하지 않으면 문제가 발생할 수 있습니다. IE8-의 독점적인 해킹이 작동하도록 해야 합니다. Hack을 사용하는 것은 페이지 성능의 일관성을 위해서는 좋지만 과도한 남용은 HTML 문서에 혼란을 야기하고 관리 및 유지 관리의 부담을 증가시킵니다. 5.

CSS CSS 해킹 기술 활용 요약

브라우저마다 또는 동일한 브라우저의 버전마다 CSS 구문 분석에 대한 이해가 다르기 때문에 페이지 효과가 일관되지 않기 때문에 브라우저별로 CSS 코드를 작성하는 것을 호출합니다. CSS 해킹.

일반적으로 사용되는 CSS 핵, CSS 내부 핵, 선택기 핵, HTML 헤더 참조 세 가지가 있습니다.

6. CSS Hack 컬렉션 요약

IE 브라우저 차단(즉, IE에 표시되지 않음) *:lang(zh) select {font:12px !important;} /*FF 독점*/ 선택 : 비어 있음 {font:12px !important;} /*사파리에서 볼 수 있음*/

여기 select는 상황에 따라 변경될 수 있는 선택기입니다. 두 번째 문장은 MAC의 Safari 브라우저에만 해당됩니다.

만 IE7 식별



관련 질문 및 답변

1. css 해킹 문제

2 IE 버전 HACK에 대한 질문

3. 기본 색상을 변경하기 위해 입력 텍스트를 선택했습니다. Safari에서는 이를 지원하지 않습니다.

[관련 권장 사항]

1. PHP 중국어 웹사이트 무료 동영상 튜토리얼: "php. cn Dugu Jiujian (2) )-css 비디오 튜토리얼》


위 내용은 CSS 해킹 기술 활용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.