User talk:Ashling Solette/jsn-salt

Redundant CSS

Hi, I don't know how familiar you are with the use of {{#CSS:}} and CSS in general but you have a bit of redundant CSS coding in the page. The position of {{#CSS:}} in the page has no meaning other than deciding in which order the CSS is applied. Basically the earlier in the page is applied before, and when applicable, overwritten by later entries. In this case you have two, identical, bits of CSS causing the first one to do nothing because the second one is applied later and "overwriting" the first. This is of course without any visible difference because the content is identical. But if for example the first bit had the padding-right set to 2em that would be overwritten by the 1em from the second. -- Evon R'all (talk) 07:49, 19 July 2025 (UTC)

Thanks for the heads up. All the charts that I made for the navigators were initially copied straight from the Wormhole attributes page. I liked how that chart was set up and wanted to copy it as closely as possible. That chart had some CSS attached to it when I pulled it, so I kept that as is and didn't touch it.

If that CSS doesn't actually do anything, I can remove it. Ashling Solette (talk) 21:55, 23 July 2025 (UTC)

Ok, I'm struggling to find this redundant CSS. I'm going through the CSS line by line and removing each part to see what changes on the chart. And every piece that I take out makes a visible change to the chart. This is including the in-line CSS for the "Sum Of All Warps" footer, which is the only in-line CSS in the chart (e.g. if you remove the "padding-right: 1em;", it moves the text further to the right - out of line with the rest of the chart).

As far as I am aware, the CSS is identical to the chart I added to the safe spots page (except that this chart is sortable and that one isn't), so if you can edit that page to show what piece of CSS is redundant, I can copy that work over to this page. Ashling Solette (talk) 23:00, 23 July 2025 (UTC)

OK. let me see if I can explain this a bit more clearer. On the page there are 2 places where there is a {{#CSS}} block. Coincidentally these 2 blocks have identical content. The position of a {{#CSS}} block has no relation as to where on the page the CSS is valid. Any CSS is valid on the whole page. The only thing that the position is valid for is that by identical selectors the last one loaded is the one who's content is applied, there are some more things which might influence this but for this situation they do not apply. So what is in the second block will "overwrite" what is in the first block. Because the content from the 2 blocks is identical this effectively makes 1 of the blocks redundant. So in this case only one of the blocks is needed. For the TL;DR Introduction to the CSS cascade might be a good starting point. -- Evon R'all (talk) 09:40, 24 July 2025 (UTC)

The in-line CSS falls under the <th> tag, not the <td> tag, and the CSS block at the top of the chart only applies to the <td> tags. Therefore it is not redundant.

Also, I have not figured out a clean way to reference the last <tr> containing a <th> in the CSS block, so it will stay in-line for the time being. I suppose tr:last-child will work in this instance, but that would not work if you wanted subtotals partway down the chart - which would have <th> in the middle somewhere that would need different CSS from the <th> at the top of the chart. Ashling Solette (talk) 22:11, 2 August 2025 (UTC)

Ok, I think I figured it out - I was looking at each chart individually, but not the page as a whole, so I was missing the big picture view. Sorry if my last comment sounded a bit sharp. Ashling Solette (talk) 23:29, 2 August 2025 (UTC)

No problem. I always have some difficulty explaining stuff in writing. Thing with CSS is you can never look at one bit in isolation and be sure what happens; that's the cascading part in the name. As for referencing the "last" <th> as you mentioned, there is inline (last resort for me) and tr:last-child, but that is a bit more complicated than just tr:last-child, as not all the <th> are the same. But there is also the option to use a class. I hope you don't mind too much, but I did a proof of concept on combination 1. As the class can be placed wherever you want, it will work for a subtotal mid-table too. As a side note: a subtotal mid-table will probably get in trouble with the sorting part. -- Evon R'all (talk) 10:21, 3 August 2025 (UTC)