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.


    CSS Howto..

    How to declare JavaScript and CSS XHTML-compatible?

    Both DIV Popups Shown Instead of One

    How to get css value of an element inside array?

    How to get style of a div from javascript file

    How to let an object not take up its natural width

    How to prevent content from being pushed down on appearance of floating menu in mobile display

    How to center this element in css

    How do I convert scss to css

    My entire text in aspx page font be in arial. How to change it in css [closed]

    How to create a table using multiple span in one div using CSS

    How to reuse css styles from Telerik RadControls for ASP.NET Ajax

    How to use variable in CSS? [duplicate]

    How to center this by using css?

    How to save user's choice of theme of web pages

    how to make smooth css transition

    Hide the element, but show for that place blank

    Fontawesome: How to control height and width of stacked icons

    how to write a css that only can be visible on desktop in bootstrap

    CSS selectors: how to make element hovering change wrapper's style

    How to create a lightbox like this [closed]

    How to add CSS to struts2 tags

    How do I control the height of the main content area no matter how much text is in there?

    How to show/hide hidden HTML table rows using JavaScript (no jQuery)

    how to middle vertical-align using bootstrap input-group

    how to change css property of 2nd & 6rd DIV using jquery

    How to use CSS 3D to display child elements perpendicular to parent element?

    How to merge css in wordpress

    How to CSS Img Border on Hover without Shifting Image

    How to use css to crop images from left and right without knowing dimensions

    css how to select a class in another div