search

StylishThemes / Wikipedia-Dark

:mortar_board: Dark Wikipedia
https://github.com/StylishThemes/Wikipedia-Dark/raw/master/wikipedia-dark.user.css
Other
486 stars 31 forks source link

Improve colour specificity #186

Closed ColonelGerdauf closed 2 years ago

ColonelGerdauf commented 3 years ago

This improves the code where the colours are 3-digit at the end of the style attributes.

The problem with doing a simple class[style*="background-color: #000"] is that it will match cases where the background colour is for instance a simple blue written as a 6-digit hex (#0000FF).

The solution to this problem, although making the code less clean and a bit harder to troubleshoot in the lengthy CSS strings, is to combine an all-case with a termination, with a end-case.

In this example situation, it would become

class[style*="background-color: #000;"], class[style$="background-color: #000"]

Due to circumstances out of my control, I am unable to provide screenshots demonstrating what I mean, but I can provide an example link demonstrating the issue at hand: https://en.wikipedia.org/wiki/Shades_of_white#Cream

ColonelGerdauf commented 3 years ago

Okay, here are some snapshots that I managed to get from another system image image

the-j0k3r commented 3 years ago

the hex triplets you are locking aren't always meant to override just one color, so this PR will break umpteen examples to fix 1, this is because often one particular page has many colors that start with a common triplet and end with another, and instead of adding umpteen exemptions one takes a shortcut.

To properly do these fixes one needs to look at blame, to see when a specific hack was added in relation to the relevant issue nr, then check that all those entries against the pages that the existing fixes, crosschecking is a pita but the best method.

Alternatively actually fix just the broken page ontop of the existing hacks without assuming the existing exceptions can be handled the proposed way only.

Also so that you know, some of the web colors are broken still, and looking at it they need to be overriden ontop of the existing entries, so that colors that are darkened on purpose dont break either.

ColonelGerdauf commented 3 years ago

I will need a specific case example of where a hex triplet would be needed to cover the first 3 digits of a full hex. I have checked the colour code conditions manually, and all of them that I had modified are matters where [style*=color: #abc] would be intended to match colours where the full hex would be #aabbcc, and wouldn't have made much sense as far as I can tell for it to match colours such as #abc123.

This is especially true in cases where the colours were replaced with a shade of grey. [style*=color: #ccc] can either mean silver grey, or any shade of yellow. This lack of specificity will hit quite a number of false positives throughout Wikipedia, and the example page I had provided was simply one visible example that I can find.

As for your suggestion, I have attempted to prepend a :not[.swatch-color] to the code condition that would have caused issues in the linked case, but I could not get it to work. Maybe I am overlooking something absurdly simple, but it worked in CSS test codes I have made. Also, even if I got it to work, there are many other condition sets that would have caught it as more false positives.

the-j0k3r commented 3 years ago

and wouldn't have made much sense as far as I can tell for it to match colors such as #abc123.

In your opinion, which maybe right or wrong depending on the actual situations where they were implemented.