What is the -webkit- -moz-box- in css? [duplicate]

Question

What is the -webkit- -moz-box- in css? [duplicate]

Navigation

#1 by (1 votes)
#2 by (-1 votes)

-1

In the code below, what does the -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

asked by anonymous 06.12.2017 / 08:48

2 answers

Pusho notification Web App progressive web app Screen patterns Web design reponsive

score 1 · Answer 1

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

Typically, they are used to implement new or proprietary CSS features, prior to final clarification / definition by W3 . p>

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

For this purpose, it is generally considered good practice to first specify the vendor's previous version and then the non-prefixed version so that the non-prefixed property overrides the prefix property settings sold 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;
}

score -1 · Answer 2

Browser Prefixes.

Because there are many browsers, and each one with its specification, it is necessary to add these prefixes so that a CSS style works at all.

So we have to:

-webkit -

(Chrome, Safari, newer versions of Opera.)

-moz -

(Firefox)

-o-

(Old versions of Opera)

-ms -

(Internet Explorer)

Mozilla Reference Link