views:

195

answers:

9

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 Safar/Chrome. Are there such engines for IE/Opera/Firefox... and what are the differences, pros/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

Thank you for your answers so far. To follow up on what I have learned so far... 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?

Thanks!

Thank you everyone for taking the time to answer my questions. I learned a lot from this short discussion, and there is a lot that I need to read over to catch up on what I've missed out on recently... apparently IE9 is about to be released (beta)... time to read up on these rendering engines :)

+1  A: 

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

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

SLaks
ahh that explains it. so can `-webkit-` be used in like Firefox for advanced rendering of CSS3 features?
Hristo
Wow, you copy/pasted the same comment nearly everywhere!
Gareth
@Gareth... what's your point?
Hristo
+1  A: 

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

recursive
+5  A: 

Webkit is a web browser rendering 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.

Nick Craver
@SLaks - woops you're right, thanks and updated :)
Nick Craver
So can `-webkit-` be used in like Firefox for advanced rendering of CSS3 features?
Hristo
No, Firefox uses a rendering engine called Gecko
Gareth
@Hristo - Firefox uses some similar properties but they're called `-moz` (for mozilla), it'll ignore `-webkit` roles when parsing styles :)
Nick Craver
@Nick... ahhh sweet! +1. Thanks for the explanation!
Hristo
+1  A: 

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.

JKirchartz
+2  A: 

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

Sotiris
@Sotiris... thanks for the references!
Hristo
+4  A: 
KennyTM
@Kenny... 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
@Hristo: Depending on which style you need.
KennyTM
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
@Hristo there are some tricks to make IE show css3. Look at http://css3pie.com/
Sotiris
@Sotiris... cool! great resource!
Hristo
+1  A: 

Addition to what @KennyTM said:

  • IE
    • Engine: Trident
    • CSS-prefix: -msie
  • Firefox
    • Engine: Gecko
    • CSS-prefix: -moz
  • Opera
    • Engine: Presto
    • CSS-prefix: -o
  • Safari & Chrome
    • Engine: WebKit
    • CSS-prefix: -webkit
jerone
@jerone... 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
@Hristo Yes, it doesn't recognize any of those as valid CSS, so it ignores them
JKirchartz
@JKirchartz... perfect! Thanks!
Hristo
JKirchartz is correct. The others browsers will ignore each others css-prefix.
jerone
+1  A: 

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.

edgerunner
A: 

Your question is doesn't make sense. It is like asking is Ford supported by Honda. Presto is the shizzle!

Nic Bell
I disagree. If one didn't know what a Ford was, but did know what Honda is, it is a valid question. Also... I wasn't aware this site was meant to judge people, rather help out one another and spread knowledge throughout the community.
Hristo
Yeah true, though my sarcastic analogy was actually educational as it clearly indicated the relationship between the 2 products/rendering-engines. Though I totally agree -1 for tone, even though my blunt delivery will probably be more easily understood for someone that doesn't know what a render-engine is.
Nic Bell