Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by cameroneckelberry2
cameroneckelberry2
8,701 Points

What exactly is a webkit?

I understand that not all browsers support certain css code. But what exactly is happening when I prefix my code with "webkit"? Why does my code suddenly work now because of this prefix?

2 Answers

John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

Hi Cameron,

Glad it makes a little more sense now :D

Okay, so when you say -webkit in your code, this is called a vendor prefix. Now you know it's correct term.

We most frequently use vendor prefixes when calling new or advanced CSS features. Because these features are not always fully supported, you can use the vendor prefix to ensure that the browser will recognise the CSS feature being used.

Luckily, as CSS gets more and more developed and the features become more defined, you will no longer need to use a vendor prefix when calling the feature. This is most commonly because the feature is no longer experimental but a well-defined, concrete part of CSS.

I don't know if the courses here cover all the vendor prefixes, but they are:

  • -webkit- (Chrome, Safari, iOS, Android)
  • -moz- (Firefox)
  • -o- (Opera)
  • -ms- (Internet Explorer)

I hope this helps a bit. I am sure there are better explanations of vendor prefixes out there, but this is the best I can do :D

Keep up the good work

cameroneckelberry2
cameroneckelberry2
8,701 Points

Thanks John that definitely helps!

John Steer-Fowler
PLUS
John Steer-Fowler
Courses Plus Student 11,734 Points
John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

Hi Cameron,

Webkit is a web browser engine that was created and also maintained by the open source community. There are some awesome web browsers created with Webkit such as Apple's Safari and Google's Chrome browsers.

If you don't know much about the open source community, think of Webkit as a building that a lot of random people all contribute their skills to build it and once it is built, anyone can use the building.

Here is a link to the Webkit Open Source Project if you need it.

Hope this helps.

Brad L'estrange
Brad L'estrange
2,085 Points

That answer is on point. ++

cameroneckelberry2
cameroneckelberry2
8,701 Points

Hey John, that definitely helps clear up some things, but would you mind shedding a little more light on what exactly is happening when I put "-webkit" in my code? Is the browser then looking for how to handle it with the webkit rather than using it's default settings? If Chrome is natively using webkit, why would I even need to specify webkit?