CSS Unused CSS Stages Flexbox and Multi-Column Layout Multi-Column Layout

Paul Carmelo Cunanan
PRO
Paul Carmelo Cunanan
Pro Student 8,862 Points

-Webkit

What does -webkit mean? and what does it do?

1 Answer

-webkit- is one of many CSS “prefixes.”

Prefixes are used by web developers and browser vendors to test new CSS features. Many of the major modern web browsers have some prefixed CSS support, such as Firefox, Internet Explorer, Chrome, and Safari.

For example, here’s how you’d ensure a box-shadow displayed across different browsers:

element {
  /* -webkit- for Chrome, Safari, iOS, Android, Blackberry */
  -webkit-box-shadow: 0 1px 1px black;
  /* -moz- for Firefox */
  -moz-box-shadow: 0 1px 1px black;
  /* -ms- for Internet Explorer */
  -ms-box-shadow: 0 1px 1px black;
  /* -o- for Opera before version 15 */
  -o-box-shadow: 0 1px 1px black;

  /* And finally, no prefix for modern browsers */
  box-shadow: 0 1px 1px black;
}

Browser vendors—the people making Chrome, Firefox, etc.—encourage people not to publish prefixed CSS properties to live websites, because they’re for special features of CSS that may not be supported in the future, but most of the time, these features make it all the way to unprefixed support.