웹 페이지의 Doctype을 지정하기 위한 CSS 해킹 방법 요약
- 高洛峰원래의
- 2017-02-13 14:04:421543검색
WD(웹 디자이너)가 되려면 먼저 IE6, IE7 및 Firefox와 같은 여러 브라우저를 제공해야 한다는 것을 모두 알고 있습니다. 일반 페이지는 IE6, IE7 및 Firefox에서만 정상적으로 작동해야 합니다.
각 브라우저에는 고유한 기능 세트가 있으며 여기에서는 정상적으로 실행되지만 다른 브라우저에서는 제대로 실행되지 않는 경우가 많습니다. 그래서 WD는 동쪽을 철거하고 서쪽을 수리했고, 마침내 여러 브라우저에서 정상적으로 작동했습니다. 그 결과, 제품 관리자는 새로운 요구 사항이 생겼고 여기저기에 변경 사항을 적용해야 했습니다. 그 결과 마침내 속았던 종이 프레임이 갑자기 무너지고 WD는 다시 극도로 바빠졌습니다. 제가 이렇게 말하는 이유는 이것이 저의 경험이기 때문입니다.
일반적으로 WD는 다양한 브라우저에서 제대로 작동하도록 하기 위해 항상 많은 CSS 해킹 기술을 수집합니다. 온라인으로 검색해 보면 많이 있습니다.
그런데 우선 WD는 CSS 해킹이 왜 필요한지, 1,000개의 브라우저가 있다면 1,000개의 브라우저의 Hack 기술을 기억해야 하는지에 대한 근본적인 질문을 파악하지 못했습니다.
사실 CSS 해킹은 어느 정도는 논점으로 가져갈 수 없는 일입니다. CSS 해킹에는 단순히 브라우저 버그를 이용하는 기술이 많이 있습니다. 예를 들어 IE와 Firefox를 구별하기 위해 _class{….} 를 사용하는 것이 일반적입니다. 논리적으로 말하면 _class는 불법적인 태그 지정 방법입니다. CSS 해킹의 출현은 WD의 최후의 수단입니다. WD의 일상 작업은 미친 CSS 해킹이 아닙니다.
사실 브라우저는 너무 많아서 마음대로 정의할 수 없습니다. .마크를 정의합니다. 사람들은 표준적인 세계에 익숙해져 있고, 웹 세계에도 일련의 표준이 존재합니다. 브라우저 역시 웹 표준과 호환되기 위해 열심히 노력하고 있습니다. 그러나 일부 브라우저는 일찍 데뷔했고, 나중에 등장한 웹 표준은 그들의 영향을 받아 탄생했다고 할 수 있습니다. 그 당시에 아주 잘하신 분도 계시는데, 그는 혁신을 많이 했고 웹 표준을 마음에 두지 않았습니다. 게다가 표준 자체도 지속적으로 업데이트되고 있습니다. 따라서 일반적으로 모든 브라우저 제품 시스템은 웹 표준에 크게 신경 쓰지 않는 기간을 거쳤으며 나중에 모두가 더 이상 불가능하다는 것을 깨달았고 모두가 준수할 일련의 표준을 확립했습니다. 그런데 예전에는 각 회사마다 자체적으로 만든 소소한 규칙과 규정이 있었는데, 기준에 맞지 않으면 어떻게 해야 할까요?
그래서 이 사람들은 표준 모드와 이상한 방법을 생각해 냈습니다. 방법. "거의 표준 모드"라는 또 다른 것이 있습니다. 거의 표준입니다. 너무 이상해서 거의 기절할 뻔했습니다. 걱정하지 말고 천천히 내 말을 들어보세요.
이 사장님들이 모여서 다양한 기준을 세웠고, 앞으로는 다들 이 기준에 따라 웹페이지를 해석하게 될 거라고 하지 않았나요? 당신이 만드는 웹 페이지가 이 표준에 따라 해석될 수 있다면, 태그 doctype을 사용하여 웹 표준에 따라 해석될 수 있음을 나타내십시오. 이것이 표준 모드입니다.
그렇다면 과거 여러 회사에서 생산해온 샤오주주의 제품이 기준에 맞지 않는다면 어떻게 해야 할까요? 당장에 다 버릴 수는 없겠죠? 소프트웨어에는 하위 호환성이라는 일련의 원칙이 있지 않을까요? 이상한 모드에서는 각 브라우저가 이전 버전의 브라우저 작동을 시뮬레이션하여 이전 페이지가 작동하지 않는 것을 방지합니다. 웹페이지가 문서 유형을 지정하지 않으면 브라우저는 일반적으로 이전 페이지가 작동하지 않도록 이상한 모드로 작동합니다.
이 두 모드의 차이점을 보여주는 가장 눈에 띄는 예는 Windows에서 IE의 독점 박스 모델입니다. IE 6이 나왔을 때 표준 모드에서는 올바른 상자 모델이 사용되었고 이상한 모드에서는 이전 독점 상자 모델이 사용되었습니다. IE 5 및 이전 버전과의 호환성을 유지하기 위해 Opera 7 및 이후 버전도 이상한 모드에서 결함이 있는 IE 박스 모델을 사용합니다.
Mozilla와 Safari에는 "거의 표준 모드"라는 세 번째 모드도 있는데, 이는 테이블 처리 방식의 약간의 차이점을 제외하면 표준과 동일합니다.
CSS 해킹 기법을 많이 버릴 수 있는 것도 이 때문이다. 일부 책에서는 IE6과 Firefox의 박스 모델(또는 어떤 곳에서는 박스 모델)이 일치하지 않는다고 말합니다. 따라서 다음 해킹을 수행해야 합니다.
p{
width:100px
*width; :95px ;
}
이런 종류의 책은 정말 오해의 소지가 있습니다. doctype이 올바르게 지정되는 한 브라우저 해석의 이러한 차이는 사라지고 표준을 따를 수 있기 때문입니다.
이 모드는 HTML 파일 시작 부분에 있는 DOCTYPE 필드에 의해 지정됩니다. 가장 일반적인 것은 다음과 같습니다:
HTML 4.01 Transitional:
코드는 다음과 같습니다:
< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 프레임셋
코드는 다음과 같습니다. "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1// EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
>
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">
W3C//DTD XHTML 1.0 프레임셋//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-frameset.dtd">
코드 복사
코드는 다음과 같습니다.