SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Apply "!important" to style-rule?

    Has anyone been successful in doing something like this?

    ex.
    Code:
    obj.style.backgroundAttachment="fixed !important";
    That is, !important is usually dropped (at least on FF) and I'm wondering if there's a solution so that it wouldn't be. TIA

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    !important in an external stylesheet beats something in an inline style. I don't think there's anything you can do about this except stop using !important in your stylesheet and just rely on plain old specificity and the cascade to make sure your inline styles rule mighty in the land again.

    It's interesting what you're trying to do, putting !important in the inline style. My gut reaction was "that won't "work" but I haven't tested it. In any case, the use of !important creates maintenance problems, and inline styles are discouraged unless, as I'm assuming, you're using them with JavaScript for simple toggling between things. You could always toggle between class names though, that's cleaner and generally nicer and more semantic. Just because generated content doesn't appear in the source doesn't mean it doesn't need to be as pretty as the original source markup.

  3. #3
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Quote Originally Posted by Raffles View Post
    !important in an external stylesheet beats something in an inline style. I don't think there's anything you can do about this except stop using !important in your stylesheet and just rely on plain old specificity and the cascade to make sure your inline styles rule mighty in the land again.

    It's interesting what you're trying to do, putting !important in the inline style. My gut reaction was "that won't "work" but I haven't tested it. In any case, the use of !important creates maintenance problems, and inline styles are discouraged unless, as I'm assuming, you're using them with JavaScript for simple toggling between things. You could always toggle between class names though, that's cleaner and generally nicer and more semantic. Just because generated content doesn't appear in the source doesn't mean it doesn't need to be as pretty as the original source markup.
    True... it's somewhere along the line of toggling. I was trying to use it to see if it'll work when there is an Ad campaign that'll have a siteskin and extra other styles that makes the look and feel for that Ad campaign. The thing is, the pages that those toggle will be affecting pages that have are already cascading (i.e. set-B / portals) from a base stylesheet (i.e. set-A / main homepage). And some of the style-rules in that set-B use !important due to switching/caching issues between different portals.

    But yah, its confusing lol... so here's somewhat of visual (as it's still under dev)

    A > B1
    A > B2 > Ad campaign siteskin + extra styled-elements
    A > B3
    etc...

    Meanwhile, I'll go ahead and try className toggling and see if that can work.

    Thanks

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can apply this using the setProperty method.

    Example:
    Code HTML4Strict:
    <p id="paragraph">test</p>

    Code JavaScript:
    var p = document.getElementById("paragraph");
    p.style.setProperty("color", "red", "important");


    Supported in all modern browsers except... IE.
    Last edited by Pepejeria; Mar 27, 2008 at 08:05.

  5. #5
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    You can apply this using the setProperty method.

    Example:
    Code HTML4Strict:
    <p id="paragraph">test</p>

    Code JavaScript:
    var p = document.getElementById("paragraph");
    p.style.setProperty("color", "red", "important");


    Supported all modern browsers except... IE.
    IE... damn. =)

    Thanks, I'll give it a try.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •