CSS how to solve -webkit- functions

Tags: css

Problem :

I'm currently using this code taken from the Chrome settings page and it works great on Chrome.

  -webkit-box-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-perspective: 1px;
  bottom: 0;
  display: -webkit-box;
  left: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;

The code does not work on IE and Firefox. How can I use this same code, but then on IE and Firefox?

---

Solution :

The code you posted is deprecated flexbox code.

Here's a prefixed version, generated with last 10 versions with Autoprefixer on Play:

flex-align: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-perspective: 1px;
perspective: 1px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

This doesn't include the other CSS in your original post, just the properties that need to be prefixed.