css3 gradient problem

[solarstone2149]

hello, I have a question for css3 gradients
is there a unified code that would work
atleast for mozila, webkit and presto(opera)
without need for each engine to use their prefixes

I ask because I want this gradient to work for all browsers:


background-image: -o-linear-gradient(bottom, rgba(26,64,176,0.8) 0%, rgba(79,165,240,0.8) 100%);

–

background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(26,64,176,0.8)), color-stop(01, rgba(79,165,240,0.8)) );


these 2 do the same, but they each use their own code and prefix
and this annoys the hell out of me

so what would be unified code of these 2, that would work for all 3 browsers ?

[solarstone2149]

I still don’t get it, can you please look at the code?
my gradient goes down, and with % i have defined where color(s) stops
but it won’t work at all on any browser…
is there something I’m missing?


background-image: linear-gradient(to bottom, rgba(26,64,176,0.8) 0%, rgba(79,165,240,0.8) 100%);


I can’t find any reliable tutorial online for unified code
for such simple example -_-

[Kitty Giraudel]

As far as I know, -khtml- is pretty much useless in any case.
Regarding -ms-, a bunch of things are unsupported by IE9, and prefixless in IE10, leaving this prefix far more used than required.
-o is meant to die one day or the other.
And Mozilla Firefox and Chrome are doing their best to unprefix properties as time goes.

[solarstone2149]

hmm, you all maybe missed my problem :)

I don’t wish to use prefixes for each browser engine
I wish to have 1 line(d) code (universal) that covers mozila,webkit,presto
I understand that prefixes are used to have compatibility with older versions
but by now they all should work under 1 code, or am I wrong ?

[Paulie_D]

>or am I wrong?

Yes…you are.

So, you can’t do it with a simple CSS file.

You might want to look into : http://leaverou.github.com/prefixfree/

[Senff]

SASS and COMPASS! :D

[Kitty Giraudel]

> I don’t wish to use prefixes for each browser engine I wish to have 1 line(d) code (universal) that covers mozila,webkit,presto I understand that prefixes are used to have compatibility with older versions but by now they all should work under 1 code, or am I wrong ?

And I wish unicorns pooping rainbows could exist.

You can’t please all rendering engines with a single line when it comes to non-standard properties.

Prefixes are not here to guarantee compatibility with older versions. They are here to inform the developer he’s using an implementation from a rendering engine which may or may not behave properly.

Once a property becomes a standard, vendors progressively remove the prefixes, leaving an unprefixed property (e.g. border-radius). Then developers keep using prefixes to make sure old versions still understand the property until they are not used anymore (e.g. Firefox 3.6).

[solarstone2149]

> And I wish unicorns pooping rainbows could exist.

no need to be rude :)
I thought that gradient already was “made” standard, hence why I searched unified code for all

because I noticed some code from 2011 made for webkit doesn’t work for webkit anymore
same for mozilla, and I found this frustrating, especially if web dev’s have to
keep track always what is proper code per year and what not -_-

[Paulie_D]

>web dev’s have to keep track always what is proper code per year

Yes they do….it’s part of being a developer.

[Kitty Giraudel]

> no need to be rude :)

I didn’t mean to be rude. My bad. :)

[solarstone2149]

because trident(ie) mozilla(ff) safari/chrome(webkit) and presto(opera)
all 4 have different code to write, nothing simmilar

I’d gladly trade 1 line code that works for all 3 or 4 than this annoyance :P

[Author]

Posts