Display webkit components on Mozilla Firefox

I am trying to develop a website using webkit functions in my CSS. The code below works fine in Google Chrome, Opera and Safari but not in Firefox. I lose the red background and position of the tabs in Firefox.

This is my code snippet:

window.onscroll = fadeNav;

function fadeNav() {
  var offset = getScrollXY();
  //if y offset is greater than 0, set opacity to desired value, otherwise set to 1
  offset[1] > 0 ? setNavOpacity(0.4) : setNavOpacity(1.0);
}

function setNavOpacity(newOpacity) {
  var navBar = document.getElementById("header_bar");
  navBar.style.opacity = newOpacity;
}

function getScrollXY() {
  var scrOfX = 0,
    scrOfY = 0;

  if (typeof(window.pageYOffset) == 'number') {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }

  return [scrOfX, scrOfY];
}

* {
  margin: 0px;
  padding: 0px;
}
#header_bar {
  height: 40px;
  position: fixed;
  top: 0px;
  z-index: 10020;
  width: 100%;
  background: -webkit-linear-gradient(270deg, #b20000, #7f0000);
  -webkit-border-radius: 2px;
  /*making rounded corners*/
  -webkit-box-shadow: rgba(110, 110, 110, 0.6) 0px 4px 4px;
  /*color, left, down, blur, transparency : include inset if you want it to be an internal shadow*/
  display: -webkit-box;
  -webkit-box-orient: horizontal;
}
#title {
  font: bold 20px Tahoma;
  color: white;
  margin: 10px;
  text-align: left;
  width: 80%;
}
#uname {
  font: 12px Tahoma;
  color: white;
  margin: 10px;
  text-align: right;
}
#accnt {
  font: 12px Tahoma;
  color: white;
  margin: 10px;
  text-align: right;
}
#help {
  font: 12px Tahoma;
  color: white;
  margin: 10px;
  text-align: right;
}
#storg {
  font: 12px Tahoma;
  color: white;
  margin: 10px;
  text-align: right;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>..:CodeByMi Home:..</title>
  <link rel="stylesheet" href="navbar-fader.css">
  <script src="navbar-fader.js"></script>
</head>

<body>
  <div id="header_bar">
    <div id="title">codedByMi</div>
    <div id="uname">username</div>
    <div id="accnt">account</div>
    <div id="help">help</div>
    <div id="storg">storage</div>
  </div>
</body>

</html>

Can anyone help me please?

Solution

For the most part you no longer need to prefix things like gradients, border-radius and box-shadow. The flexbox stuff is a bit more complicated, but I'll talk about that below.

The unprefixed version of box-shadow works everywhere today where it is supported (e.g., not IE8 or Opera-Mini), except Android 2.3 devices. To cover these devices you can use -webkit-box-shadow.

The unprefixed version of border-radius works everywhere today where it is supported (again, no IE8 or Opera-Mini) full stop, so don't use the prefix.

The unprefixed version of linear gradient has good coverage in modern browsers, but old Safari and Android versions before 4.4 will benefit from the -webkit- prefix.

Flexbox is a bit more tricky. Support for it has changed several times over during the last few years. For more details about this see this article: "Old" Flexbox and "New" Flexbox. It's the most comprehensive overview documenting the changes over the years that I could find. CanIUse.com provides a good representation of which syntaxes are supported in which browsers. You can find the flexbox overview here.

CSS:

#header_bar {
  height: 40px;
  position: fixed;
  top: 0px;
  z-index: 10020;
  width: 100%;
  background: -webkit-linear-gradient(270deg, #b20000, #7f0000);
  background: linear-gradient(270deg, #b20000, #7f0000); /*Always put the unprefixed version last*/
  border-radius: 2px; /*No prefix required here*/
  -webkit-box-shadow: rgba(110, 110, 110, 0.6) 0px 4px 4px; 
  box-shadow: rgba(110, 110, 110, 0.6) 0px 4px 4px; /*Always put the unprefixed version last*/
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; /*Accepts wrap | nowrap | wrap-reverse */
  -webkit-flex-direction: row;
  flex-direction: row; /*row is used instead box-orient that was only supported in FireFox*/
}

Another good summary of flexbox old and new syntaxes can be found at Smashing Magazine. Just remember IE8 and IE9 will not support the flexible box model at all. So, if you have need to support those browsers, you should consider an alternative approach, such as using a conditional statement to load a separate css file for those browsers. For example:

<!--[if lte IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8-and-ie9.css" />
<![endif]-->