`:style()` action operator doesn't work great with some `::-webkit-*` pseudo-classes, if other pseudo classes are used/need in the same rule.

Question

`:style()` action operator doesn't work great with some `::-webkit-*` pseudo-classes, if other pseudo classes are used/need in the same rule.

Opened this issue 10 months ago · 0 comments

Seems like Brave adblocker style operator, doesn't work correctly with some pseudo classes that are 'chained' to further polish the CSS style injection.

I don't know if it is exclusive to ::-webkit-* pseudo classes, or others could be also affected, I tested some and it seems that the issue was only in the webkit ones.

The problem is that some rules need other pseudo classes to further modify their look and behavior and polish the rule, but they are not parsing in the adblocker .

This means that it will only work with the basic ::-webtki-*:style() but not when you need anything else like ::-webtki-scrollbar*:pseudoclass:style() or longer, it doesn't work

I got to examples:

::-webkit-slider-thumb

Add:

a11ysupport.io###example-range::-webkit-slider-thumb:hover:style(-webkit-appearance: none;  appearance: none;  width: 25px;  height: 25px;  background: #04AA6D;  cursor: pointer;)
a11ysupport.io###example-range:hover:style(opacity: 1)
a11ysupport.io###example-range:style(-webkit-appearance: none;  width: 100%;  height: 25px;  background: #d3d3d3;  outline: none;  opacity: 0.7;  -webkit-transition: .2s;  transition: opacity .2s;)

go to https://a11ysupport.io/tests/html/html/inputs.html

And you will see how the :hover doesn't work, but if you remove the :hover it will work fine.

::-webkit-scrollbar#css_scrollbar_selectors

This is a more complicated and depth pseudo class and while not a standard CSS it would be nice if it would completely work with the style action operator.

The webkit - styling-scrollbars page shows the many pseudo classes that can be page, shows how many pseudo classes can be applied to it:

:horizontal, :vertical, :decrement, :increment, :start, :end, :double-button, :single-button, :no-button, :corner-present, :window-inactive.

Also it mentions these other ones that can be seen as more useful when styling the scrollbars:

In addition the :enabled, :disabled, :hover and :active pseudo-classes also work with scrollbar pieces.

None of them work.

Add to the adblocker:

brave.com##::-webkit-scrollbar:style(width:14px !important; height:14px !important; )
brave.com##::-webkit-scrollbar-track:style(background:black !important)
brave.com##::-webkit-scrollbar-thumb:style(background:cyan !important; border-radius: 0 !important;)
brave.com##::-webkit-scrollbar-thumb:hover:style(background:red !important; )
brave.com##::-webkit-scrollbar-thumb:active:style(background:violet !important; )
brave.com##::-webkit-scrollbar-button:style(border-style:solid !important; height:16px !important; width:16px !important; background-color: blue !important; )
brave.com##::-webkit-scrollbar-button:single-button:vertical:decrement:style(border-width:0 7px 14px !important; border-color:transparent transparent yellow !important; )
brave.com##::-webkit-scrollbar-button:single-button:vertical:decrement:hover:style(border-color:transparent transparent green !important; )
brave.com##::-webkit-scrollbar-button:single-button:vertical:increment:style(border-width:14px 7px 0 !important; border-color:cyan transparent transparent !important; )
brave.com##::-webkit-scrollbar-button:single-button:vertical:increment:hover:style(border-color:slateblue transparent transparent !important; )
brave.com##::-webkit-scrollbar-button:single-button:horizontal:decrement:style(border-width:7px 14px 7px 0 !important; border-color:transparent coral transparent transparent !important; )
brave.com##::-webkit-scrollbar-button:single-button:horizontal:decrement:hover:style(border-color:transparent gold transparent transparent !important; )
brave.com##::-webkit-scrollbar-button:single-button:horizontal:increment:style(border-width:7px 0 7px 14px !important; border-color:transparent transparent transparent brown !important; )
brave.com##::-webkit-scrollbar-button:horizontal:increment:hover:style(border-color:transparent transparent transparent navajowhite)

Now, compare it to the same but 'real' CSS:

::-webkit-scrollbar {width:14px !important; height:14px !important; }
::-webkit-scrollbar-track {background:black !important}
::-webkit-scrollbar-thumb {background:cyan !important; border-radius: 0 !important;}
::-webkit-scrollbar-thumb:hover {background:red !important; }
::-webkit-scrollbar-thumb:active {background:violet !important; }
::-webkit-scrollbar-button {border-style:solid !important; height:16px !important; width:16px !important; background-color: blue !important; }
::-webkit-scrollbar-button:single-button:vertical:decrement {border-width:0 7px 14px !important; border-color:transparent transparent yellow !important; }
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {border-color:transparent transparent green !important; }
::-webkit-scrollbar-button:single-button:vertical:increment {border-width:14px 7px 0 !important; border-color:cyan transparent transparent !important; }
::-webkit-scrollbar-button:single-button:vertical:increment:hover {border-color:slateblue transparent transparent !important; }
::-webkit-scrollbar-button:single-button:horizontal:decrement {border-width:7px 14px 7px 0 !important; border-color:transparent coral transparent transparent !important; }
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {border-color:transparent gold transparent transparent !important; }
::-webkit-scrollbar-button:single-button:horizontal:increment {border-width:7px 0 7px 14px !important; border-color:transparent transparent transparent brown !important; }
::-webkit-scrollbar-button:horizontal:increment:hover {border-color:transparent transparent transparent navajowhite}

You will notice how most rulees didn't work, only 4 of the 14 rules worked fine, and only these ones will work:

brave.com##::-webkit-scrollbar:style(width:14px !important; height:14px !important; )
brave.com##::-webkit-scrollbar-track:style(background:black !important)
brave.com##::-webkit-scrollbar-thumb:style(background:cyan !important; border-radius: 0 !important;)
brave.com##::-webkit-scrollbar-button:style(border-style:solid !important; height:16px !important; width:16px !important; background-color: blue !important; )

I don't know if more pseudo classes are affected, I tested some like ::placeholder and ::first-letter with :hover and they seemed to work okay? so might be just the webkit having issues or something, so I just included them in this post since I can 'prove' they are incompatible with Brave adblocker at the moment.

Hope it can be fixed, might not be seen as something too important, but any fix and issue should be resolved so it works if anyone needs it, at least the scrollbar can be useful, even if Chromium is adding in 121, support for CSS Scrollbars: scrollbar-color, scrollbar-width, it still won't do anything like the ::-webkit-scrollbar can do.

Thank you.