What is WebKit and how is it related to CSS?

css webkit cross-browser rendering-engine
Hristo picture Hristo · Aug 12, 2010 · Viewed 284.8k times · Source

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?

Answer

kennytm picture kennytm · Aug 12, 2010

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.

Related questions

How to remove the border highlight on an input text element

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right. <…

Read More
Custom CSS Scrollbar for Firefox

I want to customize a scrollbar with CSS. I use this WebKit CSS code, which works well for Safari and Chrome: ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color: #C2D2E4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0A4C95; } How can …

Read More
CSS transition shorthand with multiple properties?

I can't seem to find the correct syntax for the CSS transition shorthand with multiple properties. This doesn't do anything: .element { -webkit-transition: height .5s, opacity .5s .5s; -moz-transition: height .5s, opacity .5s .5s; -ms-transition: height .5s, opacity .5s .5s; transition: …

Read More