-webkit -moz-box

Okay, I’m learning CSS and we just covered the need to reset the style sheet of the browser. Looking at some examples I have found these resets most often on the websites that I work on:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Now I realize what is happening here. We are telling specific browsers to reset. However, I have noticed that “webkit” is used elsewhere in stylesheets other than simply in resets.

What is webkit / moz-box? Are these libraries? I tried to research this on my own, if you do a search for “css webkit” there is literally nothing about it.

Can someone better explain these terms for me?

These rules are for specific browser engines. Sometimes the regular rule does not work and it is necessary to call for the specific browser engine.

-webkit is used by browsers, mail clients etc developed by Apple such as Safari.
-moz refers to the browser engine by Mozilla who have developed Firefox.

This concept is known as vendor prefixes. This MDN article might shed some light -> https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix.

Thank you, that’s why I couldn’t find anything describing the specific terms, I didn’t know that they were referred to as “vendor prefixes”

So basically, these prefixes allow us to use “hacks” that are not part of the CSS “official” vocabulary, but presumably may be in the future?

So, how do we know, or how do these prefixes know how to define the non-standard css rules? Does Apple and Moz know about these terms and include them into the css of their browsers?

1 Like

Awesome question! :slight_smile:

All the big companies that create web browsers - Google, Apple, Microsoft, Mozilla are dealing a huge part in the standardization process of HTML and CSS. CSS is still evolving and when there is a high probability that a new feature will become a part of the CSS standard - these companies are aware of this fact. That is why vendor prefixes were introduced - as a way to introduce the implementation of non-standard features that might make it into the standard or of features that are part of the standard, but the current implementation of them is too tricky / hacky and is planned to be strongly refactored.

But vendor prefixes are slowly disappearing. Take a look at this note from the article I linked earlier:

Browser vendors are working to stop using vendor prefixes for experimental features. Web developers have been using them on production Web sites, despite their experimental nature. This has made it more difficult for browser vendors to ensure compatibility and to work on new features; it’s also been harmful to smaller browsers who wind up forced to add other browsers’ prefixes in order to load popular web sites.
Lately, the trend is to add experimental features behind user-controlled flags or preferences, and to create smaller specifications which can reach a stable state much more quickly.

1 Like