2

I have tried a CSS code which one of it are include the -webkit code and another didn't but the output are the same. I'm using Google Chrome, but when I delete the transform: rotate(45deg); transform-origin: 20% 40%; the div will not be affect by the webkit, so I don't know why do we need to add this webkit ?

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding: 10px;
border: 1px solid black;
}

#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
/*-webkit-transform: rotate(45deg);*/ /* Safari 3-8 */
/*-webkit-transform-origin: 20% 40%;*/ /* Safari 3-8 */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
</style>
</head>
<body>
   <h1>    The transform-origin Property</h1>

<div id="div1">
  <div id="div2">HELLO</div>
</div>

</body>
</html>
RBT
  • 24,161
  • 21
  • 159
  • 240
game symbol
  • 135
  • 2
  • 10

1 Answers1

5

What is in CSS is decided by W3C. Each new iteration of CSS and all of it features are developed or adopted by W3C and they hand out a specification of what should be included in any given version of CSS, see https://www.w3.org/TR/2011/REC-CSS2-20110607/ for example.

Since it might take several years to finish how a feature should work, drafts are published. Browser developers (like Google, Mozilla, and Microsoft) implement the drafts or part of them. Since each browser at this point have large freedoms in how it should be implemented, how things work can vary quite a lot between browsers (they still do even when the specification is released, but I'd argue that they do to a lesser degree than during the draft stages).

This article explains the prefixes a bit more: https://www.lifewire.com/css-vendor-prefixes-3466867

The gist of it is this; There might be a feature that W3C says they want to implement, or a browser might want to try something new. As a web developer, I don't want to break all other browsers just because I wanted to test out a new feature in one of them, I can opt to prefix my CSS property with the browser that I am targeting. The other browsers should safely ignore this CSS property, while the one I'm targeting reads it. When the feature hits "mainstream" (usually the release of a spec from W3C), omitting the prefix might not do any difference. All browsers could potentially support it and use the same syntax for it, and render it the same.

In the example of your test, using transform, is supported by all major browsers and you don't need a prefix. https://caniuse.com/#feat=transforms2d

qwelyt
  • 776
  • 9
  • 23