WebKit이란 무엇이며 CSS와 어떤 관련이 있습니까?

최근에는 "webkit"이라는 태그가있는 질문이있었습니다. 이러한 질문은 일반적으로 CSS, jQuery, 레이아웃, 브라우저 간 호환성 문제 등과 관련된 웹 기반 질문입니다.

그렇다면이 "웹킷"은 무엇이며 CSS와 어떤 관련이 있습니까? 또한 -webkit-...다양한 웹 사이트의 소스 코드에서 많은 속성을 발견했습니다 . 이 두 가지는 관련이 있습니까?

최신 정보

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

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

업데이트 2

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

그렇다면 모든 브라우저에서 사용할 표준 렌더링 엔진으로의 프로젝트 나 움직임이 있습니까? HTML5가 크로스 브라우저 호환성 문제를 종식시킬 수 있습니까?

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

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

• IE → 트라이던트 (단종)
• 가장자리 → EdgeHTML (트라이던트 정리 포크)( 2019 년 엣지가 깜박임 으로 전환됨 )
• Firefox → 게코
• 오페라 → 프레스토(더 이상 프레스토 2 월 2013 년 이후 사용하므로, 오페라 = 크롬을 고려하지 깜박 현재)
• 사파리 → WebKit
• Chrome → 깜박임 ( 웹킷 포크 ).

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

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

기본적으로는 아닙니다.

@KennyTM의 말에 추가 :

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

¹⁾ 2013 년 2 월 12 일 Opera (버전 15 이상) 는 자신의 엔진 Presto에서 Blink 라는 WebKit으로 이동 한다고 발표했습니다 .

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

³⁾ 2018 년 12 월 6 일 Microsoft (Microsoft Edge 79 이상) 는 WebKit 기반 Blink 엔진 을 사용할 것이라고 발표했습니다 .

Webkit은 Safari와 Chrome에서 사용되는 웹 브라우저 렌더링 엔진입니다 (그러나 그중에서도 인기가 있습니다).

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

업데이트의 경우 ... ... IE와 관련이 없으며 적어도 9 이전의 IE는 Trident 라는 다른 렌더링 엔진을 사용합니다 .

이것은 답변을 받았지만 받아 들여졌지만 누군가가 왜 오늘 일이 조금 엉망인지 궁금해하는 경우 다음을 읽어야합니다.

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

gecko, 웹킷 및 기타 주요 렌더링 엔진이 어떻게 발전했는지, 그리고 혼란스러운 사용자 에이전트 문자열의 현재 상태로 이어진 이유에 대한 좋은 아이디어를 제공합니다.

TL; DR 목적을 위해 마지막 단락 인용 :

그런 다음 Google은 Chrome을 구축했으며 Chrome은 Webkit을 사용했으며 Safari와 비슷했으며 Safari 용 페이지를 구축하여 Safari로 가장했습니다. 따라서 Chrome은 WebKit을 사용하여 Safari로, WebKit은 KHTML로, KHTML은 Gecko로, 모든 브라우저는 Mozilla로, Chrome은 자체적으로 호출 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- (Chrome, Safari, 최신 버전의 Opera, 거의 모든 iOS 브라우저 (iOS 용 Firefox 포함), 기본적으로 모든 WebKit 기반 브라우저)

-moz- (파이어 폭스)

-o- (오래된 WebKit, Opera 버전)

-ms- (Internet Explorer 및 Microsoft Edge)

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

거의. Chrome 프레임을 확인하십시오 . 웹킷 엔진을 사용하는 Internet Explorer 용 플러그인입니다. 유일한 단점은 플러그인을 설치하기 위해 방문자를 설득해야한다는 것입니다.

최신 정보

Chrome 프레임이 더 이상 유지되거나 지원되지 않습니다…

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

WebKit은 원래 Apple의 Safari 용 레이아웃 엔진으로 KHTML 포크로 만들어졌습니다. 다른 많은 컴퓨팅 플랫폼에도 이식 가능합니다. Google의 Chrome 브라우저에서도 사용됩니다.

WebKit의 WebCore 및 JavaScriptCore 구성 요소는 GNU Lesser General Public License에 따라 제공되고 나머지 WebKit은 BSD 스타일 라이센스에 따라 제공됩니다.

소스 위키 백과

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

Webkit은 Chrome 및 Safari에서 사용하는 HTML 렌더링 엔진입니다.

접두사가 붙은 많은 사용자 정의 CSS 속성을 지원합니다 -webkit-.

Webkit은 널리 사용되는 브라우저 Safari 및 Chrome뿐만 아니라 다른 브라우저에서도 사용되는 렌더링 엔진입니다.

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

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

웹 사이트 디자이너로서 겪었던 일반적인 문제는 많은 사람들이 IE6 +를 사용한다는 것입니다. CSS를 제외하고는 큰 문제가 없습니다. 브라우저마다 각 요청을 구문 분석하기 위해 여러 렌더링 구문을 추가해야합니다. IE가 Chrome / FF / Opera 및 웹킷처럼 쉽게 읽을 수있는 CSS 용 범용 렌더링 설정이 있다면 매우 좋을 것입니다. IE의 문제는 올바른 CSS 스타일과 렌더링을 모두 사용하지 않으면 내 웹 사이트가 IE를 제외한 모든 브라우저를 사용하여 모양과 효과가 우수하다는 것입니다. 이로 인해 불행하고 힘든 IE 고객이 될 수 있습니다.

예를 들면 다음과 같습니다. 경계 반경이 10 % 인 1px 회색 테두리가 필요하다고 가정 해 봅시다. Chrome 및 기타의 경우 웹킷 속성을 사용합니다. 이제 IE의 경우 "border : 1px solid # E5E5E5"및 "border-radius : 10 %"의 간단한 이전 CSS 값을 사용하여 별도의 CSS 스타일을 추가해야합니다. 긍정적 인 결과가 모든 IE 브라우저 버전에서 항상 보장되는 것은 아니지만 대부분이 방법은 저와 다른 많은 사람들에게 잘 작동합니다.

이전 게시물이지만 이전 버전의 Internet Explorer를 렌더링하는 다른 방법도 있습니다. CSS 공급 업체 접두사 인 -webkit을 사용하면 몇 가지 JS 응용 프로그램을 다운로드하여 HTML HEAD의 맨 아래에 배치 할 수도 있습니다.

Modernizr, HTML5 Shiv 및 Respond.js를 사용해보십시오. 이들은 polyfill을 사용하는 놀라운 IE 호환 polyfill 스크립트와 IE9 및 이하에서 HTML5 요소를 더 잘 렌더링하는 데 도움이되는 기타 리소스입니다.

이러한 폴리 필을 사용하려면 브라우저가 원하는 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 에서 WebEngines특히 webKit읽을 수있는 개발자 및 개발자 에 대한 유용한 문서

Webkit은 널리 사용되는 브라우저 Safari 및 Chrome뿐만 아니라 다른 브라우저에서도 사용되는 렌더링 엔진입니다. 모든 브라우저에는 렌더링 엔진이 지원되어 HTML / CSS 웹 페이지를 그립니다.

IE → 트라이던트 (단종) Edge → EdgeHTML (트리 던트 정리 포크) Firefox → Gecko Opera → Presto .