Page MenuHomePhabricator

client-side CSS appears to be using LESS syntax, which breaks in web browsers
Open, Needs TriagePublicBUG REPORT

Description

Line 146 of ./resources/lib/ooui/oojs-ui-core-wikimediaui.css

background-color: rgba(0, 24, 73, 7/255);

This is not CSS. It looks like LESS, and it is being delivered client-side for web browsers to process, and it doesn't render correctly. This is not the only CSS/LESS issue, but is one of the first I stumbled upon yesterday while working on trying to fix something else.

sibling task

Event Timeline

Also noting from my mention of this yesterday on IRC in Libera.chat/Mediawiki,

same issue with line 155:

background-color: rgba(0, 36, 73, 21/255);

Another error on line 1399 (1400 too?):

background-position: -9999em 0\9;
padding: 0\9;

@Reedy pointed out https://github.com/wikimedia/mediawiki/commit/c3dc0a2d99ed6bb594dec7cd5095085028696588 which shows commits by @Volker_E and that it looks like it wasn't done on purpose. @Izno also guessed "that Volker just plain forgot that a css file isn't less" haha

In any case, I'm posting this so that it can be resolved/fixed, because I stumbled upon these issues after Libera.chat/CSS pointed out tons of W3C CSS validation and HTML validation errors on my MediaWiki website, and I am determined to fix all of them! even though they appear to all be from MediaWiki, skins and extensions.

Also continuing from where I last left off in The W3C CSS Validation Service results:

Property pointer-events doesn't exist : none

Actually, nevermind about this because apparently W3C-CSS Validation is outdated:

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

https://caniuse.com/pointer-events

I thought this problem and the one mentioned in T300437 have the same base reason because they have appeared at the same time and mentioned exactly the same code rgba(0,24,73,7/255), but I see the button on the demo page linked in T300437 behaving well, so probably they are separate, so I will unmark it as duplicate.

This task affects at least the hover behavior of frameless buttons – they don't have a light gray background when they are hovered.