What are -moz- and -webkit-? [duplicate]

by

These are the vendor-prefixed properties offered by the relevant rendering engines (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer). Typically they’re used to implement new, or proprietary CSS features, prior to final clarification/definition by the W3.

This allows properties to be set specific to each individual browser/rendering engine in order for inconsistencies between implementations to be safely accounted for. The prefixes will, over time, be removed (at least in theory) as the unprefixed, the final version, of the property is implemented in that browser.

To that end it’s usually considered good practice to specify the vendor-prefixed version first and then the non-prefixed version, in order that the non-prefixed property will override the vendor-prefixed property-settings once it’s implemented; for example:

.elementClass {
    -moz-border-radius: 2em;
    -ms-border-radius: 2em;
    -o-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
}

Specifically, to address the CSS in your question, the lines you quote:

-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;

Specify the column-count, column-gap and column-fill properties for Webkit browsers and Firefox.

References:

More Related Contents:

  1. Chrome / Safari not filling 100% height of flex parent
  2. How can I force WebKit to redraw/repaint to propagate style changes?
  3. How to remove the border highlight on an input text element
  4. How to style HTML5 range input to have different color before and after slider?
  5. css3 transition animation on load?
  6. css z-index lost after webkit transform translate3d
  7. What is WebKit and how is it related to CSS?
  8. Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink
  9. Disable webkit’s spin buttons on input type=”number”?
  10. CSS transition shorthand with multiple properties?
  11. WebKit: Blurry text with css scale + translate3d
  12. Fixed element disappears in Chrome
  13. CSS endless rotation animation
  14. How to prevent Webkit text rendering change during CSS transition
  15. Webkit CSS to control the box around the color in an input[type=color]?
  16. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  17. Webkit backface visibility not working
  18. ‘Inverted’ border-radius possible? [duplicate]
  19. How to force re-render after a WebKit 3D transform in Safari
  20. Why does stacking order change on webkit filter hover?
  21. CSS “outline” different behavior behavior on Webkit & Gecko
  22. Wonky text anti-aliasing when rotating with webkit-transform in Chrome
  23. Delay mouseout/hover with CSS3 transitions
  24. WebKit CSS content Unicode bug?
  25. Apply webkit scrollbar style to specified element
  26. How do I remove all default Webkit search field styling?
  27. Tint image using CSS without overlay
  28. webkit transform blocking link
  29. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?
  30. using a div to blur an image behind it? [duplicate]

Leave a Comment