without support for @layer no CSS is loaded #101

New issue

Open

opened 2025-11-24 12:23:45 +01:00 by Moiety · 1 comment

Moiety commented

2025-11-24 12:23:45 +01:00

(Migrated from codeberg.org)

because of the minimizer all CSS is on one line. and if @layer is detected (and ignored because the browser sees it as invalid) the entire line is ignore.

because of the minimizer all CSS is on one line. and if `@layer` is detected (and ignored because the browser sees it as invalid) the entire line is ignore.

Moiety commented

2025-11-24 16:16:07 +01:00

(Migrated from codeberg.org)

a way to check for @layer support:

@supports (display: revert-layer) { ... }

Courtesy of https://sunny.garden/@knowler/115604966360777195

This allows you to import based on support:

@import "no-layers.css" supports(not (display: revert-layer));

@import "layers.css" supports(display: revert-layer);

Due to how browsers work (?) this means both no-layers.css and layers.css are fetched. Only the one that matches the correct support statement will be applied.

a way to check for `@layer` support: ```css @supports (display: revert-layer) { ... } ``` Courtesy of https://sunny.garden/@knowler/115604966360777195 --- This allows you to import based on support: ```css @import "no-layers.css" supports(not (display: revert-layer)); @import "layers.css" supports(display: revert-layer); ``` Due to how browsers work (?) this means both `no-layers.css` and `layers.css` are fetched. Only the one that matches the correct support statement will be applied.