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 override a class using jquery

    how to decrease the height of content area for with css?

    AngularDart - How to style Component with global CSS in Google Chrome 35m (applyAuthorStyles is deprecated)

    how to change element css class runtime using javascript

    How to adjust width of a child element without adjusting the width of the parent in CSS?

    Using yepnope, how can I know if a css resource was loaded successfully?

    How to find all elements with a particular CSS style, without a JS library?

    how can i prevent to take input onkeypress anything other than alphanumeric

    How to set minimum height for a div?

    css how to force a layer to be in the back (z-index doesn't work)

    How to eliminate an annoying blue line in a border area of a hyperlink / h2 class with CSS

    How to add jQuery function to hover (show) and then click to show another menu

    how to achieve facebook mobile site buttons menu scroll effect?

    Show a
  • line like is hovered
  • How to make CSS border show on radio button click

    how to vertically align footer contents with css

    How to trigger CSS-Filter animation on Click (or Scrolling)

    How to pass parameters to css classes

    How to set cursor off screen?

    How to correct Div overlapping?

    CSS Fonts: Howto convert multiple TTF files into one file?

    How can I dynamically resize a DIV element's width to fit its text content?

    HTML/CSS How to auto-adjust the width of my container in order to show several images horizontally displayed?

    How to get CSS to E-Mails back in Magento 1.9.1

    how to create Hollow triangle in css [duplicate]

    How do you create a transparent overlay with text upon mouse hover?

    how to set equal font size in table cells for mobile device html pages

    How to set one CSS rule for two tags?

    How do I make a row of 5 responsive using percentage widths?

    How to select the first type of child of a particular CSS using CSS selector [duplicate]