Modernizr don't add prefixes to my CSS Gradients

StackOverflow https://stackoverflow.com/questions/8270291

  •  09-03-2021
  •  | 
  •  

Question

I'm trying to use Modernizr with css gradients. I've read that Modernizr is now capable to add prefixes. So, I have set this in my css file:

background-image: linear-gradient(top, #FFF, #AAA);

And if I understand this should be transformed to:

background-image: -webkit-linear-gradient(top, #FFF, #AAA);

But nothing happens and my gradient is not displayed. Is that a bug or am I missing something ?

Was it helpful?

Solution

Modernizr does not add vendor prefixes. It only checks what a browser supports.

You can use this jQuery plugin. https://github.com/codler/jQuery-Css3-Finalize it will automatically add vendor prefixes. But it has limited supported for linear-gradient.

OTHER TIPS

Modernizr is a JavaScript library. It will not change the behavior of your CSS. The prefix stuff in Modernizr generates the correctly prefixed CSS property name if it is needed for the browser on which it is running. Your sample code has no JavaScript; it is just CSS; Modernizr won't change its behavior.

I think what you're looking for is http://prefixr.com/index.php

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top