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 ?
This post answers your question and it’s only 4 posts below yours (at the moment that is)
Cross-browser solution: http://codepen.io/anon/pen/zJuCh
I think you only need to specify stops if it’s not evenly spreaded, like 0% and 100% if you specify 2 colors, or 0%, 50% and 100% if you specify 3 colors, it’s implied.
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 -_-
If you are concerned about writing more then one background-image rule, use an actual image instead. But there is no reason to, it’s common practice and the only way to get cross-browser support: http://caniuse.com/#feat=css-gradients (Hey, at least IE10 works with unprefixed gradient… why do we need the -ms- prefix again? o.0 )
Browsers ignore any rules they don’t understand (other vendor’s prefixes) and take the last rule that they understand. That’s why you put the standard syntax last. There is no other way.
Use this tool. Covers all browsers and prefixes including IE. Plus, Opera is soon to be a WebKit-based browser as they are dropping Presto, although older versions will still continue to use Presto.
-webkit-, -moz-, -o-, -ms-, -khtml- are pretty much the standard of CSS3, especially if you want to use gradients. This is to my knowledge anyway.
As far as I know,
-khtml- is pretty much useless in any case.
-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.
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 ?
> 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).
> 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 -_-
When properties like gradients become standards all browser vendors can do is implement the standard syntax in new browser versions, but since people are still using old versions you write your css including prefixes to have backwards compatibility, and including standard syntax to be future proof.
http://caniuse.com/#feat=css-gradients Look at how many browser versions use prefixes, as long as those versions are used by a considerable amount of people, we have to keep using those prefixes. It’s a matter of time until we can forget about them :)
Yes -khtml- is completely pointless in fact. Never used it to my knowledge, just thought I’d pop it in their as it is still a vendor prefix :)
On topic: I don’t understand why you need to have one line of code? CSS is the least of your problems upon loading as you can just “minify” or compress the file to a one-liner anyway. The only way I could see this possible at this moment in time is using SASS or Compass. Even then, this would require multiple lines to render the prefixes. I can’t physically see the achievement or need for writing vendor-compatible CSS in to one line (although this would be an achievement in a way!). Am I missing something or is it just an experiment you’re doing?
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".