is there any solution to get support of CSS Gradient in firefox 3.5 and lower?

Question

is there any solution to get support of CSS Gradient in firefox 3.5 and lower?

http://hacks.mozilla.org/2009/11/building-beautiful-buttons-with-css-gradients/

Answer 1

While this article "Cross-Browser CSS Gradient" explain how to use the css3 gradient feature in all browsers, it is still limited to FireFox 3.6+.

So this old article from 2006 List Apart "Super-Easy Blendy Backgrounds" might offer an alternative (but not for all use case you might need)

CSS3 is going to implement a background-size attribute, but since CSS3 has an ETA of never, that’s no help now. So what do we do?
Well, we use something that will scale, like the img element. Instead of using a background to display the PNG blend, we can use an img element, and set the width and the height to 100%.

, with a CSS like:

<style type="text/css">.grad img {
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}
.box {
  border: solid orange 2px;
  float: left;
  margin: 1px;
  position: relative;
  width: 165px;
  padding: 5px;
}
.box * {
  margin: 0px;
  position: relative;
  z-index: 1;
}
* html .grad {
  filter: progid:DXImageTransform.Microsoft.AlphaImage »
Loader (src='grad_white.png', sizingMethod='scale');
}
* html .grad img {
  display: none;
}
* html .box {
    position:static;
}
.blue { 
  background-color: #2382a1; 
}
.green { 
  background-color: #4be22d; 
}
.pink { 
  background-color: #ff009d;
}
</style>

<!--[if IE 7]>
<style type="text/css">
.box {
  border: solid red 2px;
  height:2.5em;
}
</style>
<![endif]-->

and the markup:

<div class="box grad blue">
  <img src="grad_white.png" alt="blur gradient box" />
  <p><a href="#">Ooo, linked text</a>!</p>

</div>
<div class="box grad pink">
  <img src="grad_white.png" alt="pink gradient box" />
  <p><a href="#">Ooo, linked text</a>!</p>
</div>

<div class="box grad green">
  <img src="grad_white.png" alt="green gradient box" />
  <p><a href="#">Ooo, linked text</a>!</p>
</div>

Answer 2

I would strongly advise you to just use a BG image. I know everyone can't wait to start using all the latest whiz-bang CSS3 features, but we're all just gonna have to wait for these parts of CSS3 to be adopted by the major browsers (which will happen before CSS3 reaches a W3C Recommendation).

Using vendor-specific extensions is a bad practice IMO and seems like a throw-back to the days when nobody cared about web standards, and web developers either, just coded for a single browser (along with tacky Designed for IE buttons), or had to write the same code multiple ways to support different browsers. All the major browsers now have support for PNG alpha layer transparency. So there's really little advantage to force the use of CSS to generate gradients. It only introduces unnecessary code redundancy.

If you're still set on absolutely not using BG images, then the only option is to use JavaScript. Here is a script that should work in Firefox 3 and up, perhaps even Firefox 2: JavaScript Gradient Roundrects.

The code would look something like:

var style = {
    'gradient-start-color': 0x99ddff,
    'gradient-end-color': 0xffffff,
    'border-radius': 1
};
OSGradient.applyGradient(style, $('#Disp')[0]);

But this is still a roundabout way to achieve a result that could be obtained with a simple 1x50px PNG image.