What is -Webkit-Moz-box- for in css?

Asked

Viewed 11,171 times

0

In the code below, what does the excerpts -webkit- -moz-box-?

.hh1 {
    display: block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    float: none;
    z-index: auto;
    width: auto;
    height: auto;
    position: relative;

cursor: pointer;
opacity: 1;
margin: 0;
padding: 0;
overflow: visible;
border: none;
-webkit-border-radius: 0;
border-radius: 0;
font: normal 72px/normal Arial Black, Gadget, sans-serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: 0 1px 0 rgb(204,204,204) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0 rgb(185,185,185) , 0 5px 0 rgb(170,170,170) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 5px 10px rgba(0,0,0,0.247059) , 0 10px 10px rgba(0,0,0,0.2) , 0 20px 20px rgba(0,0,0,0.14902) ;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-webkit-transform: none;
transform: none;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
html css

  • Better formulate your question, because you can’t tell if you don’t know what the excerpt does (what changes when you add -Moz-box-Sizing: content-box;) or what the Vendor is for (what is Webkit and etc.).

  • 1

    You want to know about what makes the box-Sizing or what is Webkit, Moz, ms, the...?

2 answers

2

These are the properties prefixed by the relevant rendering mechanisms ( -webkit for Chrome and Safari, -moz for Firefox, -o for the Opera, -ms for Internet Explorer).

Usually, they are used to implement new or proprietary CSS features before final clarification / definition by W3.

This allows the properties to be defined specifically for each individual browser/rendering engine so that inconsistencies between implementations are safely accounted for. Prefixes will be, over time, removed (at least in theory), since the default, final version of the property is implemented in this browser.

For this purpose, it is generally considered good practice to first specify the supplier’s previous version and then the non-conprefixed version, so that the non-conprefixed property replaces the property settings of the sold prefix once it is implemented; for example:

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

1

Prefixes of browsers.

Because there are many browsers, and each one with its specification, it is necessary to add these prefixes for a CSS style to work on all.

So we have to:

-Webkit-

(Chrome, Safari, latest versions of Opera.)

-Moz-

(Firefox)

-the-

(Old versions of Opera)

-ms-

(Internet Explorer)

Mozilla Reference Link

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.