* CSS behaviors bug report: dark/light switch non-functional
@ 2024-09-01 5:07 Robin H. Johnson
2024-09-18 0:04 ` Eric Wong
0 siblings, 1 reply; 2+ messages in thread
From: Robin H. Johnson @ 2024-09-01 5:07 UTC (permalink / raw)
To: meta
[-- Attachment #1: Type: text/plain, Size: 1369 bytes --]
I wanted to include a patch, but no obvious way without it being messy
really stood out, so this is only a bug report.
contrib/css describes using the 'prefers-color-scheme' media query
selector, but Gentoo got a report that the selection between light &
dark didn't work.
One of the other devs traced it down to nuances of the HTML link media
attribute: query expressions are not valid in the HTML variant in some
browsers.
This is also mentioned here:
https://stackoverflow.com/questions/69113672/loading-css-based-on-prefers-color-scheme-media-query
> Loading CSS based on any media query expression seems to be out of specification for the media attribute.
As a workaround, I merged the two files with a wrapper, but it feels
sub-optimal, because the entire text gets injected into the PI HTML.
```
@media(prefers-color-scheme: dark) {
... #content of 216dark
}
@media(prefers-color-scheme: light) {
... #content of 216light
}
```
I think the cleanest solution would be a variant of the above:
clauses, but with @import statements inside them, and making PI-httpd
expose all the CSS Files.
--
Robin Hugh Johnson
Gentoo Linux: Dev, Infra Lead, Foundation President & Treasurer
E-Mail : robbat2@gentoo.org
GnuPG FP : 11ACBA4F 4778E3F6 E4EDF38E B27B944E 34884E85
GnuPG FP : 7D0B3CEB E9B85B1F 825BCECF EE05E6F6 A48F6136
[-- Attachment #2: signature.asc --]
[-- Type: application/pgp-signature, Size: 1113 bytes --]
^ permalink raw reply [flat|nested] 2+ messages in thread
* Re: CSS behaviors bug report: dark/light switch non-functional
2024-09-01 5:07 CSS behaviors bug report: dark/light switch non-functional Robin H. Johnson
@ 2024-09-18 0:04 ` Eric Wong
0 siblings, 0 replies; 2+ messages in thread
From: Eric Wong @ 2024-09-18 0:04 UTC (permalink / raw)
To: Robin H. Johnson; +Cc: meta
"Robin H. Johnson" <robbat2@gentoo.org> wrote:
> I wanted to include a patch, but no obvious way without it being messy
> really stood out, so this is only a bug report.
Yeah, I've been taking a stab at this in between other things but
not really making progress.
> contrib/css describes using the 'prefers-color-scheme' media query
> selector, but Gentoo got a report that the selection between light &
> dark didn't work.
I'm not even sure how that works anymore with fingerprint resistance.
Which browsers + versions + configs are they using?
Will need some testing from others here...
> One of the other devs traced it down to nuances of the HTML link media
> attribute: query expressions are not valid in the HTML variant in some
> browsers.
OK
> This is also mentioned here:
> https://stackoverflow.com/questions/69113672/loading-css-based-on-prefers-color-scheme-media-query
> > Loading CSS based on any media query expression seems to be out of specification for the media attribute.
>
> As a workaround, I merged the two files with a wrapper, but it feels
> sub-optimal, because the entire text gets injected into the PI HTML.
>
> ```
> @media(prefers-color-scheme: dark) {
> ... #content of 216dark
> }
> @media(prefers-color-scheme: light) {
> ... #content of 216light
> }
> ```
Yeah.
> I think the cleanest solution would be a variant of the above:
> clauses, but with @import statements inside them, and making PI-httpd
> expose all the CSS Files.
I think a safe way is to allow loading any CSS files present in
the same directory as an admin-specified CSS file. IOW,
public-inbox.css = /path/to/foo/216dark.css
Will allow autoloading all /path/to/foo/*.css files.
Also, I don't think @import works inside @media,
https://developer.mozilla.org/en-US/docs/Web/CSS/@import says:
| The @import CSS at-rule is used to import style rules from other valid
| stylesheets. An @import rule must be defined at the top of the stylesheet,
| before any other at-rule (except @charset and @layer) and style declarations,
| or it will be ignored.
So I think it'd have to be something like:
@import url('216dark.css') screen and (prefers-color-scheme: light)
If I'm understanding that correctly.
Hopefully I'll be back in a few hours or tomorrow with something
to test...
^ permalink raw reply [flat|nested] 2+ messages in thread
end of thread, other threads:[~2024-09-18 0:04 UTC | newest]
Thread overview: 2+ messages (download: mbox.gz follow: Atom feed
-- links below jump to the message on this page --
2024-09-01 5:07 CSS behaviors bug report: dark/light switch non-functional Robin H. Johnson
2024-09-18 0:04 ` Eric Wong
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).