How to revert/reset CSS filter

I have inverted the whole web page of my style. using

html {
filter: invert(90%) hue-rotate(180deg)!important;
}

Is it possible now to reset the look of particular selectors? I have tried using all: initial but Stylish does not accept this syntax.

Comments

  • Maybe with :not() pseudo class
  • Maybe with :not() pseudo class

    I have tried that as well, but it only worked for

    html:not(html)

    what obviously resulted in not applying any effect.

    Trying anything else, like

    html:not(img)
    or
    html:not(body)
    or
    html:not(.class)

    did not do anything.

    Interestingly, when I have inserted whitespace after html, like this

    html :not(.anyselector)

    the whole website glitched.

  • edited March 2018 Firefox

    No, you can't really revert a filter. You can just apply more filters afterwards. So e.g. if you made it black and white, you will never go back to properly colored. In that sense hue-rotation will be revertable.

    html:not(img) can't function. Though
    *:not(img) will work.

    Whitespace before colon is a syntax error.

  • @stonecrusher:
    I have just tried
    *:not(img) {filter: invert(90%);}
    and it caused a syntax error (whole look of a website glitched).
    Userstyles treat * as a whitespace, I guess.
  • edited March 2018 Firefox

    A syntax error or not getting what you want are very different things.
    The code definitely works, just tested it.

    By using :not you can only exclude stuff which was targeted in the first place. So html:not(img) can not work as you only targeted the html tag and no img elements.

    The problem with filters is that they will affect everything which is shown on that specific targeted layer. This can also affect child elements although they were not directly targeted. So if you already inverted the whole html tag, it's too late.

    Try to be more specific in what you want to invert. Just inverting * almost never works well and needs a whole bunch of following :not(item)s

    Example:

    *:not(html):not(body):not(img):not(p):not(.footer):not(#navi):not(.more-classes):not(.only_simple_selectors) { filter:invert(90%) !important; }
    

    Userstyles treat * as a whitespace, I guess.

    Wrong. Depending on where you find it, it's a wildcard or the "everything" selector.

    By the way, if making a dark style was just inverting the whole page, you could just make it an addon and boom all dark styles on USO are meaningless. But that's not how it works...

  • @stonecrusher:
    Thank you for the respond.

    Right, I totally agree that inverting the whole page does not have much sense. I have only done one of the styles this way to practice some CSS code, and I didn't put too much effort into it, as I am not into web development anyway.

    Surprisingly, inverted themes are still getting some popularity among Stylish users. Sometimes, inverted themes are still outperforming well-crafted styles, which are great, but some website owners like to update the site very often, and if the userstyle creator is not taking care of his code, the users would go for an inverted solution, which is easier to maintain.

    Even though I am using one of the extensions to invert some pages, sometimes I am still going for an inverted theme on userstyles library as I am looking for a little bit of improvement from what I get using the extension.

    At the moment, I am thinking of trying to find a solution to get the names of all the classes and ideally invert only selected objects.
Sign In or Register to comment.