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 do I make the dropdown menu width the same as the tab size?

    How to fix the shadow on my menu, Fiddle example shown

    How to “comment out” CSS code from JavaScript?

    How to move the search text box to the extreme right and Categories drop down to the left in html

    How to use an image more than one place in CSS

    How to use fadeIn with css property change jquery

    how to create Hollow triangle in css [duplicate]

    How to create a multiple columns with HTML CSS

    how to add multiple images to a css header?

    How to remove line break after DIV in CSS

    :hover property overriden after jquery effect, how to get it back?

    How can I set different background images for different li with same class

    How to avoid text go below the icon with css?

    How do i prevent my CSS affecting external plugins?

    Show a box with text when hovering an image

    how to make Sections in one line?

    I have 3 divs in one row, how do I get the middle div to stay an exact width while the left and right div shrink in as the screen resizes smaller?

    How to use add/subtract in css propert?

    How to make div horizontally and vertically centered without scripting?

    How to set a CSS settings only to the td of an external table but not to the internal table?

    How to make my popup window dead center no matter what width it is

    Prevent div from showing after slideUp() - jQuery

    How should I keep webpages consistent [closed]

    CSS - How do I style a select to fully occupy the td it is in

    How to change the dimensions of a div depending of a number extern to that div? jquery/css

    How to make a CSS rule which applied on a div affect another div?

    Slideshow flickering image on :hover

    How do I stop the text from moving when hovered? (background-image is involved)

    How to create 10 CSS classes, each having 10% darker gray background with LESS?

    How to make rotating shape look thick?