Content deleted Content added
m Archiving 1 discussion(s) from Module talk:WikiProject banner) (bot |
m Archiving 1 discussion(s) from Module talk:WikiProject banner) (bot |
||
Line 396:
::You can sort any page, including talk pages. The banner sorts the page it's placed on. [[User:Gonnym|Gonnym]] ([[User talk:Gonnym|talk]]) 06:11, 23 September 2024 (UTC)
<s>[[:Category:WikiProject banners with listas value which needs moving to banner shell]] now just has some user pages in it. So we should be ready soon to remove the listas parameter entirely from this module. Then any remaining uses would be picked up by [[:Category:WikiProject templates with unknown parameters]]</s> Never mind, it is still populating — Martin <small>([[User:MSGJ|MSGJ]] · [[User talk:MSGJ|talk]])</small> 12:51, 25 September 2024 (UTC)
== CSS background colors need corresponding colors for dark mode compliance ==
CSS background colors need [[:mw:Help:Lint errors/night-mode-unaware-background-color|corresponding colors for dark mode]]. I inserted a fix for at least some of them, but apparently I did not follow process. Sorry about that. I'll leave it to others. If you are sandboxing and troubleshooting, you can see if you have resolved the problems by checking the bottom of the "Page information" page for "Background color inline style rule exists without a corresponding text color" Lint errors. To verify the visual appearance, you can go to the "Appearance" section of the right-hand sidebar in Vector 2022 and choose "Dark" under "Color (beta)". Using [[Special:ExpandTemplates]] is helpful for locating stray instances of CSS background-color defined without a color. – [[User:Jonesey95|Jonesey95]] ([[User talk:Jonesey95|talk]]) 14:05, 20 August 2024 (UTC)
:I don't know much about this, but I added [https://en.wikipedia.org/w/index.php?title=Module%3AWikiProject_banner%2Fsandbox%2Fstyles.css&diff=1241481792&oldid=1239829447 this] to [[Module:WikiProject banner/sandbox/styles.css]] and then checked at [[Template:WikiProject France/testcases]] but it is still showing as having 2 lint errors, so not sure if that has helped or not. I am using Vector 2022 but I don't see the Appearance section in my browser so can't check that. I notice that there are several other styles which define background-color but not color. Is it safe to use black for all these? — Martin <small>([[User:MSGJ|MSGJ]] · [[User talk:MSGJ|talk]])</small> 12:09, 21 August 2024 (UTC)
::Thanks. If you copy the template call into [[Special:ExpandTemplates]] and then search the resulting wikicode for "back", you should see <syntaxhighlight><td class="assess import import-Unknown" style="background:#DCDCDC">[[:Category:Unknown-importance France articles|???]]</td></syntaxhighlight> (which renders the box to the left of "This article has not yet received a rating"). That background needs a corresponding color. There are many instances like this in the code, though some of them exist only with specific combinations of parameters and values. I don't think that all of the background colors are in the templatestyles page, but I could be wrong. [https://en.wikipedia.org/w/index.php?title=Module%3AWikiProject_banner&diff=1241248384&oldid=1240624202 Here are a couple of places in the code where I matched a "background" assignment with a "color" assignment] and was reverted. Assigning "color:black" should be fine until someone wants something more sophisticated in dark mode. – [[User:Jonesey95|Jonesey95]] ([[User talk:Jonesey95|talk]]) 14:13, 21 August 2024 (UTC)
:::Yes but I added color:black to the assess class so that should cover that particular part — Martin <small>([[User:MSGJ|MSGJ]] · [[User talk:MSGJ|talk]])</small> 18:14, 21 August 2024 (UTC)
::::I expect that the Linter is confused about {{para|style}} defining the background-color while the color is defined in the class. Can the background color be moved to the CSS, or the color be moved to the style? I will also ask our WMF staffer who has been communicating with us about this new Linter flag, because it looks to me as if the td element has both a color and background-color and should not register as an error. – [[User:Jonesey95|Jonesey95]] ([[User talk:Jonesey95|talk]]) 20:39, 21 August 2024 (UTC)
:::::Yes I expect we could define all the background colours in the stylesheet rather than in the config file. We would just need to define each class/importance as a separate class. I could look at this if you think it would help — Martin <small>([[User:MSGJ|MSGJ]] · [[User talk:MSGJ|talk]])</small> 15:50, 22 August 2024 (UTC)
::::::I haven't had a response yet at [[Wikipedia_talk:Linter#Apparent_bug_in_dark_mode_Linter_detection|WT:Linter]], but it has been less than 24 hours, so some patience is still in order. If you think that moving more styles to the CSS stylesheet is a good long-term move anyway, your development time probably won't be wasted. – [[User:Jonesey95|Jonesey95]] ([[User talk:Jonesey95|talk]]) 18:07, 22 August 2024 (UTC)
:::::::I [https://en.wikipedia.org/w/index.php?title=Wikipedia_talk:Linter&curid=55873426&diff=1242203731&oldid=1241738720#Apparent_bug_in_dark_mode_Linter_detection received a response] at WT:Linter. I am not sure if it helps; it's not a quick fix for me, but someone may want to have a go at it and fix dark mode for a few million pages. – [[User:Jonesey95|Jonesey95]] ([[User talk:Jonesey95|talk]]) 23:36, 4 September 2024 (UTC)
::::::::Yes we can do this. I can work on it next week perhaps. I have followed up on that thread to clarify something — Martin <small>([[User:MSGJ|MSGJ]] · [[User talk:MSGJ|talk]])</small> 09:41, 6 September 2024 (UTC)
Just to note that I have made a start on this. The background colors for importance have now been moved into the stylesheet. I will continue with the class colors shortly — Martin <small>([[User:MSGJ|MSGJ]] · [[User talk:MSGJ|talk]])</small> 14:09, 27 September 2024 (UTC)
:@[[User:Jonesey95|Jonesey95]] finished coding this on the sandbox. Would be grateful if you could test it works, and also advise on whether the linter errors have now gone away? — Martin <small>([[User:MSGJ|MSGJ]] · [[User talk:MSGJ|talk]])</small> 22:01, 27 September 2024 (UTC)
::The sandbox version at [[Template:WikiProject France/testcases]] is reporting zero Linter errors. It appears to be using the sandbox version of all relevant modules and templates, so I think that the new coding is actually being used in the sandbox example cases. I do note a number of appearance changes, including a collapsed section in the sandbox that is not collapsible in the live version, and a note about importance in the sandbox version. I am assuming that those are also desirable changes, along with the color/background-color fixes. Thanks for working on this. – [[User:Jonesey95|Jonesey95]] ([[User talk:Jonesey95|talk]]) 22:13, 27 September 2024 (UTC)
:::Thank you. Yes, the other changes you observe are due to (a) sandbox not in sync with live, and (b) changes to importance we are discussing below — Martin <small>([[User:MSGJ|MSGJ]] · [[User talk:MSGJ|talk]])</small> 07:32, 28 September 2024 (UTC)
Before deploying this, I would like to check a few details:
* Is a comma the correct way to give the same definition to two different classes, e.g. <syntaxhighlight inline lang="css">.class-fa, .class-fl {background-color: #BED3FF;}</syntaxhighlight>
* If a class is used but not defined in the stylesheet, will it give an error or will it just be ignored?
* If two different classes are used with conflicting styles, will the one which is applied later take precedence?
I might think of some more questions — Martin <small>([[User:MSGJ|MSGJ]] · [[User talk:MSGJ|talk]])</small> 07:36, 28 September 2024 (UTC)
:Comma is correct, this is the syntax for a [https://www.w3.org/TR/selectors-3/#grouping list of selectors] - if either selector matches an element, the declaration-list is applied to that element.
:Classes are merely ways of giving convenient labels to one or more elements. [//www.w3.org/TR/2021/SPSD-html52-20210128/dom.html#element-attrdef-global-class The HTML 5.2 spec] isn't too good on this, but [//www.w3.org/TR/html4/struct/global.html#adef-class the HTML 4.01 spec] is better:
::The <samp>class</samp> attribute ... assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The <samp>class</samp> attribute has several roles in HTML:
::*As a style sheet selector (when an author wishes to assign style information to a set of elements).
::*For general purpose processing by user agents.
:So a class name that is used in the page source has no requirement to be used in a style sheet, and vice versa. The same goes for ids.
:Your third question is more complicated. It's partly down to the order in which HTML elements are nested, partly down to the order in the style sheet, and partly down to what is known as [https://www.w3.org/TR/selectors-3/#specificity "specificity"]. Assume that we have a style sheet like this: <syntaxhighlight lang=css>/* Style sheet example 1 */
.bar { background-color: pink; color: black; }
.foo { background-color: lightblue; color: black; }</syntaxhighlight> and HTML like this: <syntaxhighlight lang=html><!-- HTML example 1 --><span class=foo><span class=bar>Some text</span></span></syntaxhighlight> the words "Some text" will show on a pink background because the element of class <code>bar</code> is nested inside the element of class <code>foo</code>, and the order of the two rules in the style sheet is immaterial. But if we have HTML like this: <syntaxhighlight lang=html><!-- HTML example 2 --><span class="foo bar">Some text</span></syntaxhighlight> and style sheet example 1, the words "Some text" will show on a lightblue background; and if we exchange the rules in the style sheet: <syntaxhighlight lang=css>/* Style sheet example 2 */
.foo { background-color: lightblue; color: black; }
.bar { background-color: pink; color: black; }</syntaxhighlight> the words "Some text" will now show on a pink background because the second rule overrides the first. For these two cases, whether we use HTML example 2 or this: <syntaxhighlight lang=html><!-- HTML example 3 --><span class="bar foo">Some text</span></syntaxhighlight> makes no difference, because the order of class names in a <code>class=</code> attribute is immaterial. Now assume that the style sheet is now: <syntaxhighlight lang=css>/* Style sheet example 3 */
span.bar { background-color: pink; color: black; }
.foo { background-color: lightblue; color: black; }</syntaxhighlight> and using HTML example 2 or 3, the words "Some text" will show on a pink background because the selector of the first rule has higher specificity than the selector of the second rule.
:HTH. --[[User:Redrose64|<span style="color:#a80000; background:#ffeeee; text-decoration:inherit">Red</span>rose64]] 🌹 ([[User talk:Redrose64|talk]]) 12:45, 28 September 2024 (UTC)
::Interesting! I had always assumed that <nowiki><span class="foo"><span class="bar"></nowiki> was equivalent to <nowiki><span class="foo bar"></nowiki> — Martin <small>([[User:MSGJ|MSGJ]] · [[User talk:MSGJ|talk]])</small> 18:33, 28 September 2024 (UTC)
:::Sometimes, but not always. Consider the rule added in [[Special:Diff/1248296760|this edit]]. It will be applied to <syntaxhighlight lang=html><!-- HTML example 4 --><span class=wpb><span class=assess>HTML example 4</span></span></syntaxhighlight> which emits "<span class=wpb><span class=assess>HTML example 4</span></span>", but not to <syntaxhighlight lang=html><!-- HTML example 5 --><span class="wpb assess">HTML example 5</span></syntaxhighlight> which emits "<span class="wpb assess">HTML example 5</span>", or to <syntaxhighlight lang=html><!-- HTML example 6 --><span class=assess><span class=wpb>HTML example 6</span></span></syntaxhighlight> which emits "<span class=assess><span class=wpb>HTML example 6</span></span>". This is because the space in the middle of <code>.wpb .assess</code> is a [https://www.w3.org/TR/selectors-3/#descendant-combinators descendant combinator]: in HTML example 4 we have one span that is the descendant of the other, but in HTML example 5 we have only one span, that is of class <code>assess</code> but is not the descendant of any element of class <code>wpb</code>. --[[User:Redrose64|<span style="color:#a80000; background:#ffeeee; text-decoration:inherit">Red</span>rose64]] 🌹 ([[User talk:Redrose64|talk]]) 20:12, 28 September 2024 (UTC)
| |||