웹킷은 무엇이며 CSS와 어떤 관계가 있습니까?

웹킷은 무엇이며 CSS와 어떤 관계가 있습니까?

최근에는 "webkit" 태그의 질문을 보고 있습니다.이러한 질문은 일반적으로 CSS, jQuery, 레이아웃, 크로스 브라우저 호환성 문제 등과 관련된 웹 기반 질문인 경우가 많습니다.

그렇다면 이 "웹킷"은 무엇이며 CSS와 어떻게 관련이 있습니까?는 또한 것을 알아챘습니다.-webkit-...다양한 웹 사이트에 대한 소스 코드의 속성입니다.이 두 개가 관련이 있습니까?

갱신하다

그럼 지금까지 나온 답을 보면...WebKit는 Safari/Chrome용 HTML/CSS 웹 브라우저 렌더링 엔진입니다.IE/Opera/Firefox용 엔진이 있습니까? 다른 엔진을 사용할 때의 차이점, 장단점은 무엇입니까?예를 들어 Firefox에서 WebKit 기능을 사용할 수 있습니까?

궁극적인 질문은...IE에서 WebKit를 지원합니까?

업데이트 2

모든 주요 브라우저는 서로 다른 렌더링 엔진을 사용합니다.이것이 브라우저 간 호환성 문제가 많은 큰 이유라고 생각합니다!

그렇다면, 모든 브라우저가 사용할 표준 렌더링 엔진으로의 프로젝트나 이동이 있습니까?HTML5가 브라우저 간 호환성 문제를 끝낼 수 있을까요?

업데이트: WebKit는 Safari/Chrome용 HTML/CSS 웹 브라우저 렌더링 엔진입니다.IE/Opera/Firefox용 엔진이 있습니까? 다른 엔진을 사용할 때의 차이점, 장단점은 무엇입니까?예를 들어 Firefox에서 WebKit 기능을 사용할 수 있습니까?

모든 브라우저는 HTML/CSS 웹 페이지를 그리기 위해 렌더링 엔진을 지원합니다.

• IE → 트라이던트(계속)
• 에지 → 에지HTML (Trident의 정리 포크) (Edge가 2019년 Blink로 전환됨)
• 파이어폭스 → 게코
• Opera → Presto (2013년 2월 이후 Presto를 더 이상 사용하지 않음, Opera = Chrome을 고려하므로 현재 Blink)
• Safari → WebKit
• Chrome → Blink(웹킷의 포크).

다른 영역의 비교 목록은 웹 브라우저 엔진 비교를 참조하십시오.

궁극적인 질문은...IE에서 WebKit를 지원합니까?

원주민이 아닙니다.

@케니에 추가.TM에서 말한 내용:

• IE
  • 엔진: 트라이던트
  • CSS CSS 접두사:-ms
• 가장자리
  • 엔진: EdgeHTML → 깜박임³
  • CSS CSS 접두사:-ms
• 파이어폭스
  • 엔진: 게코
  • CSS CSS 접두사:-moz
• 오페라
  • 엔진: Presto → 깜박임¹
  • CSS CSS 접두사:-o및 (프레토스) 및-webkit깜빡)
• 사파리
  • 엔진: WebKit
  • CSS CSS 접두사:-webkit
• 크롬
  • 엔진: WebKit → 깜박임²
  • CSS CSS 접두사:-webkit

¹⁾ 2013년 2월 12일 오페라(버전 15+)는 자체 엔진 Presto에서 Blink라는 이름의 WebKit로 전환했다고 발표합니다.

²⁾ 2013년 4월 3일 Google(Chrome 버전 28+)은 웹킷 기반 Blink 엔진을 사용할 것이라고 발표했습니다.

³⁾ 2018년 12월 6일 마이크로소프트(Microsoft Edge 79+ 안정적)는 웹킷 기반 Blink 엔진을 사용할 것이라고 발표했습니다.

Webkit는 Safari와 Chrome(특히 인기 있는 것들)에서 사용하는 웹 브라우저 렌더링 엔진입니다.

그-webkitCSS 선택기의 접두사는 이 엔진만 처리하도록 의도된 속성이며, 매우 유사합니다.-moz특성.예를 들어, 우리 중 많은 사람들은 이것이 사라지기를 바라고 있습니다.-webkit-border-radius 표로대것입다니될체로 될 입니다.border-radius여러 브라우저에서 동일한 작업에 대해 여러 규칙이 필요하지 않습니다.이것은 실제로 표준 버전을 간섭하지 않기 위한 "사전 사양" 기능의 결과입니다.

업데이트: ...아니요, IE와 관련이 없습니다. 적어도 9시 이전의 IE는 트라이던트라는 다른 렌더링 엔진을 사용합니다.

이것은 답변이 되었고 받아들여졌지만, 만약 누군가가 여전히 왜 오늘날 상황이 약간 엉망인지 궁금해한다면, 당신은 이것을 읽어야 할 것입니다.

http://webaim.org/blog/user-agent-string-history/

그것은 도마뱀붙이, 웹킷 및 기타 주요 렌더링 엔진이 어떻게 진화했는지, 그리고 무엇이 사용자 에이전트 문자열을 엉망으로 만들었는지에 대한 좋은 아이디어를 제공합니다.

TL;DR 목적으로 마지막 단락 인용:

그리고 구글은 크롬을 만들었고, 크롬은 웹킷을 사용했습니다. 사파리처럼 사파리를 위해 만들어진 페이지를 원했습니다. 그래서 사파리인 척했죠.은 웹킷을, , , , 를 모질라인 척했고, KHTML인 척, KHTML인 척했습니다.Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13그리고 사용자 에이전트 문자열은 완전히 엉망이었고 거의 쓸모가 없었습니다. 모두가 다른 사람인 척했고, 혼란이 가득했습니다.

-webkit-Chrome, Safari, Opera 및 iOS 브라우저가 적합한 그룹입니다.이들은 모두 공통 조상을 가지고 있기 때문에 종종 CSS와 Javascript를 실행할 때 그들의 능력/제한이 그룹으로 제한됩니다.

는 개자가배니다합치를 배치할 입니다.-webkit-코드 뒤에 일부 코드가 표시됩니다. 즉, 코드는 Chrome, Safari, Opera 및 iOS 브라우저에서만 실행됩니다.전체 목록은 다음과 같습니다.

-webkit- Safari, 의 Opera, 브라우저Chrome, Safari, 용최신의함전포버저저라브우우거라브의기든기반모본웹로든킷적으모os▁web▁(,)ioschkit(▁firefox▁browser함)

-moz- (불여우)

-o- 버전의 (오페라 버전, 웹킷)

-ms- 및 EdgeInternet Explorer 및 Microsoft Edge)

궁극적인 질문은...IE에서 WebKit를 지원합니까?

약간.Chrome Frame을 확인해 보십시오. 이 플러그인은 웹킷 엔진을 사용하도록 하는 Internet Explorer용 플러그인입니다.유일한 장점은 플러그인을 설치하도록 방문자를 설득해야 한다는 것입니다.

갱신하다

Chrome Frame은 더 이상 유지보수 또는 지원되지 않습니다...

WebKit는 웹 브라우저가 웹 페이지를 렌더링할 수 있도록 설계된 레이아웃 엔진입니다.WebKit 엔진은 웹 콘텐츠를 창에 표시할 수 있는 클래스 집합을 제공하며, 사용자가 클릭할 때 링크를 따라가기, 뒤로 감기 목록 관리, 최근 방문한 페이지 기록 관리와 같은 브라우저 기능을 구현합니다.

WebKit는 원래 애플 사파리의 레이아웃 엔진으로 KHTML의 포크로 개발되었으며 다른 많은 컴퓨팅 플랫폼에 이식할 수 있습니다.구글의 크롬 브라우저에서도 사용됩니다.

WebKit의 WebCore 및 JavaScriptCore 구성 요소는 GNU Lesser General Public License에 따라 사용할 수 있으며, 나머지 WebKit은 BSD 스타일 라이센스로 사용할 수 있습니다.

출처 위키백과

레이아웃 엔진에 대한 자세한 내용은 여기를 참조하십시오.

웹킷은 크롬과 사파리에서 사용하는 HTML 렌더링 엔진입니다.

같접 두로추가여는사러용지자정다지니원 CSS성합속을로 가 붙는 가지 지정 CSS 합니다.-webkit-.

Webkit는 Apple의 Safari 브라우저와 Google의 Chrome에서 사용되는 html/css 렌더링 엔진입니다. -webkit-를 사용하는 CSS 값 접두사는 웹킷에 따라 다르며, 일반적으로 CSS3 또는 기타 비표준 기능입니다.

업데이트 2w3c에 응답하는 것은 이러한 것들을 표준화하려고 시도하고, 그들은 규칙을 작성하고, 프로그래머들은 그들의 렌더링 엔진을 작성하여 그 규칙들을 해석하는 본문입니다.따라서 기본적으로 w3c는 DIV가 "이런 식으로" 작동해야 한다고 말하고 엔진 작성기는 그 규칙을 사용하여 코드를 작성합니다. 버그나 규칙의 잘못된 해석이 호환성 문제를 야기합니다.

Webkit는 인기 있는 브라우저 Safari 및 Chrome 및 기타 브라우저에서 사용되는 렌더링 엔진입니다.

제가 웹사이트 디자이너로서 마주친 공통적인 문제는 많은 사람들이 IE6+를 사용한다는 것입니다.일반적으로 CSS를 제외하고는 브라우저별로 각 요청을 구문 분석하기 위해 다중 렌더링 구문'을 추가해야 합니다.IE가 크롬/FF/오페라와 웹킷처럼 쉽게 읽을 수 있는 CSS 범용 렌더링 설정이 있다면 매우 좋을 것 같습니다.IE의 문제는 제가 모든 적절한 CSS 스타일과 렌더링을 사용하지 않는다면, 제 웹사이트는 IE를 제외한 모든 브라우저를 사용하여 멋지게 보이고 작동한다는 것입니다.이는 불행하고 완고한 IE 고객을 만들 수 있습니다.

예는 다음과 같습니다.경계 반경이 10%인 1px의 회색 테두리가 필요합니다.Chrome 등의 경우 webkit 속성을 사용합니다.이제 IE의 경우 "경계: 1px 솔리드 #E5E5"와 "경계-반경: 10%"의 단순한 오래된 CSS 값을 사용하여 별도의 CSS 스타일을 추가해야 합니다.모든 IE 브라우저 버전에서 긍정적인 결과가 항상 보장되는 것은 아니지만, 대부분의 경우 이 방법은 저와 다른 많은 사람들에게 잘 작동합니다.

이전 게시물이지만 이전 버전의 Internet Explorer(인터넷 익스플로러)를 렌더링하는 다른 방법도 있습니다.-webkit은 CSS 벤더 프레픽스이면서 몇 개의 JS 어플리케이션을 다운로드하여 HTML의 HEAD 하단에 배치할 수도 있습니다.

Modernizr, HTML5 Shiv 및 Response.js를 사용해 보십시오.이것들은 IE9 이하에서 HTML5 요소를 더 잘 렌더링하는 데 도움이 될 폴리필 및 기타 리소스를 사용하는 IE 호환성이 뛰어난 폴리필 스크립트입니다.

이러한 폴리필을 사용하려면 브라우저가 원하는 IE 버전보다 낮은 경우 HTML 부울 논리를 추가하여 배치하기만 하면 됩니다.코드 예제:

<head>
<!-- HEAD Elements -->  
<script src="path/to/modernizr.js" type="text/javascript"></script>
<!--[if lt IE 6]>
  <script src="path/to/HTMLSiv.js" type="text/javascript">
  </script>
  <script src="path/to/respond.js" type="text/javascript">
  </script>
<![endif]-->
</head>

Webkit는 인기 있는 브라우저 Safari 및 Chrome 및 기타 브라우저에서 사용되는 렌더링 엔진입니다. 모든 브라우저는 HTML/CSS 웹 페이지를 그리기 위해 렌더링 엔진을 지원합니다.

IE → 트라이던트(계속) 에지 → 에지HTML (Trident의 정리 포크) Firefox → Gecko Opera → Presto (2013년 2월 이후 더 이상 Presto를 사용하지 않으며, 현재 Opera = Chrome을 고려함) Safari → WebKit Chrome → Blink (WebKit의 포크)

에 대한 좋은 문서WebEngines특히.webKit웹킷에서 읽을 수 있는 개발자:

언급URL : https://stackoverflow.com/questions/3468154/what-is-webkit-and-how-is-it-related-to-css