Есть ли решение, чтобы получить поддержку CSS Gradient в Firefox 3.5 и ниже?

Question

Есть ли решение, чтобы получить поддержку CSS Gradient в Firefox 3.5 и ниже?

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

Answer 1

Я бы настоятельно рекомендовал вам просто использовать изображение BG. Я знаю, что все не могут дождаться, чтобы начать использовать все новейшие функции CSS3, но мы все должны будем просто подождать, пока эти части CSS3 не будут приняты основными браузерами (что произойдет до того, как CSS3 достигнет W3C). Рекомендация).

Использование расширений для конкретного поставщика является плохой практикой IMO, и кажется, что это возврат к временам, когда никто не заботился о веб-стандартах, а веб-разработчики тоже просто программировали для одного браузера (вместе с липкой Предназначен для IE ), или пришлось написать один и тот же код несколькими способами для поддержки разных браузеров. Все основные браузеры теперь поддерживают прозрачность альфа-слоя PNG. Таким образом, есть действительно небольшое преимущество, чтобы заставить использовать CSS для генерации градиентов. Он только вносит ненужную избыточность кода.

Если вы по-прежнему абсолютно не используете изображения BG, тогда единственный вариант - использовать JavaScript. Вот скрипт, который должен работать в Firefox 3 и выше, возможно, даже в Firefox 2: JavaScript Gradient Roundrects .

Код будет выглядеть примерно так:

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

Но это все еще окольный способ достижения результата, который можно получить с помощью простого PNG-изображения размером 1x50 пикселей.

Answer 2

Хотя в этой статье « Кросс-браузерный CSS Gradient » объясняется, как использовать функцию градиента css3 во всех браузерах, она по-прежнему ограничена FireFox 3.6 +.

Так что эта старая статья из 2006 List Apart " Super-Easy Blendy Backgrounds " может предложить альтернативу (но не для всех случаев использования, которые могут вам понадобиться)

CSS3 собирается реализовать атрибут background-size, но, поскольку у CSS3 есть ETA никогда, это не поможет. Так что же нам делать?
Ну, мы используем что-то масштабируемое, например, элемент img. Вместо использования фона для отображения смеси PNG, мы можем использовать элемент img и установить ширину и высоту равными 100%.

, с CSS вроде:

<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]-->

и разметка:

<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>