373

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?

7
  • 4
    Your final question is effectively "Can IE be told to render things it hasn't been programmed to render?", and the answer is no
    – Gareth
    Aug 12, 2010 at 13:45
  • firefox' rendering engine is called gecko. ie uses their own pripietary engine.
    – troelskn
    Aug 12, 2010 at 13:48
  • @Gareth... thanks. that's exactly what I was hoping NOT to hear :) In this case, I hope IE can start being compatible soon... and that people stop using IE6!
    – Hristo
    Aug 12, 2010 at 13:53
  • 6
    Check out css3pie.com for some webkit functionality added to IE through CSS.
    – Kenoyer130
    Aug 12, 2010 at 13:53
  • WebKit is the baddest HTML rendering engine ever, bar none. Not bad meaning bad, to quote NWA, but bad meaning good. Sep 20, 2010 at 22:31

14 Answers 14

240

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 → Trident (discontinued)
  • Edge → EdgeHTML (clean-up fork of Trident) (Edge switched to Blink in 2019)
  • Firefox → Gecko
  • Opera → Presto (no longer uses Presto since Feb 2013, consider Opera = Chrome, therefore Blink nowadays)
  • Safari → WebKit
  • Chrome → 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.

5
  • .. thanks for addressing my update. So if IE doesn't support WebKit, and I know it doesn't support the -moz- properties... how can I make IE accept CSS3 styles?
    – Hristo
    Aug 12, 2010 at 13:41
  • @Hristo: Depending on which style you need.
    – kennytm
    Aug 12, 2010 at 13:41
  • I didn't have any particular in mind... I just know that IE sucks when it comes to cross-browser compatibility and I was wondering if WebKit was a way to fix that issue.
    – Hristo
    Aug 12, 2010 at 13:42
  • 3
    should be updated. Chrome dev's have forked webkit, and opera isn't using presto any longer
    – Richard
    Sep 9, 2014 at 13:42
  • 1
    EdgeHTML has now been discontinued also.
    – DreamTeK
    Jan 15, 2019 at 13:49
153

Addition to what @KennyTM said:

  • IE
  • Edge
  • Firefox
    • Engine: Gecko
    • CSS-prefix: -moz
  • Opera
    • Engine: PrestoBlink1
    • CSS-prefix: -o (Presto) and -webkit (Blink)
  • Safari
    • Engine: WebKit
    • CSS-prefix: -webkit
  • Chrome

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.

4
  • 3
    .. that is great info! So would the different rendering engines ignore these prefixes? i.e. would Firefox ignore -msie, -o, -webkit; would Webkit ignore -moz, -o, -msie; etc...?
    – Hristo
    Aug 12, 2010 at 13:49
  • 1
    @Hristo Yes, it doesn't recognize any of those as valid CSS, so it ignores them
    – JKirchartz
    Aug 12, 2010 at 13:54
  • 2
    JKirchartz is correct. The others browsers will ignore each others css-prefix.
    – jerone
    Aug 12, 2010 at 17:47
  • 2
    And that WebKit that Opera is moving to is the Chromium variety, which itself is turning into Blink.
    – BoltClock
    Apr 28, 2013 at 12:36
47

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.

3
  • 2
    So can -webkit- be used in like Firefox for advanced rendering of CSS3 features?
    – Hristo
    Aug 12, 2010 at 13:39
  • 1
    No, Firefox uses a rendering engine called Gecko
    – Gareth
    Aug 12, 2010 at 13:43
  • 2
    @Hristo - Firefox uses some similar properties but they're called -moz (for mozilla), it'll ignore -webkit roles when parsing styles :) Aug 12, 2010 at 13:44
41

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.

1
  • 1
    Visit the link above, its informative and final climax is hilarious. Dec 21, 2016 at 5:48
11

-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)

9

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…

3
  • 2
    Chrome Frame is no longer supported. Jun 27, 2018 at 10:45
  • Yes. It was a stop-gap solution at best. 8 years out, it is time that IE gives way to proper compliant browsers.
    – edgerunner
    Jun 27, 2018 at 11:05
  • Microsoft wants IE to go away. It is provided with Windows 10 for the purpose of backward compatibility. Feb 13, 2019 at 17:27
8

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

0
7

Webkit is an HTML rendering engine used by Chrome and Safari.

It supports a number of custom CSS properties that are prefixed by -webkit-.

0
6

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.

0
5

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

4

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.

3

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:

<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>

2

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).

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.