0

While trying to make linear gradients as cross-browser compatible as possible, I'm running into a problem. Konqueror won't cooperate.

When you search for linear-gradient konqueror you'll find many examples of -khtml-prefixed linear gradients that simply mention /*Konqueror*/ as if that's it. But the problem is, those won't work. None of the variants do.

And I'm not even trying to get it running in older versions. This is with the latest version that is being distributed with the current Debian (and derivates).

So am I missing something? What do I need to do in order to make these things display in Konqueror?

div {height:14px; max-width:500px; border:1px solid; margin:6px; background-repeat: repeat-y;}
KHTML variant 1:
<div style="background: -khtml-linear-gradient(90deg, #5F5, #FF5)"></div>
KHTML variant 2:
<div style="background-image: -khtml-linear-gradient(top left, #5F5, #FF5);"></div>
KHTML variant 3:
<div style="background: -khtml-gradient(linear, left top, right top, from(#5F5), to(#FF5))"></div>
KHTML variant 4:
<div style="background-image: -khtml-gradient(linear, left top, from(#5F5), to(#FF5))"></div>
KHTML variant 5:
<div style="background: -khtml-gradient(linear, left top, #5F5, #FF5)"></div>
KHTML variant 6:
<div style="background-image: -khtml-gradient(linear, 90deg, #5F5, #FF5)"></div>
KHTML variant 7:
<div style="background: -khtml-gradient(linear, to right, #5F5, #FF5)"></div>

Current standard:
<div style="background: linear-gradient(90deg, #5F5, #FF5)"></div>
And what we're actually after:
<br><img src="https://i.stack.imgur.com/3jHTv.png" alt="">
Mr Lister
  • 45,515
  • 15
  • 108
  • 150

1 Answers1

0

I tested https://www.htmlvalidator.com/test/201708/khtml.html with browsershots.org and none of the khtml prefixed backgrounds worked in any browser and most didn't even validate in CSE HTML Validator. Also, I could find nothing that said that gradients actually worked in Konqueror.

So I'd say the answer to your dilemma is to remove all those khtml gradients and just use a simple solid color then use the gradients that do work in at least some browsers, especially the standard ones. Konqueror should fall back to the solid color.

Albert Wiersch
  • 466
  • 5
  • 11
  • But then, where do all the examples that say "-khtml- is for Konqueror" from? [Here](http://www.techrepublic.com/blog/web-designer/first-look-at-css3-web-design-elements/), [here](https://holgerjust.de/2010/cross-browser-css-gradient/), [here](https://github.com/jschoolcraft/funnelhq/blob/master/app/assets/stylesheets/lib/mixins/css3/_gradient.scss), [here](https://groups.google.com/forum/#!topic/txp-svn/VBgo8NhQQfU) etc. Have none of these people actually tested their work? – Mr Lister Aug 02 '17 at 20:18
  • @MrLister, I really don't know where they came up with that or if they even tested it... maybe someone made it up and the rest of them just keep repeating it. Or maybe there is (or was) some version of Konqueror out there that it does work on (or did work on). I would think though, that if it did work that browsershots.org would have shown it working. – Albert Wiersch Aug 04 '17 at 02:58