там какое-либо решение состоит в том, чтобы получить поддержку Градиента CSS в firefox 3.5 и ниже?
там какое-либо решение состоит в том, чтобы получить поддержку Градиента CSS в firefox 3.5 и ниже?
http://hacks.mozilla.org/2009/11/building-beautiful-buttons-with-css-gradients/
2 ответа
Я бы настоятельно советовал вам просто использовать BG изображение. Я знаю, что всем не терпится начать использовать все новейшие возможности CSS3, но нам всем придется подождать, пока эти части CSS3 будут приняты основными браузерами (что произойдет до того, как CSS3 станет Рекомендацией W3C).
Использование расширений, специфичных для конкретного производителя, - плохая практика IMO и похоже на возврат к тем временам, когда никто не заботился о веб-стандартах, а веб-разработчики либо просто писали код для одного браузера (вместе с липкими кнопками Designed for 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-изображения размером 1x50px.
Хотя эта статья « Cross-Browser CSS Gradient » объясняет, как использовать функцию градиента css3 во всех браузерах, она по-прежнему ограничена FireFox 3.6+.
Итак, эта старая статья из List Apart 2006 года « Super-Easy Blendy Backgrounds » может предложить альтернативу (но не для всех вариантов использования, которые могут вам понадобиться).
CSS3 будет реализовывать фоновый - 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>