1

According to the W3C, user important style declarations are supposed to have the highest priority, higher than author important declarations, but I'm not seeing that happen. If you go to jsfiddle (intentionally blank, I'm referring to the site itself), and look at the styling for the iframe, you'll see the following:

#content textarea, #content iframe
{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0 none !important;
    box-shadow: 0 1px 3px #E4E4E4 inset;
}

I made a user style (using stylish) with the following css:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("jsfiddle.net") {
    iframe
    {
       border: 4px solid red !important;
    }
}

When I applied it, nothing happened. If I use firebug to disable the rule or remove the !important specified by jsfiddle, it works. It also works if I change the selector in my user style to #content iframe.

W3C specifically states: 3. Sort rules with the same importance and origin by specificity of selector Since the user style rule should have higher importance, specificity shouldn't have any effect here, so why does the style not apply when using only iframe as the selector?

(tested using firefox 24.2 in case that matters)

Since I haven't gotten an answer, let me give an actual example of what I'm trying to do, and why changing the selector won't help. Here's a dabblet demonstrating the exact html/css/js I'm dealing with.

The following userstyle properly applies a red border, but has no effect on the text color.

@-moz-document domain("preview.dabblet.com"){
    #test 
    {
       color: white !important;
       border: 1px solid red;
    }
}

Using a userstyle, how can I force the text to always be white?

Telanor
  • 4,419
  • 6
  • 29
  • 36
  • 1
    Just so you know, the fiddle you posted is blank; or was that intentional? – Josh Crozier Jan 27 '14 at 03:41
  • I know, I'm referring to the site and its own css. I was in the process of making a fiddle to show the issue, when I ran into the very same issue on jsfiddle itself. – Telanor Jan 27 '14 at 03:42
  • @Telanor: It doesn't make a lot of sence starting a bounty and then except an answer (which by the way has nothing to do with your question) after hours. – Netsurfer Feb 15 '14 at 03:58
  • @Mr.Alien First of all thanks for the correction. Of course I meant "accept" (was already late yesterday and English isn't my mother tongue). About my comment: I am also very interested in an answer to this question, because as far as I understand/ interpret the spec, browser behaviour is different than stated in the spec. And with about 50K of reputation you know, that the motivation of users to write an answer when already one marked as accepted, is little to zero. So imho it is at least "counterproductive", especially as the OP is a member for more than 4 years already. – Netsurfer Feb 15 '14 at 18:20
  • @Netsurfer thank you for a generous reply and for the correction, don't take it personally... :) also, I strongly insist you to post an answer, don't go on my reputation, you have less doesn't mean you have less knowledge compared to me.. but to be true, if you try to read the question again, you will get it that the answer fits perfectly, would delete the previous comment as I don't want to clutter up things here :) but still if you feel I am wrong, I insist you to solve this... – Mr. Alien Feb 15 '14 at 18:24

2 Answers2

3

You are correct that an !important declaration of origin "user" should take precedence over any declaration of origin "author", regardless of importance or specificity. However you are making an assumption that Stylish applies its styles with the "user" origin.

Since Stylish 1.4.1 for Firefox, it will apply styles with "author" origin by default. One reason for this change was compatibility with Stylish for other browsers. Their APIs only allow Stylish to add "author" origin styles, which meant that a style that worked in Firefox didn't work in Chrome. Yours is one example of where this would be the case.

The best way to fix this (and to ensure compatibility with other browsers, should you share your style on userstyles.org), is to increase the specificity of your selector to something greater than that of the site's CSS. The simplest way to do so would be to use the same selector as the site, but add a body type selector at the start:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("jsfiddle.net") {
  body #content iframe {
    border: 4px solid red !important;
  }
}

There are cases where this isn't feasible: a style that affects iframes on many sites that couldn't be so specific with its selector, or a style trying to override an !important declaration inside an HTML style attribute. Stylish for Firefox allows you to switch your style to the "agent" origin with a special comment: /* AGENT_SHEET */. This will have the effect of your !importants beating anything the site can do (much like the "user" origin), but it will not work in other browsers and can cause bad things like crashes, so this is only suggested if the above method is completely unworkable for you.

All of this is described on Stylish's wiki along with some info less relevant to your situation.

jb_314
  • 1,373
  • 2
  • 17
  • 28
  • Ahh, so that's what the issue was. It also explains why I seem to remember this working in the past. Since it's only a style I've made for myself, I'm not worried about cross browser compatibility. The Agent_Sheet comment worked, thanks – Telanor Feb 15 '14 at 22:15
  • @Telanor I answered according to the details provided by you, as a bounty question, you should specify each and everything what you are doing and using.. :) – Mr. Alien Feb 16 '14 at 05:23
  • @Mr.Alien Well I did say I was using stylish, not sure what else you wanted me to specify. I didn't think the problem was coming from there until after I tried a different addon – Telanor Feb 16 '14 at 16:47
  • @Telanor I went according to this *Since I haven't gotten an answer, let me give an actual example of what I'm trying to do* :) – Mr. Alien Feb 16 '14 at 17:13
  • @Mr.Alien But that was exactly what I was dealing with. I still made it clear I was using userstyles, and that shouldn't have implied I suddenly stopped using stylish. The only thing I didn't mention was that I couldn't change the html/css/js provided, but that is somewhat implied by the fact that I'm using userstyles in the first place. – Telanor Feb 16 '14 at 20:51
2

You're right on with the specificity idea. The problem is both your rule and jsfiddle's rule use !important which means both rules have the same priority, but the #content textarea, #content iframe rule is more specific.

To solve, you could write your rule as:

#content iframe {
  border: 4px solid red !important;
}

See this for more details: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing

That section will give you what you need, but the whole article is extremely interesting.

wharding28
  • 1,271
  • 11
  • 13
  • 1
    How can they both have the same priority? The W3C specification states that the precedence of _user important_ rules is higher than _author important_ rules. – Telanor Jan 27 '14 at 04:23
  • See here: http://stackoverflow.com/questions/7022344/css-newbie-questions-on-authors-style-readers-style-agents-style You are actually referring to _user_, _author_, and _reader_ css styles. _user_ refers to the default browser styles, _author_ to the sites author, and _reader_ to your custom rules. I'm not super familiar with W3C spec, but my understanding it _author_ and _reader_ are the same priority level. – wharding28 Jan 27 '14 at 05:00
  • 1
    W3C spec defines them as `user agent`, `user`, and `author`, which are the terms I was using. Instead of `user` that link refers to it as `reader`, and the answer says the same thing: `However, readers have the option to set styles that authors can't override`. My "reader" style should override the author style – Telanor Jan 27 '14 at 07:44