What is WebKit and how is it related to CSS

Question

More recently  I have been seeing questions with the tag  webkit   Such questions usually tend to be web-based questions relating to CSS  jQuery  layouts  cross-browers compatibility issues  etc     So what is this  webkit  and how does it relate to CSS  I have also noticed a lot of -webkit-    properties in the source code for various websites  Are these two related   Update  So from the answers so far    WebKit is a HTML CSS web browser rendering engine for Safari Chrome  Are there such engines for IE Opera Firefox and what are the differences  pros and cons of using one over the other  Can I use WebKit features in Firefox for example   The ultimate question    Is WebKit supported by IE    Update 2  All of the major browsers use different rendering engines  I guess this is a big reason why there are so many cross-browser compatibility issues    So  is there some kind of project or movement to a standard rendering engine that ALL browsers will use  Will HTML5 bring an end to the cross-browser compatibility issues

User · Answer

Webkit is the rendering engine used in the popular browsers Safari and Chrome, as well as others Every browser is backed by a rendering engine to draw the HTML/CSS web page.

IE ? Trident (discontinued) Edge ? EdgeHTML (clean-up fork of Trident) Firefox ? Gecko Opera ? Presto (no longer uses Presto since Feb 2013, consider Opera = Chrome nowadays) Safari ? WebKit Chrome ? Blink (a fork of WebKit).

User · Answer

Webkit is the rendering engine used in the popular browsers Safari and Chrome  as well as others

User · Answer

WebKit is a layout engine designed to   allow web browsers to render web   pages  The WebKit engine provides a   set of classes to display web content   in windows  and implements browser   features such as following links when   clicked by the user  managing a   back-forward list  and managing a   history of pages recently visited       WebKit was originally created as a   fork of KHTML as the layout engine for   Apple s Safari  it is portable to many   other computing platforms  It is also   used in Google s Chrome Browser       WebKit s WebCore and JavaScriptCore   components are available under the GNU   Lesser General Public License  and the   rest of WebKit is available under a   BSD-style license    Source Wikipedia  For further information about layout engines you can look here

User · Answer

Webkit is the html css rendering engine used in Apple s Safari browser  and in Google s Chrome  css values prefixes with -webkit- are webkit-specific  they re usually CSS3 or other non-standardised features   to answer update 2 w3c is the body that tries to standardize these things  they write the rules  then programmers write their rendering engine to interpret those rules  So basically w3c says DIVs should work  This way  the engine-writer then uses that rule to write their code  any bugs or mis-interpretations of the rules cause the compatibility issues

User · Answer

This has been answered and accepted  but if someone is still wondering why are things a bit messed up today  you ll have to read this   http   webaim org blog user-agent-string-history   It gives a good idea of how gecko  webkit and other major rendering engines evolved and what led to the current state of messed up user-agent strings   Quoting the last paragraph for TL DR purposes      And then Google built Chrome  and Chrome used Webkit  and it was like Safari  and wanted pages built for Safari  and so pretended to be Safari  And thus Chrome used WebKit  and pretended to be Safari  and WebKit pretended to be KHTML  and KHTML pretended to be Gecko  and all browsers pretended to be Mozilla  and Chrome called itself 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  and the user agent string was a complete mess  and near useless  and everyone pretended to be everyone else  and confusion abounded

User · Answer

Webkit is a web browser rendering engine used by Safari and Chrome  among others  but these are the popular ones    The -webkit prefix on CSS selectors are properties that only this engine is intended to process  very similar to -moz properties   Many of us are hoping this goes away  for example -webkit-border-radius will be replaced by the standard border-radius and you won t need multiple rules for the same thing for multiple browsers   This is really the result of  pre-specification  features that are intended to not interfere with the standard version when it comes about   For your update    no it s not related to IE really  IE at least before 9 uses a different rendering engine called Trident

User · Answer

Webkit is an HTML rendering engine used by Chrome and Safari   It supports a number of custom CSS properties that are prefixed by -webkit-

User · Answer

Addition to what  KennyTM said    IE   Engine  Trident CSS-prefix  -ms  Edge   Engine  EdgeHTML   Blink3 CSS-prefix  -ms  Firefox   Engine  Gecko CSS-prefix  -moz  Opera   Engine  Presto   Blink1 CSS-prefix  -o  Presto  and -webkit  Blink   Safari   Engine  WebKit CSS-prefix  -webkit  Chrome   Engine  WebKit   Blink2 CSS-prefix  -webkit    1  On February 12 2013 Opera  version 15   announces they moving away from their own engine Presto to WebKit named Blink   2  On April 3 2013 Google  Chrome version 28   announces they are going to use the WebKit-based Blink engine   3  On December 6 2018 Microsoft  Microsoft Edge 79  stable  announces they are going to use the WebKit-based Blink engine

User · Answer

The ultimate question    Is WebKit supported by IE    Kind of  Check out Chrome Frame  it s a plugin for Internet Explorer that makes it use the Webkit engine  The only quirk is that you have to persuade your visitors to install the plugin   Update  Chrome Frame is no longer maintained or supported

User · Answer

A good documentation about WebEngines especially webKit and its developers you can read at  WebKit

User · Answer

-webkit- is simply a group that Chrome  Safari  Opera and iOS browsers fit into  They all have a common ancestor  so often their capabilities limitations  when it comes to running CSS and Javascript  are confined to the group   A developer will place -webkit- followed by some code  meaning that the code will only run on Chrome  Safari  Opera and iOS browsers  Here is a complete list   -webkit-  Chrome  Safari  newer versions of Opera  almost all iOS browsers  including Firefox for iOS   basically  any WebKit based browser   -moz-  Firefox   -o-  Old  pre-WebKit  versions of Opera   -ms-  Internet Explorer and Microsoft Edge

User · Answer

Even though this is an older post  there is also another method to rendering for older versions of Internet Explorer  -webkit while being a CSS Vendor Prefix  you can also download a few JS applications and place them in the bottom of the HTML s HEAD    Try using Modernizr  HTML5 Shiv and Respond js  These are amazing IE compatible polyfill scripts that use polyfills  and other resources which will help better render HTML5 elements in IE9 and Below   To use these polyfills  simply add HTML boolean logic to place them  IF the browser is less than the desire IE version  Example code is    x000D   x000D   lt head gt  x000D   lt  -- HEAD Elements -- gt    x000D   lt script src  path to modernizr js  type  text javascript  gt  lt  script gt  x000D   lt  -- if lt IE 6  gt  x000D     lt script src  path to HTMLSiv js  type  text javascript  gt  x000D     lt  script gt  x000D     lt script src  path to respond js  type  text javascript  gt  x000D     lt  script gt  x000D   lt   endif -- gt  x000D   lt  head gt  x000D   x000D   x000D

User · Answer

A common problem I have ran into as a website designer is that alot of people use IE6   No big deal usually  except in CSS I have to add multiple rendering syntax  to parse each request  per browser  It would be very nice if there was a universal rendering setup for CSS that IE can read as easily as Chrome FF Opera and webkit  The problem with IE is that if I do NOT use ALL the proper CSS styles and rendering  than my websites look and work great using every browser except IE  This can make for an unhappy  die-hard IE customer   Example is this  Let us say I need a 1px  grey border with a border-radius of 10   For Chrome and others  I use the webkit property  Now  for IE  I have to add seperate CSS styles using the simple old CSS values of  border  1px solid  E5E5E5  and  border-radius  10    A positive outcome is not always guaranteed over all IE browser versions  but for the most part this method works fine for me and many others

User · Answer

Update  So apparently  WebKit is a HTML CSS web browser rendering engine for Safari Chrome  Are there such engines for IE Opera Firefox and what are the differences  pros and cons of using one over the other  Can I use WebKit features in Firefox for example    Every browser is backed by a rendering engine to draw the HTML CSS web page    IE  rarr  Trident  discontinued  Edge   EdgeHTML  clean-up fork of Trident   Edge switched to Blink in 2019  Firefox  rarr  Gecko Opera  rarr  Presto  no longer uses Presto since Feb 2013  consider Opera   Chrome  therefore Blink nowadays  Safari  rarr  WebKit Chrome  rarr  Blink  a fork of Webkit     See Comparison of web browser engines for a list of comparisons in different areas      The ultimate question    is WebKit supported by IE    Not natively

[css] What is WebKit and how is it related to CSS?

Examples related to css

Examples related to webkit

Examples related to cross-browser

Examples related to rendering-engine