5

See fiddle: http://jsfiddle.net/csaltyj/P2sLa/

In Chrome, this works fine, but in Firefox it does not, and yields a Javascript warning. I know the !important isn't required here, but I have a large-scale project where it is required, and it's causing Firefox to break. Any ideas?

CaptSaltyJack
  • 15,283
  • 17
  • 70
  • 99
  • `!important` works fine in FF 3.x for me... can you provide more code here? – pixelbobby May 02 '11 at 18:46
  • @pixelbobby... it doesn't work in FF 4, the error given is `Warning: Expected end of value but found '!'. Error in parsing value for 'background'. Declaration dropped.` – Hristo May 02 '11 at 18:48
  • 3
    Can you explain why it's "required" in your project? It really doesn't make any sense, since element styles always trump styles from stylesheets anyway (as far as I know). – Pointy May 02 '11 at 18:48
  • @pixelbobby It doesn't work in FF 3.6 for me either, but I don't get a Javascript error. – Pointy May 02 '11 at 18:49
  • 3
    @CaptSaltyJack, that's not jQuery's fault. Setting `!important` dynamically on CSS properties is only supported by a few browsers. See [this bug](http://bugs.jquery.com/ticket/2066). – Frédéric Hamidi May 02 '11 at 18:49
  • see: [Jquery css: applying !important styles](http://stackoverflow.com/questions/2655925/jquery-css-applying-important-styles) – clairesuzy May 02 '11 at 18:50
  • 1
    @Pointy: Suppose the background for #box was `red !important` and the OP could not change that. That would require setting `!important` to the new value as well, otherwise it will have no effect. Like this: http://jsfiddle.net/P2sLa/5/ – Kaivosukeltaja May 02 '11 at 19:00
  • 1
    Hmm ... very interesting. Learn something every day I guess :-) – Pointy May 02 '11 at 19:04
  • @Pointy Sure, the reason it's required is because I already have Superfish changing the background color dynamically, so I have a special case set up where clicking the menu item puts a graphic in the background. Without !important, nothing happens because the Superfish dynamic CSS wins. – CaptSaltyJack May 02 '11 at 19:11

1 Answers1

11

Searching for "jquery css important" brought up a blog post explaining the "problem".
I'll post some additional information, but to make a long story short, here's your solution:

$('#set-bg').click(function() {
    $('#box').css('cssText', 'background: blue !important');
});

The author states that:

This is not a bug but something that most browser doesn’t acknowledge a need since inline style already have the highest priority other than user defined ones. (unless you do not want your user to change how they view your website).

Please note that using cssText has one disadvantage and you might want to consider
using cssRules instead:

cssText will overwrites the css of that particular element. Hence, you will have to redeclare the rule for that particular element all over again.

With all that said. Please listen to the author's summary:

Using !important in CSS is not advisable since it might kill your web usability. Furthermore, there is no reason why !important should be use as inline styling already has the highest priority. Hence, you might want to reconsider applying !important on your script after thinking about the consequences that might bought to your users.

rubiii
  • 6,903
  • 2
  • 38
  • 51
  • Shouldn't that be a call to ".attr()" instead of ".css()" ? – Pointy May 02 '11 at 18:52
  • 1
    @Pointy, that's indeed a CSS attribute, it maps to `style.cssText`. However, it will override the whole style of the element. According to @rubiii's link, `cssRules` should be used instead to avoid that. – Frédéric Hamidi May 02 '11 at 18:56
  • 5
    This will also work: `$('#box').attr('style',$('#box').attr('style')+'background: blue !important;')` – Dan Manastireanu May 02 '11 at 18:57
  • I added some additional information to my answer, including the author's warning to use cssText and his conclusion to avoid !important. The information is out there ;) – rubiii May 02 '11 at 18:59