Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
acidking

CSS: !important doesn't work?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

The !important priority declaration doesn't seem to work, is there a way to make this work? Perhaps if I pass it as a plain text string? Not sure how that can be done though. Thanks.

TweenLite.to($('.popup'), 0.2, { css: { display: 'block !important', opacity: '1'} });
  • Like 1
Link to comment
Share on other sites

Hello.. the !important declaration should be used in the style sheet to override inline styles, not set inline on tags.. and is used as a last resort.

 

Check out this link about CSS Specificity

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

 

Hope this helps :)

 

Also a codepen example will be helpful to help us help you.

Link to comment
Share on other sites

Hello.. the !important declaration should be used in the style sheet to override inline styles, not set inline on tags.. and is used as a last resort.

 

Wrong, you can use it inline in the tag style attribute in order to override other stylesheets, such as <div class="someClass" style="color: #ccc !important;">. Anyway I am not here to give you a tutorial, my question was why does the !important specificity not work when included as a CSS attribute in a Greensock css value, such as in the example I provided earlier, and how can I possibly make it work?

 

Check out this link about CSS Specificity

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

 

 

What is there to check? Nothing to check.

 

 

Also a codepen example will be helpful to help us help you.

A Codepen is not applicable obviously because as I was saying, the !important specificity doesn't work.
  • Like 1
Link to comment
Share on other sites

Interesting. I have never seen it used inline and I can't imagine a scenario where that'd be useful/necessary since inline styles have the most specificity - could you enlighten us with a practical use case? In all the time that GSAP has been out, not a single person has ever asked about this or expressed such a need. Congratulations, you're the first :) 

 

To answer your question, !important isn't currently supported. I suppose you could use an onUpdate to apply it though. Perhaps:

onUpdate:function() {
    element.style.display = "block !important";
}

Although since that's not really a tweening value, it may be best to use an onStart or onComplete instead of an onUpdate.

 

And again, I'm really interested to see a practical use case for this. 

  • Like 4
Link to comment
Share on other sites

acidking, I understand that you can use !important inline, but just because it can be used there does not mean it should. CSS Specificity, Inheritance, and Precedence have a great deal with how !important is used in the style sheet, and as a last resort.

 

!important is used to override other syles within the style sheet or styles that are set inline on the tag. Inline tag styles will override any style sheet rule and property..

 

When !important is used inline on the tag, you will not be able to override styles that are inline with !important declared on it in the style sheet. I have never needed to use it inline.. since inline styles automatically override the style sheet.

 

Jacks solutions seems to be the best way to overide the !important inline using GSAP update or maybe even changing the inline !important value using javascript before you animate anything.

 

Cheers :)

  • Like 1
Link to comment
Share on other sites

And again, I'm really interested to see a practical use case for this. 

I am a front-end developer so I work on some very complicated HTML structures for some large web applications, usually those are built with C# which are propriety and you can't have access to because they're managed and updated by someone else, the web app already has !important specificities, so you loaded your custom CSS which also includes !important specificities in order to override initial ones, then (as per my current requirement) you want to use a Greensock tween, but you can't unless you override your own !important specificities. I know it's not an ordinary situation or a site which you have complete control of.

 

Thanks, I'll try the onUpdate method.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×