Grow your CSS skills. Land your dream job.

css3 gradient problem

  • # February 26, 2013 at 6:39 pm

    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 ?

    # February 26, 2013 at 7:18 pm

    This post answers your question and it’s only 4 posts below yours (at the moment that is)

    http://css-tricks.com/forums/discussion/22950/css3-gradient-w-opacity :P

    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.

    # February 26, 2013 at 8:42 pm

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

    # February 27, 2013 at 2:13 am

    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.

    # February 27, 2013 at 8:20 am

    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.

    # February 27, 2013 at 8:29 am

    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.

    # February 27, 2013 at 10:13 am

    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 ?

    # February 27, 2013 at 10:17 am

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

    # February 27, 2013 at 10:20 am

    SASS and COMPASS! :D

    # February 27, 2013 at 11:24 am

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

    # February 27, 2013 at 12:21 pm

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

    # February 27, 2013 at 12:23 pm

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

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

    # February 27, 2013 at 12:29 pm

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

    # February 27, 2013 at 1:13 pm

    > no need to be rude :)

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

    # February 27, 2013 at 7:12 pm

    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?

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".