Notice: The devs are no longer actively involved in the forum, so any bug reports regarding the Stylish extension or this website should be sent to them directly at contact@userstyles.org.
Changing your Avatar.
The only way to currently add or change a forum avatar is through Gravatar.com. The email address used for your Userstyles.org account must be one of the email addresses that is registered to your Gravatar account.

CSS rules blocked in Firefox Inspector

Can someone confirm this bug I've been seeing in Firefox (52.0.1) using Stylish (2.0.7)?

  1. Go to https://www.pinterest.com (login not required for this bug)
  2. Create a new blank style
  3. Add the following code:

    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document domain("pinterest.com") {
    body { color: #000 !important; }
    }

  4. Give the style a name, and press the "Save" button

  5. Right-click anywhere on Pinterest and go to "Inspect"
  6. Look at the "Rules" tab on the right side panel and tell me if you see the CSS rules. For me it's totally blank, where normally it would show all the CSS rules for the select element.

If you disable the style, the CSS "Rules" tab works again (may need to open and close the Inspector window).

I don't know if it's Firefox, Stylish or the web site itself. Pinterest.com is the only web site I've seen this bug occur on though. Originally I thought it was some extension messing with things, but I just created a new Firefox profile with only Stylish installed and I did the steps above to test it, and it still occurred.

Comments

  • q1kq1k
    edited March 2017 Chrome

    If you right click in the "empty" area and click "add new rule" all the css rules will appear.
    It has happened to me many times, and yes it's very annoying.

    This might help:
    https://support.mozilla.org/t5/Firefox/Firefox-s-inspector-does-not-display-css-rules-for-a-specific/td-p/1209233

  • The specific rules of each item appear as attributes of the items (style = " . ").
    To see all the rules, use the shift + F7 shortcut.
    It seems to be a bug in Firefox 52, because in version 53 beta the rules appear normally, just like in Firebug and DOM Inspector.
  • There is a bug (#1326146) where sites with/without certain Content-Security-Policy (CSP) headers block the Rules pane of the Inspector.

    As a workaround, you can turn off CSP, at the risk of some alien content running in pages. In about:config, toggle security.csp.enable to false
  • Thanks for the help guys! I tried all the suggestions, but the best solution was installing Firefox 53 beta 3, which works without modifying anything.

    Jefferson's suggestion with security.csp.enable worked as well for Firefox 52, but I think I'll continue using Firefox 53 beta.

Sign In or Register to comment.